style(ui_components): remove useless comment

.drone.yml

@@ -20,12 +20,12 @@ name: default
 
 steps:
 - name: quality-check
-  image: git.wyatt-studio.fr/wyatt-foss/flutter-melos:2.9.0
+  image: git.wyatt-studio.fr/wyatt-foss/flutter-melos:2.9.0-1
   commands:
   - melos run quality-check
   - melos run publish:validate
 - name: publish
-  image: git.wyatt-studio.fr/wyatt-foss/flutter-melos:2.9.0
+  image: git.wyatt-studio.fr/wyatt-foss/flutter-melos:2.9.0-1
   commands:
   - melos run publish:validate
 

mason-lock.json

@@ -1 +1 @@
-{"bricks":{"wyatt_clean_code":{"git":{"url":"ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git","path":"bricks/wyatt_clean_code","ref":"5009f1ef21d8531b773298c0fc08704d8f69afd1"}},"wyatt_feature_brick":{"git":{"url":"ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git","path":"bricks/wyatt_feature_brick","ref":"5009f1ef21d8531b773298c0fc08704d8f69afd1"}},"wyatt_package_template":{"git":{"url":"ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git","path":"bricks/wyatt_package_template","ref":"5009f1ef21d8531b773298c0fc08704d8f69afd1"}}}}
+{"bricks":{"wyatt_component_template":{"git":{"url":"ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git","path":"bricks/wyatt_component_template","ref":"7cea909470ce75b91840f479649b93f953ded596"}}}}

mason.yaml

@@ -1,13 +1,25 @@
+# Copyright (C) 2023 WYATT GROUP
+# Please see the AUTHORS file for details.
+# 
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# any later version.
+# 
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+# 
+# You should have received a copy of the GNU General Public License
+# along with this program. If not, see <https://www.gnu.org/licenses/>.
+
 bricks:
-  wyatt_clean_code:
-    git:
-      url: "ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git"
-      path: bricks/wyatt_clean_code
-  wyatt_feature_brick:
-    git:
-      url: "ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git"
-      path: bricks/wyatt_feature_brick
   wyatt_package_template:
     git:
       url: "ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git"
-      path: bricks/wyatt_package_template
+      path: bricks/wyatt_package_template
+  wyatt_component_template:
+    git:
+      url: "ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git"
+      path: bricks/wyatt_component_template

packages/wyatt_ui_components/build.yaml

@@ -0,0 +1,9 @@
+targets:
+  $default:
+    builders:
+      # Typically the builder key is just the package name, run `pub run build_runner doctor` to check your config.
+      wyatt_component_copy_with_gen:component_copy_with_gen:
+        generate_for:
+          # Example glob for only the Dart files under `lib/models`
+          - lib/**/*.dart
+          - example/lib/**/*.dart

packages/wyatt_ui_components/example/lib/components/custom_app_bar.dart

@@ -5,13 +5,13 @@ import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 part 'custom_app_bar.g.dart';
 
 @ComponentCopyWithExtension()
-class CustomAppBar extends AppBarComponent with $CustomAppBarCWMixin {
+class CustomAppBar extends TopAppBarComponent with $CustomAppBarCWMixin {
   const CustomAppBar({super.title, super.key});
 
   @override
   Widget build(BuildContext context) => AppBar(
         title: Text(
-          super.title?.text ?? '',
+          super.title?.data ?? '',
         ),
       );
 }

packages/wyatt_ui_components/example/lib/components/custom_app_bar.g.dart

@@ -6,22 +6,85 @@ part of 'custom_app_bar.dart';
 // ComponentCopyWithGenerator
 // **************************************************************************
 
-class $CustomAppBarCWProxyImpl implements $AppBarComponentCWProxy {
+class $CustomAppBarCWProxyImpl implements $TopAppBarComponentCWProxy {
   const $CustomAppBarCWProxyImpl(this._value);
   final CustomAppBar _value;
   @override
   CustomAppBar title(TextWrapper? title) => this(title: title);
   @override
+  CustomAppBar centerTitle(bool? centerTitle) => this(centerTitle: centerTitle);
+  @override
+  CustomAppBar shape(ShapeBorder? shape) => this(shape: shape);
+  @override
+  CustomAppBar systemOverlayStyle(SystemUiOverlayStyle? systemOverlayStyle) =>
+      this(systemOverlayStyle: systemOverlayStyle);
+  @override
+  CustomAppBar automaticallyImplyLeading(bool? automaticallyImplyLeading) =>
+      this(automaticallyImplyLeading: automaticallyImplyLeading);
+  @override
+  CustomAppBar flexibleSpace(Widget? flexibleSpace) =>
+      this(flexibleSpace: flexibleSpace);
+  @override
+  CustomAppBar bottom(PreferredSizeWidget? bottom) => this(bottom: bottom);
+  @override
+  CustomAppBar elevation(double? elevation) => this(elevation: elevation);
+  @override
+  CustomAppBar scrolledUnderElevation(double? scrolledUnderElevation) =>
+      this(scrolledUnderElevation: scrolledUnderElevation);
+  @override
+  CustomAppBar shadowColor(Color? shadowColor) =>
+      this(shadowColor: shadowColor);
+  @override
+  CustomAppBar surfaceTintColor(Color? surfaceTintColor) =>
+      this(surfaceTintColor: surfaceTintColor);
+  @override
+  CustomAppBar backgroundColor(MultiColor? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  CustomAppBar iconTheme(IconThemeData? iconTheme) =>
+      this(iconTheme: iconTheme);
+  @override
+  CustomAppBar primary(bool? primary) => this(primary: primary);
+  @override
+  CustomAppBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
+      this(excludeHeaderSemantics: excludeHeaderSemantics);
+  @override
+  CustomAppBar toolbarHeight(double? toolbarHeight) =>
+      this(toolbarHeight: toolbarHeight);
+  @override
+  CustomAppBar leadingWidth(double? leadingWidth) =>
+      this(leadingWidth: leadingWidth);
+  @override
   CustomAppBar leading(Widget? leading) => this(leading: leading);
   @override
   CustomAppBar actions(List<Widget>? actions) => this(actions: actions);
   @override
+  CustomAppBar expandedWidget(List<Widget>? expandedWidget) =>
+      this(expandedWidget: expandedWidget);
+  @override
   CustomAppBar key(Key? key) => this(key: key);
   @override
   CustomAppBar call({
     TextWrapper? title,
+    bool? centerTitle,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
     Widget? leading,
     List<Widget>? actions,
+    List<Widget>? expandedWidget,
     Key? key,
   }) =>
       CustomAppBar(
@@ -31,6 +94,6 @@ class $CustomAppBarCWProxyImpl implements $AppBarComponentCWProxy {
 }
 
 mixin $CustomAppBarCWMixin on Component {
-  $AppBarComponentCWProxy get copyWith =>
+  $TopAppBarComponentCWProxy get copyWith =>
       $CustomAppBarCWProxyImpl(this as CustomAppBar);
 }

packages/wyatt_ui_components/example/lib/components/custom_error_widget.dart

@@ -12,6 +12,6 @@ class CustomErrorWidget extends ErrorWidgetComponent
   @override
   Widget build(BuildContext context) => ColoredBox(
         color: Colors.red,
-        child: Center(child: Text(error?.text ?? 'Error')),
+        child: Center(child: Text(error?.data ?? 'Error')),
       );
 }

packages/wyatt_ui_components/lib/src/core/core.dart

@@ -14,7 +14,8 @@
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
+export 'enums/enums.dart';
 export 'extensions/build_context_extensions.dart';
 export 'extensions/string_extension.dart';
 export 'mixins/copy_with_mixin.dart';
-export 'utils/text_wrapper.dart';
+export 'utils/utils.dart';

packages/wyatt_ui_components/lib/src/core/enums/control_state.dart

@@ -0,0 +1,38 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+enum ControlState {
+  /// When the control is disabled and un-clickable
+  disabled,
+
+  /// Default state of a control
+  normal,
+
+  /// When the mouse cursor is hover the control
+  hovered,
+
+  /// When the control is clicked
+  tapped,
+
+  /// When the control is focused (like pressing tab)
+  focused;
+
+  bool isDisabled() => this == ControlState.disabled;
+  bool isEnabled() => this != ControlState.disabled;
+  bool isHovered() => this == ControlState.hovered;
+  bool isTapped() => this == ControlState.tapped;
+  bool isFocused() => this == ControlState.focused;
+}

packages/wyatt_ui_components/lib/src/core/enums/enums.dart

@@ -0,0 +1,18 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export './control_state.dart';
+export './status_state.dart';

packages/wyatt_ui_components/lib/src/core/enums/status_state.dart

@@ -0,0 +1,22 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+enum StatusState {
+  initial,
+  success,
+  loading,
+  error;
+}

packages/wyatt_ui_components/lib/src/core/extensions/string_extension.dart

@@ -15,10 +15,11 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:flutter/widgets.dart';
-import 'package:wyatt_ui_components/src/core/utils/text_wrapper.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 
 extension StringExtension on String? {
-  TextWrapper? wrap({TextStyle? style, List<Color>? gradient}) => this != null
+  TextWrapper? wrap({TextStyle? style, MultiColor? gradientColors}) =>
-      ? TextWrapper(this!, style: style, gradient: gradient)
+      this != null
-      : null;
+          ? TextWrapper(this!, style: style, gradientColors: gradientColors)
+          : null;
 }

packages/wyatt_ui_components/lib/src/core/utils/multi_color.dart

@@ -0,0 +1,82 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+
+class MultiColor {
+  const MultiColor(this._colors) : _color = null;
+  const MultiColor.single(this._color) : _colors = null;
+
+  final List<Color>? _colors;
+  final Color? _color;
+
+  Color get color => _color != null
+      ? _color!
+      : _colors?.isNotEmpty ?? false
+          ? _colors!.first
+          : throw IndexError.withLength(
+              0,
+              _colors?.length ?? 0,
+              message: '_color is not defined or _colors is empty.',
+            );
+
+  List<Color> get colors => _colors ?? [];
+
+  bool get isGradient => (_colors?.length ?? 0) > 1;
+  bool get isColor => _color != null || isGradient;
+
+  static MultiColor? lerp(MultiColor? a, MultiColor? b, double t) {
+    if (a == null && b == null) {
+      return null;
+    } else if (a == null) {
+      return b;
+    } else if (b == null) {
+      return a;
+    }
+    if (a.isColor && b.isColor) {
+      return MultiColor.single(Color.lerp(a.color, b.color, t));
+    } else if (a.isColor && b.isGradient) {
+      return MultiColor(
+        b.colors
+            .map((e) => Color.lerp(a.color, e, t))
+            .whereType<Color>()
+            .toList(),
+      );
+    } else if (a.isGradient && b.isColor) {
+      return MultiColor(
+        a.colors
+            .map((e) => Color.lerp(b.color, e, t))
+            .whereType<Color>()
+            .toList(),
+      );
+    } else if (a.isGradient && b.isGradient) {
+      final colors = List<Color>.empty(growable: true);
+      final shortestList =
+          (a.colors.length > b.colors.length) ? b.colors : a.colors;
+      for (int i = 0; i < shortestList.length; i++) {
+        final lerpColor = Color.lerp(a.colors[i], b.colors[i], t);
+        if (lerpColor != null) {
+          colors.add(lerpColor);
+        }
+      }
+      return MultiColor(colors);
+    }
+    return b;
+  }
+
+  @override
+  String toString() => 'MultiColor(_colors: $_colors, _color: $_color)';
+}

packages/wyatt_ui_components/lib/src/core/utils/text_wrapper.dart

@@ -15,17 +15,93 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:flutter/material.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 
+/// Wraps [String] and [TextStyle] into one object that can be
+/// a [Text] or a [RichText].
 class TextWrapper {
   const TextWrapper(
-    this.text, {
+    this.data, {
     this.style,
-    this.gradient,
+    this.gradientColors,
+    this.textAlign,
+    this.textDirection,
+    this.softWrap,
+    this.overflow,
+    this.maxLines,
+    this.selectionColor,
   });
 
-  factory TextWrapper.text(String text) => TextWrapper(text);
+  const TextWrapper.text(this.data)
+      : style = null,
+        gradientColors = null,
+        textAlign = null,
+        textDirection = null,
+        softWrap = null,
+        overflow = null,
+        maxLines = null,
+        selectionColor = null;
 
-  final String text;
+  /// Text to be displayed
+  final String data;
+
+  /// Style of the text
   final TextStyle? style;
-  final List<Color>? gradient;
+
+  /// Colors of the gradient, if any
+  final MultiColor? gradientColors;
+
+  /// How the text should be aligned horizontally.
+  final TextAlign? textAlign;
+
+  /// The directionality of the text.
+  ///
+  /// This decides how [textAlign] values like [TextAlign.start] and
+  /// [TextAlign.end] are interpreted.
+  ///
+  /// This is also used to disambiguate how to render bidirectional text. For
+  /// example, if the [data] is an English phrase followed by a Hebrew phrase,
+  /// in a [TextDirection.ltr] context the English phrase will be on the left
+  /// and the Hebrew phrase to its right, while in a [TextDirection.rtl]
+  /// context, the English phrase will be on the right and the Hebrew phrase on
+  /// its left.
+  ///
+  /// Defaults to the ambient [Directionality], if any.
+  final TextDirection? textDirection;
+
+  /// Whether the text should break at soft line breaks.
+  ///
+  /// If false, the glyphs in the text will be positioned as if there was
+  /// unlimited horizontal space.
+  final bool? softWrap;
+
+  /// How visual overflow should be handled.
+  ///
+  /// If this is null [TextStyle.overflow] will be used, otherwise the value
+  /// from the nearest [DefaultTextStyle] ancestor will be used.
+  final TextOverflow? overflow;
+
+  /// An optional maximum number of lines for the text to span, wrapping if
+  /// necessary.
+  /// If the text exceeds the given number of lines, it will be truncated
+  /// according to [overflow].
+  ///
+  /// If this is 1, text will not wrap. Otherwise, text will be wrapped at the
+  /// edge of the box.
+  ///
+  /// If this is null, but there is an ambient [DefaultTextStyle] that specifies
+  /// an explicit number for its [DefaultTextStyle.maxLines], then the
+  /// [DefaultTextStyle] value will take precedence. You can use a [RichText]
+  /// widget directly to entirely override the [DefaultTextStyle].
+  final int? maxLines;
+
+  /// The color to use when painting the selection.
+  ///
+  /// This is ignored if [SelectionContainer.maybeOf] returns null
+  /// in the [BuildContext] of the [Text] widget.
+  ///
+  /// If null, the ambient [DefaultSelectionStyle] is used (if any); failing
+  /// that, the selection color defaults to [DefaultSelectionStyle.defaultColor]
+  /// (semi-transparent grey).
+  final Color? selectionColor;
 }

packages/wyatt_ui_components/lib/src/core/utils/theme_helper.dart

@@ -0,0 +1,49 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// super program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// super program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with super program. If not, see <https://www.gnu.org/licenses/>.
+
+/// A helper class for getting theme elements.
+abstract class ThemeHelper {
+  /// Gets a theme element from a list of styles.
+  /// Styles are checked in order, and the first one that passes the
+  /// [valueValidator] is returned.
+  /// Style elements are transformed using the [transform] function.
+  ///
+  /// [styles]: A list of styles that need to be checked.
+  /// [transform]: A function that transforms each style element
+  /// to a [T] type.
+  /// [valueValidator]: An optional validation function that
+  /// determines if a style element is valid.
+  /// [combine]: A function that combines two [P] type objects to create
+  /// a new object.
+
+  static T? getThemeElement<P, T>(
+    List<P?>? styles, {
+    required T? Function(P?)? transform,
+    bool? Function(P?)? valueValidator,
+    P? Function(P?, P?)? combine,
+  }) {
+    final Iterable<P?>? validStyles = styles?.where(
+      (element) => valueValidator?.call(element) ?? (element != null),
+    );
+    return (validStyles?.isNotEmpty ?? false)
+        ? transform?.call(
+            validStyles?.reduce(
+              (value, element) => combine?.call(value, element) ?? value,
+            ),
+          )
+        : null;
+  }
+}

packages/wyatt_ui_components/lib/src/core/utils/theme_resolver.dart

@@ -0,0 +1,72 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_components/src/core/utils/theme_helper.dart';
+import 'package:wyatt_ui_components/src/domain/entities/theme_style.dart';
+
+/// {@template theme_resolver}
+/// In charge of theme negotiation and merge.
+///
+/// When you build a component `Component({double? radius})`.
+/// You have several possibilities:
+/// 1) Pass the "radius" into the constructor, `Component(radius: 12)`.
+/// 2) Set up a theme extension `ComponentThemeExtension(radius: 15)`.
+/// 3) Let `wyatt_ui_kit` "negotiate" and try to find a suitable style in the
+/// flutter theme.
+///
+/// If this negotiation phase fails, then:
+/// - If the value is mandatory: a hardcoded value in "wyatt_ui_kit" is chosen.
+/// - If not, the style is simply not applied.
+/// {@endtemplate}
+abstract class ThemeResolver<S extends ThemeStyle<S>, T, E> {
+  /// {@macro theme_resolver}
+  const ThemeResolver();
+
+  S? Function(BuildContext context, {E? extra}) get customStyleFn;
+
+  /// Compute default value from Flutter Theme or with hardcoded values.
+  S computeDefaultValue(
+    BuildContext context, {
+    E? extra,
+  });
+
+  /// Compute extension value from custom component extension.
+  S? computeExtensionValueFn(
+    BuildContext context,
+    T? themeExtension, {
+    E? extra,
+  });
+
+  /// Choose most suitable style for a given context.
+  S negotiate(BuildContext context, {E? extra}) {
+    final style = computeDefaultValue(context, extra: extra);
+    return ThemeHelper.getThemeElement<S, S>(
+          [
+            style,
+            computeExtensionValueFn(
+              context,
+              Theme.of(context).extension<T>(),
+              extra: extra,
+            ),
+            customStyleFn(context, extra: extra)
+          ],
+          transform: (value) => value,
+          combine: (value, element) => value?.mergeWith(element),
+        ) ??
+        style;
+  }
+}

packages/wyatt_ui_components/lib/src/core/utils/utils.dart

@@ -0,0 +1,20 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export 'multi_color.dart';
+export 'text_wrapper.dart';
+export 'theme_helper.dart';
+export 'theme_resolver.dart';

packages/wyatt_ui_components/lib/src/domain/entities/app_bar_component.g.dart

@@ -1,20 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'app_bar_component.dart';
-
-// **************************************************************************
-// ComponentProxyGenerator
-// **************************************************************************
-
-abstract class $AppBarComponentCWProxy {
-  AppBarComponent title(TextWrapper? title);
-  AppBarComponent leading(Widget? leading);
-  AppBarComponent actions(List<Widget>? actions);
-  AppBarComponent key(Key? key);
-  AppBarComponent call({
-    TextWrapper? title,
-    Widget? leading,
-    List<Widget>? actions,
-    Key? key,
-  });
-}

packages/wyatt_ui_components/lib/src/domain/entities/bars/bars.dart

@@ -0,0 +1,19 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export './bottom_navigation_bar_component.dart';
+export './top_navigation_bar_component.dart';
+export 'top_app_bar_component.dart';

packages/wyatt_ui_components/lib/src/domain/entities/bars/bottom_navigation_bar_component.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
 // Copyright (C) 2023 WYATT GROUP
 // Please see the AUTHORS file for details.
 //
@@ -16,6 +14,8 @@ import 'package:wyatt_component_copy_with_extension/component_copy_with_extensio
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
+import 'package:flutter/material.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
 import 'package:wyatt_ui_components/src/core/mixins/copy_with_mixin.dart';
 import 'package:wyatt_ui_components/src/domain/entities/component.dart';
 

packages/wyatt_ui_components/lib/src/domain/entities/bars/top_app_bar_component.dart

@@ -0,0 +1,53 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// super program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// super program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with super program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/src/domain/entities/bars/top_bar_component.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'top_app_bar_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class TopAppBarComponent extends TopBarComponent
+    with CopyWithMixin<$TopAppBarComponentCWProxy> {
+  const TopAppBarComponent({
+    this.title,
+    this.centerTitle,
+    super.shape,
+    super.systemOverlayStyle,
+    super.automaticallyImplyLeading,
+    super.flexibleSpace,
+    super.bottom,
+    super.elevation,
+    super.scrolledUnderElevation,
+    super.shadowColor,
+    super.surfaceTintColor,
+    super.backgroundColor,
+    super.iconTheme,
+    super.primary,
+    super.excludeHeaderSemantics,
+    super.toolbarHeight,
+    super.leadingWidth,
+    super.leading,
+    super.actions,
+    super.expandedWidget,
+    super.key,
+  });
+  final TextWrapper? title;
+  final bool? centerTitle;
+}

packages/wyatt_ui_components/lib/src/domain/entities/bars/top_app_bar_component.g.dart

@@ -0,0 +1,55 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'top_app_bar_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $TopAppBarComponentCWProxy {
+  TopAppBarComponent title(TextWrapper? title);
+  TopAppBarComponent centerTitle(bool? centerTitle);
+  TopAppBarComponent shape(ShapeBorder? shape);
+  TopAppBarComponent systemOverlayStyle(
+      SystemUiOverlayStyle? systemOverlayStyle);
+  TopAppBarComponent automaticallyImplyLeading(bool? automaticallyImplyLeading);
+  TopAppBarComponent flexibleSpace(Widget? flexibleSpace);
+  TopAppBarComponent bottom(PreferredSizeWidget? bottom);
+  TopAppBarComponent elevation(double? elevation);
+  TopAppBarComponent scrolledUnderElevation(double? scrolledUnderElevation);
+  TopAppBarComponent shadowColor(Color? shadowColor);
+  TopAppBarComponent surfaceTintColor(Color? surfaceTintColor);
+  TopAppBarComponent backgroundColor(MultiColor? backgroundColor);
+  TopAppBarComponent iconTheme(IconThemeData? iconTheme);
+  TopAppBarComponent primary(bool? primary);
+  TopAppBarComponent excludeHeaderSemantics(bool? excludeHeaderSemantics);
+  TopAppBarComponent toolbarHeight(double? toolbarHeight);
+  TopAppBarComponent leadingWidth(double? leadingWidth);
+  TopAppBarComponent leading(Widget? leading);
+  TopAppBarComponent actions(List<Widget>? actions);
+  TopAppBarComponent expandedWidget(List<Widget>? expandedWidget);
+  TopAppBarComponent key(Key? key);
+  TopAppBarComponent call({
+    TextWrapper? title,
+    bool? centerTitle,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
+    Widget? leading,
+    List<Widget>? actions,
+    List<Widget>? expandedWidget,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/bars/top_bar_component.dart

@@ -0,0 +1,62 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+abstract class TopBarComponent extends Component {
+  const TopBarComponent({
+    this.leading,
+    this.actions,
+    this.automaticallyImplyLeading,
+    this.flexibleSpace,
+    this.bottom,
+    this.elevation,
+    this.scrolledUnderElevation,
+    this.shadowColor,
+    this.surfaceTintColor,
+    this.backgroundColor,
+    this.iconTheme,
+    this.primary,
+    this.excludeHeaderSemantics,
+    this.toolbarHeight,
+    this.leadingWidth,
+    this.systemOverlayStyle,
+    this.shape,
+    this.expandedWidget,
+    super.key,
+  });
+
+  final Widget? leading;
+  final List<Widget>? actions;
+  final bool? automaticallyImplyLeading;
+  final Widget? flexibleSpace;
+  final PreferredSizeWidget? bottom;
+  final double? elevation;
+  final double? scrolledUnderElevation;
+  final Color? shadowColor;
+  final Color? surfaceTintColor;
+  final MultiColor? backgroundColor;
+  final IconThemeData? iconTheme;
+  final bool? primary;
+  final bool? excludeHeaderSemantics;
+  final double? toolbarHeight;
+  final double? leadingWidth;
+  final SystemUiOverlayStyle? systemOverlayStyle;
+  final ShapeBorder? shape;
+  final List<Widget>? expandedWidget;
+}

packages/wyatt_ui_components/lib/src/domain/entities/bars/top_navigation_bar_component.dart

@@ -0,0 +1,56 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/src/domain/entities/bars/top_bar_component.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'top_navigation_bar_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class TopNavigationBarComponent extends TopBarComponent
+    with CopyWithMixin<$TopNavigationBarComponentCWProxy> {
+  const TopNavigationBarComponent({
+    this.navigationItems,
+    this.onTap,
+    this.currentIndex = 0,
+    super.shape,
+    super.systemOverlayStyle,
+    super.automaticallyImplyLeading,
+    super.flexibleSpace,
+    super.bottom,
+    super.elevation,
+    super.scrolledUnderElevation,
+    super.shadowColor,
+    super.surfaceTintColor,
+    super.backgroundColor,
+    super.iconTheme,
+    super.primary,
+    super.excludeHeaderSemantics,
+    super.toolbarHeight,
+    super.leadingWidth,
+    super.leading,
+    super.actions,
+    super.expandedWidget,
+    super.key,
+  });
+
+  final List<TextWrapper>? navigationItems;
+  final int currentIndex;
+  final void Function(BuildContext, int)? onTap;
+}

packages/wyatt_ui_components/lib/src/domain/entities/bars/top_navigation_bar_component.g.dart

@@ -0,0 +1,60 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'top_navigation_bar_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $TopNavigationBarComponentCWProxy {
+  TopNavigationBarComponent navigationItems(List<TextWrapper>? navigationItems);
+  TopNavigationBarComponent onTap(void Function(BuildContext, int)? onTap);
+  TopNavigationBarComponent currentIndex(int? currentIndex);
+  TopNavigationBarComponent shape(ShapeBorder? shape);
+  TopNavigationBarComponent systemOverlayStyle(
+      SystemUiOverlayStyle? systemOverlayStyle);
+  TopNavigationBarComponent automaticallyImplyLeading(
+      bool? automaticallyImplyLeading);
+  TopNavigationBarComponent flexibleSpace(Widget? flexibleSpace);
+  TopNavigationBarComponent bottom(PreferredSizeWidget? bottom);
+  TopNavigationBarComponent elevation(double? elevation);
+  TopNavigationBarComponent scrolledUnderElevation(
+      double? scrolledUnderElevation);
+  TopNavigationBarComponent shadowColor(Color? shadowColor);
+  TopNavigationBarComponent surfaceTintColor(Color? surfaceTintColor);
+  TopNavigationBarComponent backgroundColor(MultiColor? backgroundColor);
+  TopNavigationBarComponent iconTheme(IconThemeData? iconTheme);
+  TopNavigationBarComponent primary(bool? primary);
+  TopNavigationBarComponent excludeHeaderSemantics(
+      bool? excludeHeaderSemantics);
+  TopNavigationBarComponent toolbarHeight(double? toolbarHeight);
+  TopNavigationBarComponent leadingWidth(double? leadingWidth);
+  TopNavigationBarComponent leading(Widget? leading);
+  TopNavigationBarComponent actions(List<Widget>? actions);
+  TopNavigationBarComponent expandedWidget(List<Widget>? expandedWidget);
+  TopNavigationBarComponent key(Key? key);
+  TopNavigationBarComponent call({
+    List<TextWrapper>? navigationItems,
+    void Function(BuildContext, int)? onTap,
+    int? currentIndex,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
+    Widget? leading,
+    List<Widget>? actions,
+    List<Widget>? expandedWidget,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_component.dart

@@ -0,0 +1,56 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+abstract class ButtonComponent extends Component {
+  const ButtonComponent({
+    this.disabledStyle,
+    this.normalStyle,
+    this.hoveredStyle,
+    this.focusedStyle,
+    this.tappedStyle,
+    this.selectedStyle,
+    this.invalidStyle,
+    this.onPressed,
+    super.themeResolver,
+    super.key,
+  });
+
+  /// Style of this button in disabled state
+  final ButtonStyle<dynamic>? disabledStyle;
+
+  /// Style of this button in normal state
+  final ButtonStyle<dynamic>? normalStyle;
+
+  /// Style of this button in hovered state
+  final ButtonStyle<dynamic>? hoveredStyle;
+
+  /// Style of this button in focused state
+  final ButtonStyle<dynamic>? focusedStyle;
+
+  /// Style of this button in tapped state
+  final ButtonStyle<dynamic>? tappedStyle;
+
+  /// Style of this button in selected state
+  final ButtonStyle<dynamic>? selectedStyle;
+
+  /// Style of this button in invalid state
+  final ButtonStyle<dynamic>? invalidStyle;
+
+  /// Callback on button press
+  final void Function(ControlState state)? onPressed;
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart

@@ -0,0 +1,72 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
+import 'package:wyatt_ui_components/src/domain/entities/theme_style.dart';
+
+abstract class ButtonStyle<T> extends ThemeStyle<T> {
+  const ButtonStyle({
+    this.radius,
+    this.padding,
+    this.foregroundColors,
+    this.backgroundColors,
+    this.borderColors,
+    this.stroke,
+    this.shadow,
+  });
+
+  /// Button radius
+  ///
+  /// Default to `BorderRadius.all(Radius.circular(4.0))`
+  final BorderRadiusGeometry? radius;
+
+  /// Padding and gaps of this button
+  ///
+  /// Default to `ButtonTheme.padding`
+  final EdgeInsetsGeometry? padding;
+
+  /// Button foreground gradient colors (from left to right)
+  ///
+  /// Default to `Theme.colorScheme.onPrimary`
+  final MultiColor? foregroundColors;
+
+  /// Button background gradient colors (from left to right)
+  ///
+  /// Default to `Theme.colorScheme.primary`
+  final MultiColor? backgroundColors;
+
+  /// Border colors (from left to right).
+  ///
+  /// Default to `null`
+  final MultiColor? borderColors;
+
+  /// Stroke of the border
+  ///
+  /// Default to `null`
+  final double? stroke;
+
+  /// Drop shadow
+  ///
+  /// Default to `null`
+  final BoxShadow? shadow;
+
+  @override
+  String toString() =>
+      'ButtonStyle(radius: $radius, padding: $padding, foregroundColors: '
+      '$foregroundColors, backgroundColors: $backgroundColors, borderColors: '
+      '$borderColors, stroke: $stroke, shadow: $shadow)';
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/buttons.dart

@@ -0,0 +1,26 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export './button_component.dart';
+export './button_style.dart';
+export './file_selection_button_component.dart';
+export './file_selection_button_style.dart';
+export './flat_button_component.dart';
+export './flat_button_style.dart';
+export './simple_icon_button_component.dart';
+export './simple_icon_button_style.dart';
+export './symbol_button_component.dart';
+export './symbol_button_style.dart';

packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_component.dart

@@ -0,0 +1,70 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'file_selection_button_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class FileSelectionButtonComponent extends ButtonComponent
+    with CopyWithMixin<$FileSelectionButtonComponentCWProxy> {
+  const FileSelectionButtonComponent({
+    this.mainAxisSize = MainAxisSize.min,
+    this.leading,
+    this.title,
+    this.subTitle,
+    super.disabledStyle,
+    super.normalStyle,
+    super.hoveredStyle,
+    super.focusedStyle,
+    super.tappedStyle,
+    super.selectedStyle,
+    super.invalidStyle,
+    super.onPressed,
+    super.themeResolver,
+    super.key,
+  });
+
+  @override
+  FileSelectionButtonStyle? get disabledStyle;
+
+  @override
+  FileSelectionButtonStyle? get normalStyle;
+
+  @override
+  FileSelectionButtonStyle? get hoveredStyle;
+
+  @override
+  FileSelectionButtonStyle? get focusedStyle;
+
+  @override
+  FileSelectionButtonStyle? get tappedStyle;
+
+  // When a file is selected
+  @override
+  FileSelectionButtonStyle? get selectedStyle;
+
+  // When the input file is invalid (too large, not supported format... etc)
+  @override
+  FileSelectionButtonStyle? get invalidStyle;
+
+  final MainAxisSize? mainAxisSize;
+  final Widget? leading;
+  final TextWrapper? title;
+  final TextWrapper? subTitle;
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_component.g.dart

@@ -0,0 +1,44 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'file_selection_button_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $FileSelectionButtonComponentCWProxy {
+  FileSelectionButtonComponent mainAxisSize(MainAxisSize? mainAxisSize);
+  FileSelectionButtonComponent leading(Widget? leading);
+  FileSelectionButtonComponent title(TextWrapper? title);
+  FileSelectionButtonComponent subTitle(TextWrapper? subTitle);
+  FileSelectionButtonComponent disabledStyle(
+      ButtonStyle<dynamic>? disabledStyle);
+  FileSelectionButtonComponent normalStyle(ButtonStyle<dynamic>? normalStyle);
+  FileSelectionButtonComponent hoveredStyle(ButtonStyle<dynamic>? hoveredStyle);
+  FileSelectionButtonComponent focusedStyle(ButtonStyle<dynamic>? focusedStyle);
+  FileSelectionButtonComponent tappedStyle(ButtonStyle<dynamic>? tappedStyle);
+  FileSelectionButtonComponent selectedStyle(
+      ButtonStyle<dynamic>? selectedStyle);
+  FileSelectionButtonComponent invalidStyle(ButtonStyle<dynamic>? invalidStyle);
+  FileSelectionButtonComponent onPressed(
+      void Function(ControlState)? onPressed);
+  FileSelectionButtonComponent themeResolver(
+      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
+  FileSelectionButtonComponent key(Key? key);
+  FileSelectionButtonComponent call({
+    MainAxisSize? mainAxisSize,
+    Widget? leading,
+    TextWrapper? title,
+    TextWrapper? subTitle,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
+    ButtonStyle<dynamic>? selectedStyle,
+    ButtonStyle<dynamic>? invalidStyle,
+    void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_style.dart

@@ -0,0 +1,133 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'dart:ui';
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
+import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
+
+class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
+  const FileSelectionButtonStyle({
+    this.title,
+    this.subTitle,
+    super.radius,
+    super.padding,
+    super.foregroundColors,
+    super.backgroundColors,
+    super.borderColors,
+    super.stroke,
+    super.shadow,
+  });
+
+  /// Merges non-null `b` attributes in `a`
+  static FileSelectionButtonStyle? merge(
+    FileSelectionButtonStyle? a,
+    FileSelectionButtonStyle? b,
+  ) {
+    if (b == null) {
+      return a?.copyWith();
+    }
+    if (a == null) {
+      return b.copyWith();
+    }
+
+    return a.copyWith(
+      title: b.title,
+      subTitle: b.subTitle,
+      radius: b.radius,
+      padding: b.padding,
+      foregroundColors: b.foregroundColors,
+      backgroundColors: b.backgroundColors,
+      borderColors: b.borderColors,
+      stroke: b.stroke,
+      shadow: b.shadow,
+    );
+  }
+
+  /// Used for interpolation.
+  static FileSelectionButtonStyle? lerp(
+    FileSelectionButtonStyle? a,
+    FileSelectionButtonStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+    // b.copyWith to return b attributes even if they are not lerped
+    return b.copyWith(
+      title: TextStyle.lerp(a.title, b.title, t),
+      subTitle: TextStyle.lerp(a.title, b.title, t),
+      foregroundColors: MultiColor.lerp(
+        a.foregroundColors,
+        b.foregroundColors,
+        t,
+      ),
+      backgroundColors: MultiColor.lerp(
+        a.backgroundColors,
+        b.backgroundColors,
+        t,
+      ),
+      borderColors: MultiColor.lerp(
+        a.borderColors,
+        b.borderColors,
+        t,
+      ),
+      radius: BorderRadiusGeometry.lerp(a.radius, b.radius, t),
+      padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
+      stroke: lerpDouble(a.stroke, b.stroke, t),
+      shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+    );
+  }
+
+  /// Title text style
+  ///
+  /// Default to `TextTheme.labelLarge`
+  final TextStyle? title;
+
+  /// Sub title text style
+  ///
+  /// Default to `TextTheme.labelSmall`
+  final TextStyle? subTitle;
+
+  @override
+  FileSelectionButtonStyle? mergeWith(FileSelectionButtonStyle? other) =>
+      FileSelectionButtonStyle.merge(this, other);
+
+  @override
+  FileSelectionButtonStyle? copyWith({
+    TextStyle? title,
+    TextStyle? subTitle,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  }) =>
+      FileSelectionButtonStyle(
+        title: title ?? this.title,
+        subTitle: subTitle ?? this.subTitle,
+        radius: radius ?? this.radius,
+        padding: padding ?? this.padding,
+        foregroundColors: foregroundColors ?? this.foregroundColors,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        borderColors: borderColors ?? this.borderColors,
+        stroke: stroke ?? this.stroke,
+        shadow: shadow ?? this.shadow,
+      );
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_component.dart

@@ -0,0 +1,60 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'flat_button_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class FlatButtonComponent extends ButtonComponent
+    with CopyWithMixin<$FlatButtonComponentCWProxy> {
+  const FlatButtonComponent({
+    this.mainAxisSize,
+    this.prefix,
+    this.suffix,
+    this.label,
+    super.disabledStyle,
+    super.normalStyle,
+    super.hoveredStyle,
+    super.focusedStyle,
+    super.tappedStyle,
+    super.onPressed,
+    super.themeResolver,
+    super.key,
+  });
+
+  @override
+  FlatButtonStyle? get disabledStyle;
+
+  @override
+  FlatButtonStyle? get normalStyle;
+
+  @override
+  FlatButtonStyle? get hoveredStyle;
+
+  @override
+  FlatButtonStyle? get focusedStyle;
+
+  @override
+  FlatButtonStyle? get tappedStyle;
+
+  final MainAxisSize? mainAxisSize;
+  final Widget? prefix;
+  final Widget? suffix;
+  final TextWrapper? label;
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_component.g.dart

@@ -0,0 +1,37 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'flat_button_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $FlatButtonComponentCWProxy {
+  FlatButtonComponent mainAxisSize(MainAxisSize? mainAxisSize);
+  FlatButtonComponent prefix(Widget? prefix);
+  FlatButtonComponent suffix(Widget? suffix);
+  FlatButtonComponent label(TextWrapper? label);
+  FlatButtonComponent disabledStyle(ButtonStyle<dynamic>? disabledStyle);
+  FlatButtonComponent normalStyle(ButtonStyle<dynamic>? normalStyle);
+  FlatButtonComponent hoveredStyle(ButtonStyle<dynamic>? hoveredStyle);
+  FlatButtonComponent focusedStyle(ButtonStyle<dynamic>? focusedStyle);
+  FlatButtonComponent tappedStyle(ButtonStyle<dynamic>? tappedStyle);
+  FlatButtonComponent onPressed(void Function(ControlState)? onPressed);
+  FlatButtonComponent themeResolver(
+      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
+  FlatButtonComponent key(Key? key);
+  FlatButtonComponent call({
+    MainAxisSize? mainAxisSize,
+    Widget? prefix,
+    Widget? suffix,
+    TextWrapper? label,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
+    void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart

@@ -0,0 +1,123 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'dart:ui';
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
+import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
+
+class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
+  const FlatButtonStyle({
+    this.label,
+    super.radius,
+    super.padding,
+    super.foregroundColors,
+    super.backgroundColors,
+    super.borderColors,
+    super.stroke,
+    super.shadow,
+  });
+
+  /// Merges non-null `b` attributes in `a`
+  static FlatButtonStyle? merge(
+    FlatButtonStyle? a,
+    FlatButtonStyle? b,
+  ) {
+    if (b == null) {
+      return a?.copyWith();
+    }
+    if (a == null) {
+      return b.copyWith();
+    }
+
+    return a.copyWith(
+      label: b.label,
+      radius: b.radius,
+      padding: b.padding,
+      foregroundColors: b.foregroundColors,
+      backgroundColors: b.backgroundColors,
+      borderColors: b.borderColors,
+      stroke: b.stroke,
+      shadow: b.shadow,
+    );
+  }
+
+  /// Used for interpolation.
+  static FlatButtonStyle? lerp(
+    FlatButtonStyle? a,
+    FlatButtonStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+    // b.copyWith to return b attributes even if they are not lerped
+    return b.copyWith(
+      label: TextStyle.lerp(a.label, b.label, t),
+      foregroundColors: MultiColor.lerp(
+        a.foregroundColors,
+        b.foregroundColors,
+        t,
+      ),
+      backgroundColors: MultiColor.lerp(
+        a.backgroundColors,
+        b.backgroundColors,
+        t,
+      ),
+      borderColors: MultiColor.lerp(
+        a.borderColors,
+        b.borderColors,
+        t,
+      ),
+      radius: BorderRadiusGeometry.lerp(a.radius, b.radius, t),
+      padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
+      stroke: lerpDouble(a.stroke, b.stroke, t),
+      shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+    );
+  }
+
+  /// Label text style
+  ///
+  /// Default to `TextTheme.labelLarge`
+  final TextStyle? label;
+
+  @override
+  FlatButtonStyle? mergeWith(FlatButtonStyle? other) =>
+      FlatButtonStyle.merge(this, other);
+
+  @override
+  FlatButtonStyle? copyWith({
+    TextStyle? label,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  }) =>
+      FlatButtonStyle(
+        label: label ?? this.label,
+        radius: radius ?? this.radius,
+        padding: padding ?? this.padding,
+        foregroundColors: foregroundColors ?? this.foregroundColors,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        borderColors: borderColors ?? this.borderColors,
+        stroke: stroke ?? this.stroke,
+        shadow: shadow ?? this.shadow,
+      );
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_component.dart

@@ -0,0 +1,54 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'simple_icon_button_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class SimpleIconButtonComponent extends ButtonComponent
+    with CopyWithMixin<$SimpleIconButtonComponentCWProxy> {
+  const SimpleIconButtonComponent({
+    this.icon,
+    super.disabledStyle,
+    super.normalStyle,
+    super.hoveredStyle,
+    super.focusedStyle,
+    super.tappedStyle,
+    super.onPressed,
+    super.themeResolver,
+    super.key,
+  });
+
+  @override
+  SimpleIconButtonStyle? get disabledStyle;
+
+  @override
+  SimpleIconButtonStyle? get normalStyle;
+
+  @override
+  SimpleIconButtonStyle? get hoveredStyle;
+
+  @override
+  SimpleIconButtonStyle? get focusedStyle;
+
+  @override
+  SimpleIconButtonStyle? get tappedStyle;
+
+  final Icon? icon;
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_component.g.dart

@@ -0,0 +1,31 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'simple_icon_button_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $SimpleIconButtonComponentCWProxy {
+  SimpleIconButtonComponent icon(Icon? icon);
+  SimpleIconButtonComponent disabledStyle(ButtonStyle<dynamic>? disabledStyle);
+  SimpleIconButtonComponent normalStyle(ButtonStyle<dynamic>? normalStyle);
+  SimpleIconButtonComponent hoveredStyle(ButtonStyle<dynamic>? hoveredStyle);
+  SimpleIconButtonComponent focusedStyle(ButtonStyle<dynamic>? focusedStyle);
+  SimpleIconButtonComponent tappedStyle(ButtonStyle<dynamic>? tappedStyle);
+  SimpleIconButtonComponent onPressed(void Function(ControlState)? onPressed);
+  SimpleIconButtonComponent themeResolver(
+      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
+  SimpleIconButtonComponent key(Key? key);
+  SimpleIconButtonComponent call({
+    Icon? icon,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
+    void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_style.dart

@@ -0,0 +1,123 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'dart:ui';
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
+import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
+
+class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
+  const SimpleIconButtonStyle({
+    this.dimension,
+    super.radius,
+    super.padding,
+    super.foregroundColors,
+    super.backgroundColors,
+    super.borderColors,
+    super.stroke,
+    super.shadow,
+  });
+
+  /// Merges non-null `b` attributes in `a`
+  static SimpleIconButtonStyle? merge(
+    SimpleIconButtonStyle? a,
+    SimpleIconButtonStyle? b,
+  ) {
+    if (b == null) {
+      return a?.copyWith();
+    }
+    if (a == null) {
+      return b.copyWith();
+    }
+
+    return a.copyWith(
+      dimension: b.dimension,
+      radius: b.radius,
+      padding: b.padding,
+      foregroundColors: b.foregroundColors,
+      backgroundColors: b.backgroundColors,
+      borderColors: b.borderColors,
+      stroke: b.stroke,
+      shadow: b.shadow,
+    );
+  }
+
+  /// Used for interpolation.
+  static SimpleIconButtonStyle? lerp(
+    SimpleIconButtonStyle? a,
+    SimpleIconButtonStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+    // b.copyWith to return b attributes even if they are not lerped
+    return b.copyWith(
+      dimension: lerpDouble(a.dimension, b.dimension, t),
+      foregroundColors: MultiColor.lerp(
+        a.foregroundColors,
+        b.foregroundColors,
+        t,
+      ),
+      backgroundColors: MultiColor.lerp(
+        a.backgroundColors,
+        b.backgroundColors,
+        t,
+      ),
+      borderColors: MultiColor.lerp(
+        a.borderColors,
+        b.borderColors,
+        t,
+      ),
+      radius: BorderRadiusGeometry.lerp(a.radius, b.radius, t),
+      padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
+      stroke: lerpDouble(a.stroke, b.stroke, t),
+      shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+    );
+  }
+
+  /// Dimension of this button (as a square)
+  ///
+  /// Default to `context.buttonTheme.height`
+  final double? dimension;
+
+  @override
+  SimpleIconButtonStyle? mergeWith(SimpleIconButtonStyle? other) =>
+      SimpleIconButtonStyle.merge(this, other);
+
+  @override
+  SimpleIconButtonStyle copyWith({
+    double? dimension,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  }) =>
+      SimpleIconButtonStyle(
+        dimension: dimension ?? this.dimension,
+        radius: radius ?? this.radius,
+        padding: padding ?? this.padding,
+        foregroundColors: foregroundColors ?? this.foregroundColors,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        borderColors: borderColors ?? this.borderColors,
+        stroke: stroke ?? this.stroke,
+        shadow: shadow ?? this.shadow,
+      );
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_component.dart

@@ -0,0 +1,62 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'symbol_button_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class SymbolButtonComponent extends ButtonComponent
+    with CopyWithMixin<$SymbolButtonComponentCWProxy> {
+  const SymbolButtonComponent({
+    this.mainAxisSize = MainAxisSize.min,
+    this.label,
+    this.icon,
+    super.disabledStyle,
+    super.normalStyle,
+    super.hoveredStyle,
+    super.focusedStyle,
+    super.tappedStyle,
+    super.selectedStyle,
+    super.onPressed,
+    super.themeResolver,
+    super.key,
+  });
+
+  @override
+  SymbolButtonStyle? get disabledStyle;
+
+  @override
+  SymbolButtonStyle? get normalStyle;
+
+  @override
+  SymbolButtonStyle? get hoveredStyle;
+
+  @override
+  SymbolButtonStyle? get focusedStyle;
+
+  @override
+  SymbolButtonStyle? get tappedStyle;
+
+  @override
+  SymbolButtonStyle? get selectedStyle;
+
+  final MainAxisSize? mainAxisSize;
+  final Widget? icon;
+  final TextWrapper? label;
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_component.g.dart

@@ -0,0 +1,37 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'symbol_button_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $SymbolButtonComponentCWProxy {
+  SymbolButtonComponent mainAxisSize(MainAxisSize? mainAxisSize);
+  SymbolButtonComponent label(TextWrapper? label);
+  SymbolButtonComponent icon(Widget? icon);
+  SymbolButtonComponent disabledStyle(ButtonStyle<dynamic>? disabledStyle);
+  SymbolButtonComponent normalStyle(ButtonStyle<dynamic>? normalStyle);
+  SymbolButtonComponent hoveredStyle(ButtonStyle<dynamic>? hoveredStyle);
+  SymbolButtonComponent focusedStyle(ButtonStyle<dynamic>? focusedStyle);
+  SymbolButtonComponent tappedStyle(ButtonStyle<dynamic>? tappedStyle);
+  SymbolButtonComponent selectedStyle(ButtonStyle<dynamic>? selectedStyle);
+  SymbolButtonComponent onPressed(void Function(ControlState)? onPressed);
+  SymbolButtonComponent themeResolver(
+      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
+  SymbolButtonComponent key(Key? key);
+  SymbolButtonComponent call({
+    MainAxisSize? mainAxisSize,
+    TextWrapper? label,
+    Widget? icon,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
+    ButtonStyle<dynamic>? selectedStyle,
+    void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_style.dart

@@ -0,0 +1,133 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'dart:ui';
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
+import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
+
+class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
+  const SymbolButtonStyle({
+    this.label,
+    this.dimension,
+    super.radius,
+    super.padding,
+    super.foregroundColors,
+    super.backgroundColors,
+    super.borderColors,
+    super.stroke,
+    super.shadow,
+  });
+
+  /// Merges non-null `b` attributes in `a`
+  static SymbolButtonStyle? merge(
+    SymbolButtonStyle? a,
+    SymbolButtonStyle? b,
+  ) {
+    if (b == null) {
+      return a?.copyWith();
+    }
+    if (a == null) {
+      return b.copyWith();
+    }
+
+    return a.copyWith(
+      label: b.label,
+      dimension: b.dimension,
+      radius: b.radius,
+      padding: b.padding,
+      foregroundColors: b.foregroundColors,
+      backgroundColors: b.backgroundColors,
+      borderColors: b.borderColors,
+      stroke: b.stroke,
+      shadow: b.shadow,
+    );
+  }
+
+  /// Used for interpolation.
+  static SymbolButtonStyle? lerp(
+    SymbolButtonStyle? a,
+    SymbolButtonStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+    // b.copyWith to return b attributes even if they are not lerped
+    return b.copyWith(
+      label: TextStyle.lerp(a.label, b.label, t),
+      dimension: lerpDouble(a.dimension, b.dimension, t),
+      foregroundColors: MultiColor.lerp(
+        a.foregroundColors,
+        b.foregroundColors,
+        t,
+      ),
+      backgroundColors: MultiColor.lerp(
+        a.backgroundColors,
+        b.backgroundColors,
+        t,
+      ),
+      borderColors: MultiColor.lerp(
+        a.borderColors,
+        b.borderColors,
+        t,
+      ),
+      radius: BorderRadiusGeometry.lerp(a.radius, b.radius, t),
+      padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
+      stroke: lerpDouble(a.stroke, b.stroke, t),
+      shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+    );
+  }
+
+  /// Label text style
+  ///
+  /// Default to `TextTheme.labelLarge`
+  final TextStyle? label;
+
+  /// Dimension of this button (as a square)
+  ///
+  /// Default to `context.buttonTheme.height`
+  final double? dimension;
+
+  @override
+  SymbolButtonStyle? mergeWith(SymbolButtonStyle? other) =>
+      SymbolButtonStyle.merge(this, other);
+
+  @override
+  SymbolButtonStyle? copyWith({
+    TextStyle? label,
+    double? dimension,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  }) =>
+      SymbolButtonStyle(
+        label: label ?? this.label,
+        dimension: dimension ?? this.dimension,
+        radius: radius ?? this.radius,
+        padding: padding ?? this.padding,
+        foregroundColors: foregroundColors ?? this.foregroundColors,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        borderColors: borderColors ?? this.borderColors,
+        stroke: stroke ?? this.stroke,
+        shadow: shadow ?? this.shadow,
+      );
+}

packages/wyatt_ui_components/lib/src/domain/entities/cards/card_component.dart

@@ -15,6 +15,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/component.dart';
 
 abstract class CardComponent extends Component {
@@ -22,7 +23,7 @@ abstract class CardComponent extends Component {
     this.radius = 12,
     this.padding = 25,
     this.borderColors,
-    this.backgroundColor,
+    this.backgroundColors,
     this.minSize = const Size(330, 230),
     this.maxSize = const Size(330, 530),
     this.shadow = const BoxShadow(
@@ -41,10 +42,10 @@ abstract class CardComponent extends Component {
   final double? padding;
 
   /// Border gradient color (from left to right)
-  final List<Color>? borderColors;
+  final MultiColor? borderColors;
 
   /// Card background color
-  final Color? backgroundColor;
+  final MultiColor? backgroundColors;
 
   /// Minimum size for this card
   final Size? minSize;

packages/wyatt_ui_components/lib/src/domain/entities/cards/information_card_component.dart

@@ -33,7 +33,7 @@ abstract class InformationCardComponent extends CardComponent
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,

packages/wyatt_ui_components/lib/src/domain/entities/cards/information_card_component.g.dart

@@ -14,8 +14,8 @@ abstract class $InformationCardComponentCWProxy {
   InformationCardComponent axis(Axis? axis);
   InformationCardComponent radius(double? radius);
   InformationCardComponent padding(double? padding);
-  InformationCardComponent borderColors(List<Color>? borderColors);
+  InformationCardComponent borderColors(MultiColor? borderColors);
-  InformationCardComponent backgroundColor(Color? backgroundColor);
+  InformationCardComponent backgroundColors(MultiColor? backgroundColors);
   InformationCardComponent minSize(Size? minSize);
   InformationCardComponent maxSize(Size? maxSize);
   InformationCardComponent shadow(BoxShadow? shadow);
@@ -29,8 +29,8 @@ abstract class $InformationCardComponentCWProxy {
     Axis? axis,
     double? radius,
     double? padding,
-    List<Color>? borderColors,
+    MultiColor? borderColors,
-    Color? backgroundColor,
+    MultiColor? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,

packages/wyatt_ui_components/lib/src/domain/entities/cards/portfolio_card_component.dart

@@ -25,6 +25,7 @@ part 'portfolio_card_component.g.dart';
 abstract class PortfolioCardComponent extends CardComponent
     with CopyWithMixin<$PortfolioCardComponentCWProxy> {
   const PortfolioCardComponent({
+    this.secondaryBackgroundColors,
     this.showImagesOnTop,
     this.keyword,
     this.description,
@@ -36,7 +37,7 @@ abstract class PortfolioCardComponent extends CardComponent
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,
@@ -46,10 +47,11 @@ abstract class PortfolioCardComponent extends CardComponent
 
   final bool? showImagesOnTop;
   final List<TextWrapper>? keyword;
-  final List<String>? assets;
+  final List<Widget>? assets;
   final TextWrapper? description;
-  final String? logo;
+  final Widget? logo;
   final TextWrapper? projectName;
   final TextWrapper? subtitle;
   final List<Widget>? ctas;
+  final Color? secondaryBackgroundColors;
 }

packages/wyatt_ui_components/lib/src/domain/entities/cards/portfolio_card_component.g.dart

@@ -7,36 +7,39 @@ part of 'portfolio_card_component.dart';
 // **************************************************************************
 
 abstract class $PortfolioCardComponentCWProxy {
+  PortfolioCardComponent secondaryBackgroundColors(
+      Color? secondaryBackgroundColors);
   PortfolioCardComponent showImagesOnTop(bool? showImagesOnTop);
   PortfolioCardComponent keyword(List<TextWrapper>? keyword);
   PortfolioCardComponent description(TextWrapper? description);
-  PortfolioCardComponent logo(String? logo);
+  PortfolioCardComponent logo(Widget? logo);
   PortfolioCardComponent projectName(TextWrapper? projectName);
   PortfolioCardComponent subtitle(TextWrapper? subtitle);
   PortfolioCardComponent ctas(List<Widget>? ctas);
-  PortfolioCardComponent assets(List<String>? assets);
+  PortfolioCardComponent assets(List<Widget>? assets);
   PortfolioCardComponent radius(double? radius);
   PortfolioCardComponent padding(double? padding);
-  PortfolioCardComponent borderColors(List<Color>? borderColors);
+  PortfolioCardComponent borderColors(MultiColor? borderColors);
-  PortfolioCardComponent backgroundColor(Color? backgroundColor);
+  PortfolioCardComponent backgroundColors(MultiColor? backgroundColors);
   PortfolioCardComponent minSize(Size? minSize);
   PortfolioCardComponent maxSize(Size? maxSize);
   PortfolioCardComponent shadow(BoxShadow? shadow);
   PortfolioCardComponent background(Widget? background);
   PortfolioCardComponent key(Key? key);
   PortfolioCardComponent call({
+    Color? secondaryBackgroundColors,
     bool? showImagesOnTop,
     List<TextWrapper>? keyword,
     TextWrapper? description,
-    String? logo,
+    Widget? logo,
     TextWrapper? projectName,
     TextWrapper? subtitle,
     List<Widget>? ctas,
-    List<String>? assets,
+    List<Widget>? assets,
     double? radius,
     double? padding,
-    List<Color>? borderColors,
+    MultiColor? borderColors,
-    Color? backgroundColor,
+    MultiColor? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,

packages/wyatt_ui_components/lib/src/domain/entities/cards/quote_card_component.dart

@@ -35,7 +35,7 @@ abstract class QuoteCardComponent extends CardComponent
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,

packages/wyatt_ui_components/lib/src/domain/entities/cards/quote_card_component.g.dart

@@ -16,8 +16,8 @@ abstract class $QuoteCardComponentCWProxy {
   QuoteCardComponent rightQuote(Widget? rightQuote);
   QuoteCardComponent radius(double? radius);
   QuoteCardComponent padding(double? padding);
-  QuoteCardComponent borderColors(List<Color>? borderColors);
+  QuoteCardComponent borderColors(MultiColor? borderColors);
-  QuoteCardComponent backgroundColor(Color? backgroundColor);
+  QuoteCardComponent backgroundColors(MultiColor? backgroundColors);
   QuoteCardComponent minSize(Size? minSize);
   QuoteCardComponent maxSize(Size? maxSize);
   QuoteCardComponent shadow(BoxShadow? shadow);
@@ -33,8 +33,8 @@ abstract class $QuoteCardComponentCWProxy {
     Widget? rightQuote,
     double? radius,
     double? padding,
-    List<Color>? borderColors,
+    MultiColor? borderColors,
-    Color? backgroundColor,
+    MultiColor? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,

packages/wyatt_ui_components/lib/src/domain/entities/cards/skill_card_component.dart

@@ -31,10 +31,11 @@ abstract class SkillCardComponent extends CardComponent
     this.description,
     this.skills,
     this.leadingIcon,
+    this.secondaryBackgroundColors,
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,
@@ -48,4 +49,5 @@ abstract class SkillCardComponent extends CardComponent
   final TextWrapper? description;
   final List<TextWrapper>? skills;
   final IconData? leadingIcon;
+  final Color? secondaryBackgroundColors;
 }

packages/wyatt_ui_components/lib/src/domain/entities/cards/skill_card_component.g.dart

@@ -13,10 +13,12 @@ abstract class $SkillCardComponentCWProxy {
   SkillCardComponent description(TextWrapper? description);
   SkillCardComponent skills(List<TextWrapper>? skills);
   SkillCardComponent leadingIcon(IconData? leadingIcon);
+  SkillCardComponent secondaryBackgroundColors(
+      Color? secondaryBackgroundColors);
   SkillCardComponent radius(double? radius);
   SkillCardComponent padding(double? padding);
-  SkillCardComponent borderColors(List<Color>? borderColors);
+  SkillCardComponent borderColors(MultiColor? borderColors);
-  SkillCardComponent backgroundColor(Color? backgroundColor);
+  SkillCardComponent backgroundColors(MultiColor? backgroundColors);
   SkillCardComponent minSize(Size? minSize);
   SkillCardComponent maxSize(Size? maxSize);
   SkillCardComponent shadow(BoxShadow? shadow);
@@ -29,10 +31,11 @@ abstract class $SkillCardComponentCWProxy {
     TextWrapper? description,
     List<TextWrapper>? skills,
     IconData? leadingIcon,
+    Color? secondaryBackgroundColors,
     double? radius,
     double? padding,
-    List<Color>? borderColors,
+    MultiColor? borderColors,
-    Color? backgroundColor,
+    MultiColor? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,

packages/wyatt_ui_components/lib/src/domain/entities/component.dart

@@ -15,7 +15,11 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:flutter/material.dart';
+import 'package:wyatt_ui_components/src/core/utils/theme_resolver.dart';
 
 abstract class Component extends StatelessWidget {
-  const Component({super.key});
+  const Component({this.themeResolver, super.key});
+
+  /// Theme Resolver for this component
+  final ThemeResolver<dynamic, dynamic, dynamic>? themeResolver;
 }

packages/wyatt_ui_components/lib/src/domain/entities/entities.dart

@@ -14,9 +14,14 @@
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-export './app_bar_component.dart';
+export './bars/bars.dart';
-export './bottom_navigation_bar_component.dart';
+export './buttons/buttons.dart';
 export './cards/cards.dart';
 export './component.dart';
 export './error_widget_component.dart';
+export './loader_component.dart';
+export './loader_style.dart';
 export './loading_widget_component.dart';
+export './rich_text_builder/rich_text_builder.dart';
+export './text_inputs/text_inputs.dart';
+export './theme_style.dart';

packages/wyatt_ui_components/lib/src/domain/entities/loader_component.dart

@@ -0,0 +1,50 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'loader_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class LoaderComponent extends Component
+    with CopyWithMixin<$LoaderComponentCWProxy> {
+  const LoaderComponent({
+    this.colors,
+    this.radius,
+    this.stroke,
+    this.duration,
+    this.flip,
+    super.themeResolver,
+    super.key,
+  });
+
+  /// Gradient colors from start to end.
+  final MultiColor? colors;
+
+  /// Loader radius
+  final double? radius;
+
+  /// Loader stroke width
+  final double? stroke;
+
+  /// Animation duration
+  final Duration? duration;
+  
+  /// Flip the animation
+  final bool? flip;
+}

packages/wyatt_ui_components/lib/src/domain/entities/loader_component.g.dart

@@ -0,0 +1,27 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'loader_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $LoaderComponentCWProxy {
+  LoaderComponent colors(MultiColor? colors);
+  LoaderComponent radius(double? radius);
+  LoaderComponent stroke(double? stroke);
+  LoaderComponent duration(Duration? duration);
+  LoaderComponent flip(bool? flip);
+  LoaderComponent themeResolver(
+      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
+  LoaderComponent key(Key? key);
+  LoaderComponent call({
+    MultiColor? colors,
+    double? radius,
+    double? stroke,
+    Duration? duration,
+    bool? flip,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/loader_style.dart

@@ -0,0 +1,82 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'dart:ui';
+
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+class LoaderStyle extends ThemeStyle<LoaderStyle> {
+  const LoaderStyle({
+    this.colors,
+    this.stroke,
+  });
+
+  /// Merges non-null `b` attributes in `a`
+  static LoaderStyle? merge(
+    LoaderStyle? a,
+    LoaderStyle? b,
+  ) {
+    if (b == null) {
+      return a?.copyWith();
+    }
+    if (a == null) {
+      return b.copyWith();
+    }
+
+    return a.copyWith(
+      colors: b.colors,
+      stroke: b.stroke,
+    );
+  }
+
+  /// Used for interpolation.
+  static LoaderStyle? lerp(
+    LoaderStyle? a,
+    LoaderStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+    // b.copyWith to return b attributes even if they are not lerped
+    return b.copyWith(
+      colors: MultiColor.lerp(a.colors, b.colors, t),
+      stroke: lerpDouble(a.stroke, b.stroke, t),
+    );
+  }
+
+  /// Gradient colors from start to end.
+  final MultiColor? colors;
+
+  /// Loader stroke width
+  final double? stroke;
+
+  @override
+  LoaderStyle? mergeWith(LoaderStyle? other) => LoaderStyle.merge(this, other);
+
+  @override
+  LoaderStyle copyWith({
+    MultiColor? colors,
+    double? stroke,
+  }) =>
+      LoaderStyle(
+        colors: colors ?? this.colors,
+        stroke: stroke ?? this.stroke,
+      );
+
+  @override
+  String toString() => 'LoaderStyle($colors, $stroke)';
+}

packages/wyatt_ui_components/lib/src/domain/entities/rich_text_builder/parser.dart

@@ -0,0 +1,120 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+
+class RichTextStyleParameter {
+  const RichTextStyleParameter(
+    this.defaultStyle,
+    this.definedStyle,
+    this.styleName,
+  );
+
+  final TextStyle? defaultStyle;
+  final Map<String, TextStyle> definedStyle;
+  final String? styleName;
+
+  TextStyle get style {
+    if (definedStyle.containsKey(styleName)) {
+      return definedStyle[styleName]!;
+    }
+    return defaultStyle ?? const TextStyle();
+  }
+
+  RichTextStyleParameter copyWith({
+    TextStyle? defaultStyle,
+    Map<String, TextStyle>? definedStyle,
+    String? styleName,
+  }) =>
+      RichTextStyleParameter(
+        defaultStyle ?? this.defaultStyle,
+        definedStyle ?? this.definedStyle,
+        styleName ?? this.styleName,
+      );
+}
+
+class RichTextNode {
+  RichTextNode(this.nodes);
+
+  final List<RichTextNode> nodes;
+
+  static RichTextNode from(
+    String content,
+    RegExp regex,
+    RichTextStyleParameter styleParameter,
+  ) {
+    final matches = regex.allMatches(content);
+    if (matches.isNotEmpty) {
+      // match found -> construct node with leaf/nodes
+      final List<RichTextNode> nodes = [];
+      for (var i = 0; i < matches.length; i++) {
+        final previousMatch = i > 0 ? matches.elementAt(i - 1) : null;
+        final currentMatch = matches.elementAt(i);
+        // non match before
+        final nonMatchBefore = (previousMatch != null)
+            ? content.substring(previousMatch.end, currentMatch.start)
+            : content.substring(0, currentMatch.start);
+        nodes
+          ..add(RichTextNode.from(nonMatchBefore, regex, styleParameter))
+          // match
+          ..add(
+            RichTextNode.from(
+              currentMatch.group(2)!,
+              regex,
+              styleParameter.copyWith(styleName: currentMatch.group(1)),
+            ),
+          );
+      }
+      // non match after
+      final nonMatchAfter = content.substring(matches.last.end);
+      nodes.add(RichTextNode.from(nonMatchAfter, regex, styleParameter));
+      return RichTextNode(nodes);
+    } else {
+      // match not found -> construct leaf
+      return RichTextLeaf(styleParameter.style, content);
+    }
+  }
+
+  InlineSpan toInlineSpan(RichTextParser parser) {
+    final children = <InlineSpan>[];
+    for (final node in nodes) {
+      children.add(node.toInlineSpan(parser));
+    }
+    return TextSpan(children: children);
+  }
+}
+
+class RichTextLeaf extends RichTextNode {
+  RichTextLeaf(this.style, this.content) : super([]);
+
+  final TextStyle style;
+  final String content;
+
+  @override
+  InlineSpan toInlineSpan(RichTextParser parser) =>
+      parser.nodeBuilder.call(content, style);
+}
+
+class RichTextParser {
+  const RichTextParser({required this.nodeBuilder});
+  factory RichTextParser.defaultBuilder() => RichTextParser(
+        nodeBuilder: (content, style) => TextSpan(
+          text: content,
+          style: style,
+        ),
+      );
+  final InlineSpan Function(String content, TextStyle style) nodeBuilder;
+}

packages/wyatt_ui_components/lib/src/domain/entities/rich_text_builder/rich_text_builder.dart

@@ -0,0 +1,19 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export 'parser.dart';
+export 'rich_text_builder_component.dart';
+export 'rich_text_builder_style.dart';

packages/wyatt_ui_components/lib/src/domain/entities/rich_text_builder/rich_text_builder_component.dart

@@ -0,0 +1,56 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'rich_text_builder_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class RichTextBuilderComponent extends Component
+    with CopyWithMixin<$RichTextBuilderComponentCWProxy> {
+  const RichTextBuilderComponent({
+    this.text,
+    this.parser,
+    this.defaultStyle,
+    this.styles,
+    super.themeResolver,
+    super.key,
+  });
+
+  /// Full text
+  final String? text;
+
+  /// How to build InlineSpans
+  final RichTextParser? parser;
+
+  /// Default TextStyle used in this rich text component.
+  final TextStyle? defaultStyle;
+
+  /// Used styles in this rich text component.
+  /// 
+  /// e.g.
+  /// ```dart
+  /// styles = {'red': TextStyle(color: Colors.red)};
+  /// ```
+  /// will transform:
+  /// ```text
+  /// This text <red>is red</red.
+  /// ```
+  /// in "This text `is red`."
+  final Map<String, TextStyle>? styles;
+}

packages/wyatt_ui_components/lib/src/domain/entities/rich_text_builder/rich_text_builder_component.g.dart

@@ -0,0 +1,25 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'rich_text_builder_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $RichTextBuilderComponentCWProxy {
+  RichTextBuilderComponent text(String? text);
+  RichTextBuilderComponent parser(RichTextParser? parser);
+  RichTextBuilderComponent defaultStyle(TextStyle? defaultStyle);
+  RichTextBuilderComponent styles(Map<String, TextStyle>? styles);
+  RichTextBuilderComponent themeResolver(
+      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
+  RichTextBuilderComponent key(Key? key);
+  RichTextBuilderComponent call({
+    String? text,
+    RichTextParser? parser,
+    TextStyle? defaultStyle,
+    Map<String, TextStyle>? styles,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/rich_text_builder/rich_text_builder_style.dart

@@ -0,0 +1,79 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+class RichTextBuilderStyle extends ThemeStyle<RichTextBuilderStyle> {
+  const RichTextBuilderStyle({
+    this.defaultStyle,
+    this.styles,
+  });
+
+  /// Merges non-null `b` attributes in `a`
+  static RichTextBuilderStyle? merge(
+    RichTextBuilderStyle? a,
+    RichTextBuilderStyle? b,
+  ) {
+    if (b == null) {
+      return a?.copyWith();
+    }
+    if (a == null) {
+      return b.copyWith();
+    }
+
+    return a.copyWith(
+      defaultStyle: b.defaultStyle,
+      styles: b.styles,
+    );
+  }
+
+  /// Used for interpolation.
+  static RichTextBuilderStyle? lerp(
+    RichTextBuilderStyle? a,
+    RichTextBuilderStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+    // b.copyWith to return b attributes even if they are not lerped
+    return b.copyWith(
+      defaultStyle: TextStyle.lerp(a.defaultStyle, b.defaultStyle, t),
+      styles: b.styles, // TODO(wyatt): compute lerp value of each styles
+    );
+  }
+
+  /// Default TextStyle used in this rich text component.
+  final TextStyle? defaultStyle;
+
+  /// Used styles in this rich text component.
+  final Map<String, TextStyle>? styles;
+
+  @override
+  RichTextBuilderStyle? mergeWith(RichTextBuilderStyle? other) =>
+      RichTextBuilderStyle.merge(this, other);
+
+  @override
+  RichTextBuilderStyle? copyWith({
+    TextStyle? defaultStyle,
+    Map<String, TextStyle>? styles,
+  }) =>
+      RichTextBuilderStyle(
+        defaultStyle: defaultStyle ?? this.defaultStyle,
+        styles: styles ?? this.styles,
+      );
+}

packages/wyatt_ui_components/lib/src/domain/entities/text_inputs/text_input_component.dart

@@ -0,0 +1,173 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'dart:ui';
+
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'text_input_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class TextInputComponent extends Component
+    with CopyWithMixin<$TextInputComponentCWProxy> {
+  const TextInputComponent({
+    this.expand,
+    this.onError,
+    this.validator,
+    this.suffixText,
+    this.prefixText,
+    this.prefixIcon,
+    this.suffixIcon,
+    this.label,
+    this.hint,
+    this.normalStyle,
+    this.focusedStyle,
+    this.errorStyle,
+    this.disableStyle,
+    this.controller,
+    this.focusNode,
+    this.keyboardType,
+    this.smartDashesType,
+    this.smartQuotesType,
+    this.enableInteractiveSelection,
+    this.textInputAction,
+    this.textCapitalization,
+    this.style,
+    this.strutStyle,
+    this.textAlign,
+    this.textAlignVertical,
+    this.textDirection,
+    this.readOnly,
+    this.showCursor,
+    this.autofocus,
+    this.obscuringCharacter,
+    this.obscureText,
+    this.autocorrect,
+    this.enableSuggestions,
+    this.maxLines,
+    this.minLines,
+    this.expands,
+    this.maxLength,
+    this.maxLengthEnforcement,
+    this.onChanged,
+    this.onEditingComplete,
+    this.onSubmitted,
+    this.onAppPrivateCommand,
+    this.inputFormatters,
+    this.enabled,
+    this.cursorWidth,
+    this.cursorHeight,
+    this.cursorRadius,
+    this.cursorColor,
+    this.selectionHeightStyle,
+    this.selectionWidthStyle,
+    this.keyboardAppearance,
+    this.scrollPadding,
+    this.dragStartBehavior,
+    this.selectionControls,
+    this.onTap,
+    this.onTapOutside,
+    this.mouseCursor,
+    this.scrollController,
+    this.scrollPhysics,
+    this.autofillHints,
+    this.clipBehavior,
+    this.restorationId,
+    this.scribbleEnabled,
+    this.enableIMEPersonalizedLearning,
+    this.contextMenuBuilder,
+    this.spellCheckConfiguration,
+    this.magnifierConfiguration,
+    super.key,
+  });
+
+  final TextMagnifierConfiguration? magnifierConfiguration;
+  final TextEditingController? controller;
+  final FocusNode? focusNode;
+  final TextInputType? keyboardType;
+  final TextInputAction? textInputAction;
+  final TextCapitalization? textCapitalization;
+  final TextStyle? style;
+  final StrutStyle? strutStyle;
+  final TextAlign? textAlign;
+  final TextAlignVertical? textAlignVertical;
+  final TextDirection? textDirection;
+  final bool? autofocus;
+  final String? obscuringCharacter;
+  final bool? obscureText;
+  final bool? autocorrect;
+  final SmartDashesType? smartDashesType;
+  final SmartQuotesType? smartQuotesType;
+  final bool? enableSuggestions;
+  final int? maxLines;
+  final int? minLines;
+  final bool? expands;
+  final bool? readOnly;
+  final bool? showCursor;
+  final int? maxLength;
+  final MaxLengthEnforcement? maxLengthEnforcement;
+  final ValueChanged<String>? onChanged;
+  final VoidCallback? onEditingComplete;
+  final ValueChanged<String>? onSubmitted;
+  final AppPrivateCommandCallback? onAppPrivateCommand;
+  final List<TextInputFormatter>? inputFormatters;
+  final ValueNotifier<bool>? enabled;
+  final double? cursorWidth;
+  final double? cursorHeight;
+  final Radius? cursorRadius;
+  final Color? cursorColor;
+  final BoxHeightStyle? selectionHeightStyle;
+  final BoxWidthStyle? selectionWidthStyle;
+  final Brightness? keyboardAppearance;
+  final EdgeInsets? scrollPadding;
+  final bool? enableInteractiveSelection;
+  final TextSelectionControls? selectionControls;
+  final DragStartBehavior? dragStartBehavior;
+  final GestureTapCallback? onTap;
+  final TapRegionCallback? onTapOutside;
+  final MouseCursor? mouseCursor;
+  final ScrollPhysics? scrollPhysics;
+  final ScrollController? scrollController;
+  final Iterable<String>? autofillHints;
+  final Clip? clipBehavior;
+  final String? restorationId;
+  final bool? scribbleEnabled;
+  final bool? enableIMEPersonalizedLearning;
+  final EditableTextContextMenuBuilder? contextMenuBuilder;
+  final SpellCheckConfiguration? spellCheckConfiguration;
+
+  final bool Function(String)? validator;
+  final String? Function(String)? onError;
+
+  final TextInputStyle? normalStyle;
+  final TextInputStyle? focusedStyle;
+  final TextInputStyle? errorStyle;
+  final TextInputStyle? disableStyle;
+
+  final bool? expand;
+
+  final TextWrapper? label;
+  final TextWrapper? hint;
+
+  final TextWrapper? prefixText;
+  final TextWrapper? suffixText;
+  final Icon? prefixIcon;
+  final Icon? suffixIcon;
+}

packages/wyatt_ui_components/lib/src/domain/entities/text_inputs/text_input_component.g.dart

@@ -0,0 +1,157 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'text_input_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $TextInputComponentCWProxy {
+  TextInputComponent expand(bool? expand);
+  TextInputComponent onError(String Function(String)? onError);
+  TextInputComponent validator(bool Function(String)? validator);
+  TextInputComponent suffixText(TextWrapper? suffixText);
+  TextInputComponent prefixText(TextWrapper? prefixText);
+  TextInputComponent prefixIcon(Icon? prefixIcon);
+  TextInputComponent suffixIcon(Icon? suffixIcon);
+  TextInputComponent label(TextWrapper? label);
+  TextInputComponent hint(TextWrapper? hint);
+  TextInputComponent normalStyle(TextInputStyle? normalStyle);
+  TextInputComponent focusedStyle(TextInputStyle? focusedStyle);
+  TextInputComponent errorStyle(TextInputStyle? errorStyle);
+  TextInputComponent disableStyle(TextInputStyle? disableStyle);
+  TextInputComponent controller(TextEditingController? controller);
+  TextInputComponent focusNode(FocusNode? focusNode);
+  TextInputComponent keyboardType(TextInputType? keyboardType);
+  TextInputComponent smartDashesType(SmartDashesType? smartDashesType);
+  TextInputComponent smartQuotesType(SmartQuotesType? smartQuotesType);
+  TextInputComponent enableInteractiveSelection(
+      bool? enableInteractiveSelection);
+  TextInputComponent textInputAction(TextInputAction? textInputAction);
+  TextInputComponent textCapitalization(TextCapitalization? textCapitalization);
+  TextInputComponent style(TextStyle? style);
+  TextInputComponent strutStyle(StrutStyle? strutStyle);
+  TextInputComponent textAlign(TextAlign? textAlign);
+  TextInputComponent textAlignVertical(TextAlignVertical? textAlignVertical);
+  TextInputComponent textDirection(TextDirection? textDirection);
+  TextInputComponent readOnly(bool? readOnly);
+  TextInputComponent showCursor(bool? showCursor);
+  TextInputComponent autofocus(bool? autofocus);
+  TextInputComponent obscuringCharacter(String? obscuringCharacter);
+  TextInputComponent obscureText(bool? obscureText);
+  TextInputComponent autocorrect(bool? autocorrect);
+  TextInputComponent enableSuggestions(bool? enableSuggestions);
+  TextInputComponent maxLines(int? maxLines);
+  TextInputComponent minLines(int? minLines);
+  TextInputComponent expands(bool? expands);
+  TextInputComponent maxLength(int? maxLength);
+  TextInputComponent maxLengthEnforcement(
+      MaxLengthEnforcement? maxLengthEnforcement);
+  TextInputComponent onChanged(void Function(String)? onChanged);
+  TextInputComponent onEditingComplete(void Function()? onEditingComplete);
+  TextInputComponent onSubmitted(void Function(String)? onSubmitted);
+  TextInputComponent onAppPrivateCommand(
+      void Function(String, Map<String, dynamic>)? onAppPrivateCommand);
+  TextInputComponent inputFormatters(List<TextInputFormatter>? inputFormatters);
+  TextInputComponent enabled(ValueNotifier<bool>? enabled);
+  TextInputComponent cursorWidth(double? cursorWidth);
+  TextInputComponent cursorHeight(double? cursorHeight);
+  TextInputComponent cursorRadius(Radius? cursorRadius);
+  TextInputComponent cursorColor(Color? cursorColor);
+  TextInputComponent selectionHeightStyle(BoxHeightStyle? selectionHeightStyle);
+  TextInputComponent selectionWidthStyle(BoxWidthStyle? selectionWidthStyle);
+  TextInputComponent keyboardAppearance(Brightness? keyboardAppearance);
+  TextInputComponent scrollPadding(EdgeInsets? scrollPadding);
+  TextInputComponent dragStartBehavior(DragStartBehavior? dragStartBehavior);
+  TextInputComponent selectionControls(
+      TextSelectionControls? selectionControls);
+  TextInputComponent onTap(void Function()? onTap);
+  TextInputComponent onTapOutside(
+      void Function(PointerDownEvent)? onTapOutside);
+  TextInputComponent mouseCursor(MouseCursor? mouseCursor);
+  TextInputComponent scrollController(ScrollController? scrollController);
+  TextInputComponent scrollPhysics(ScrollPhysics? scrollPhysics);
+  TextInputComponent autofillHints(Iterable<String>? autofillHints);
+  TextInputComponent clipBehavior(Clip? clipBehavior);
+  TextInputComponent restorationId(String? restorationId);
+  TextInputComponent scribbleEnabled(bool? scribbleEnabled);
+  TextInputComponent enableIMEPersonalizedLearning(
+      bool? enableIMEPersonalizedLearning);
+  TextInputComponent contextMenuBuilder(
+      Widget Function(BuildContext, EditableTextState)? contextMenuBuilder);
+  TextInputComponent spellCheckConfiguration(
+      SpellCheckConfiguration? spellCheckConfiguration);
+  TextInputComponent magnifierConfiguration(
+      TextMagnifierConfiguration? magnifierConfiguration);
+  TextInputComponent key(Key? key);
+  TextInputComponent call({
+    bool? expand,
+    String Function(String)? onError,
+    bool Function(String)? validator,
+    TextWrapper? suffixText,
+    TextWrapper? prefixText,
+    Icon? prefixIcon,
+    Icon? suffixIcon,
+    TextWrapper? label,
+    TextWrapper? hint,
+    TextInputStyle? normalStyle,
+    TextInputStyle? focusedStyle,
+    TextInputStyle? errorStyle,
+    TextInputStyle? disableStyle,
+    TextEditingController? controller,
+    FocusNode? focusNode,
+    TextInputType? keyboardType,
+    SmartDashesType? smartDashesType,
+    SmartQuotesType? smartQuotesType,
+    bool? enableInteractiveSelection,
+    TextInputAction? textInputAction,
+    TextCapitalization? textCapitalization,
+    TextStyle? style,
+    StrutStyle? strutStyle,
+    TextAlign? textAlign,
+    TextAlignVertical? textAlignVertical,
+    TextDirection? textDirection,
+    bool? readOnly,
+    bool? showCursor,
+    bool? autofocus,
+    String? obscuringCharacter,
+    bool? obscureText,
+    bool? autocorrect,
+    bool? enableSuggestions,
+    int? maxLines,
+    int? minLines,
+    bool? expands,
+    int? maxLength,
+    MaxLengthEnforcement? maxLengthEnforcement,
+    void Function(String)? onChanged,
+    void Function()? onEditingComplete,
+    void Function(String)? onSubmitted,
+    void Function(String, Map<String, dynamic>)? onAppPrivateCommand,
+    List<TextInputFormatter>? inputFormatters,
+    ValueNotifier<bool>? enabled,
+    double? cursorWidth,
+    double? cursorHeight,
+    Radius? cursorRadius,
+    Color? cursorColor,
+    BoxHeightStyle? selectionHeightStyle,
+    BoxWidthStyle? selectionWidthStyle,
+    Brightness? keyboardAppearance,
+    EdgeInsets? scrollPadding,
+    DragStartBehavior? dragStartBehavior,
+    TextSelectionControls? selectionControls,
+    void Function()? onTap,
+    void Function(PointerDownEvent)? onTapOutside,
+    MouseCursor? mouseCursor,
+    ScrollController? scrollController,
+    ScrollPhysics? scrollPhysics,
+    Iterable<String>? autofillHints,
+    Clip? clipBehavior,
+    String? restorationId,
+    bool? scribbleEnabled,
+    bool? enableIMEPersonalizedLearning,
+    Widget Function(BuildContext, EditableTextState)? contextMenuBuilder,
+    SpellCheckConfiguration? spellCheckConfiguration,
+    TextMagnifierConfiguration? magnifierConfiguration,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/text_inputs/text_input_style.dart

@@ -0,0 +1,133 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+class TextInputStyle extends ThemeStyle<TextInputStyle> {
+  TextInputStyle({
+    this.labelStyle,
+    this.hintStyle,
+    this.backgroundColors,
+    this.borderColors,
+    this.boxShadow,
+    this.radius,
+    this.inputStyle,
+    this.iconColor,
+    this.prefixStyle,
+    this.prefixIconColor,
+    this.suffixStyle,
+    this.suffixIconColor,
+  });
+
+  final TextStyle? labelStyle;
+  final TextStyle? hintStyle;
+
+  final Color? iconColor;
+  final TextStyle? prefixStyle;
+  final Color? prefixIconColor;
+  final TextStyle? suffixStyle;
+  final Color? suffixIconColor;
+
+  final MultiColor? backgroundColors;
+  final Color? borderColors;
+  final BoxShadow? boxShadow;
+  final BorderRadiusGeometry? radius;
+  final TextStyle? inputStyle;
+
+  static TextInputStyle? merge(TextInputStyle? a, TextInputStyle? b) {
+    if (b == null) {
+      return a?.copyWith();
+    }
+    if (a == null) {
+      return b.copyWith();
+    }
+    return a.copyWith(
+      labelStyle: b.labelStyle,
+      hintStyle: b.hintStyle,
+      backgroundColors: b.backgroundColors,
+      borderColors: b.borderColors,
+      boxShadow: b.boxShadow,
+      radius: b.radius,
+      inputStyle: b.inputStyle,
+      iconColor: b.iconColor,
+      prefixStyle: b.prefixStyle,
+      prefixIconColor: b.prefixIconColor,
+      suffixIconColor: b.suffixIconColor,
+      suffixStyle: b.suffixStyle,
+    );
+  }
+
+  static TextInputStyle? lerp(
+    TextInputStyle? a,
+    TextInputStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+
+    return b.copyWith(
+      labelStyle: TextStyle.lerp(a.labelStyle, b.labelStyle, t),
+      hintStyle: TextStyle.lerp(a.hintStyle, b.hintStyle, t),
+      backgroundColors:
+          MultiColor.lerp(a.backgroundColors, b.backgroundColors, t),
+      radius: BorderRadiusGeometry.lerp(a.radius, b.radius, t),
+      borderColors: Color.lerp(a.borderColors, b.borderColors, t),
+      boxShadow: BoxShadow.lerp(a.boxShadow, b.boxShadow, t),
+      inputStyle: TextStyle.lerp(a.inputStyle, b.inputStyle, t),
+      prefixStyle: TextStyle.lerp(a.prefixStyle, b.prefixStyle, t),
+      suffixStyle: TextStyle.lerp(a.suffixStyle, b.suffixStyle, t),
+      prefixIconColor: Color.lerp(a.prefixIconColor, b.prefixIconColor, t),
+      suffixIconColor: Color.lerp(a.suffixIconColor, b.suffixIconColor, t),
+      iconColor: Color.lerp(a.iconColor, b.iconColor, t),
+    );
+  }
+
+  @override
+  TextInputStyle? mergeWith(TextInputStyle? other) =>
+      TextInputStyle.merge(this, other);
+
+  @override
+  TextInputStyle copyWith({
+    TextStyle? labelStyle,
+    TextStyle? hintStyle,
+    MultiColor? backgroundColors,
+    Color? borderColors,
+    BoxShadow? boxShadow,
+    BorderRadiusGeometry? radius,
+    TextStyle? inputStyle,
+    Color? iconColor,
+    TextStyle? prefixStyle,
+    Color? prefixIconColor,
+    TextStyle? suffixStyle,
+    Color? suffixIconColor,
+  }) =>
+      TextInputStyle(
+        labelStyle: labelStyle ?? this.labelStyle,
+        hintStyle: hintStyle ?? this.hintStyle,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        radius: radius ?? this.radius,
+        borderColors: borderColors ?? this.borderColors,
+        boxShadow: boxShadow ?? this.boxShadow,
+        inputStyle: inputStyle ?? this.inputStyle,
+        prefixStyle: prefixStyle ?? this.prefixStyle,
+        suffixStyle: suffixStyle ?? this.suffixStyle,
+        prefixIconColor: prefixIconColor ?? this.prefixIconColor,
+        suffixIconColor: suffixIconColor ?? this.suffixIconColor,
+        iconColor: iconColor ?? this.iconColor,
+      );
+}

packages/wyatt_ui_components/lib/src/domain/entities/text_inputs/text_inputs.dart

@@ -0,0 +1,18 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export './text_input_component.dart';
+export './text_input_style.dart';

packages/wyatt_ui_components/lib/src/domain/entities/theme_style.dart

@@ -0,0 +1,25 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+abstract class ThemeStyle<T> {
+  const ThemeStyle();
+
+  /// Merges non-null `other` attributes in `this` and returns a copy.
+  T? mergeWith(T? other);
+
+  /// Copy with (mandatory for mergeWith, needs to be simple and ignore `null`)
+  T? copyWith();
+}

packages/wyatt_ui_components/lib/src/features/component_theme_data.dart

@@ -14,18 +14,88 @@
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
+import 'package:copy_with_extension/copy_with_extension.dart';
 import 'package:wyatt_ui_components/src/domain/entities/entities.dart';
+part 'component_theme_data.g.dart';
 
+@CopyWith()
 class ComponentThemeData {
+  factory ComponentThemeData({
+    TopAppBarComponent? appBar,
+    TopNavigationBarComponent? topNavigationBarComponent,
+    BottomNavigationBarComponent? bottomNavigationBar,
+    ErrorWidgetComponent? errorWidget,
+    LoadingWidgetComponent? loadingWidget,
+    LoaderComponent? loaderComponent,
+    RichTextBuilderComponent? richTextBuilderComponent,
+    TextInputComponent? textInputComponent,
+    FileSelectionButtonComponent? fileSelectionButtonComponent,
+    FlatButtonComponent? flatButtonComponent,
+    SimpleIconButtonComponent? simpleIconButtonComponent,
+    SymbolButtonComponent? symbolButtonComponent,
+    InformationCardComponent? informationCardComponent,
+    PortfolioCardComponent? portfolioCardComponent,
+    QuoteCardComponent? quoteCardComponent,
+    SkillCardComponent? skillCardComponent,
+  }) =>
+      ComponentThemeData.raw(
+        appBar: appBar,
+        topNavigationBarComponent: topNavigationBarComponent,
+        bottomNavigationBar: bottomNavigationBar,
+        errorWidget: errorWidget,
+        loadingWidget: loadingWidget,
+        loaderComponent: loaderComponent,
+        richTextBuilderComponent: richTextBuilderComponent,
+        textInputComponent: textInputComponent,
+        fileSelectionButtonComponent: fileSelectionButtonComponent,
+        flatButtonComponent: flatButtonComponent,
+        simpleIconButtonComponent: simpleIconButtonComponent,
+        symbolButtonComponent: symbolButtonComponent,
+        informationCardComponent: informationCardComponent,
+        portfolioCardComponent: portfolioCardComponent,
+        quoteCardComponent: quoteCardComponent,
+        skillCardComponent: skillCardComponent,
+      );
 
   const ComponentThemeData.raw({
     this.appBar,
+    this.topNavigationBarComponent,
     this.bottomNavigationBar,
     this.errorWidget,
     this.loadingWidget,
+    this.loaderComponent,
+    this.richTextBuilderComponent,
+    this.textInputComponent,
+    this.fileSelectionButtonComponent,
+    this.flatButtonComponent,
+    this.simpleIconButtonComponent,
+    this.symbolButtonComponent,
+    this.informationCardComponent,
+    this.portfolioCardComponent,
+    this.quoteCardComponent,
+    this.skillCardComponent,
   });
-  final AppBarComponent? appBar;
+
+  final TopAppBarComponent? appBar;
+
+  final TopNavigationBarComponent? topNavigationBarComponent;
   final BottomNavigationBarComponent? bottomNavigationBar;
   final ErrorWidgetComponent? errorWidget;
   final LoadingWidgetComponent? loadingWidget;
+  final LoaderComponent? loaderComponent;
+
+  final RichTextBuilderComponent? richTextBuilderComponent;
+  final TextInputComponent? textInputComponent;
+
+  // Buttons
+  final FileSelectionButtonComponent? fileSelectionButtonComponent;
+  final FlatButtonComponent? flatButtonComponent;
+  final SimpleIconButtonComponent? simpleIconButtonComponent;
+  final SymbolButtonComponent? symbolButtonComponent;
+
+  // Cards
+  final InformationCardComponent? informationCardComponent;
+  final PortfolioCardComponent? portfolioCardComponent;
+  final QuoteCardComponent? quoteCardComponent;
+  final SkillCardComponent? skillCardComponent;
 }

packages/wyatt_ui_components/lib/src/features/component_theme_data.g.dart

@@ -0,0 +1,265 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'component_theme_data.dart';
+
+// **************************************************************************
+// CopyWithGenerator
+// **************************************************************************
+
+abstract class _$ComponentThemeDataCWProxy {
+  ComponentThemeData appBar(TopAppBarComponent? appBar);
+
+  ComponentThemeData topNavigationBarComponent(
+      TopNavigationBarComponent? topNavigationBarComponent);
+
+  ComponentThemeData bottomNavigationBar(
+      BottomNavigationBarComponent? bottomNavigationBar);
+
+  ComponentThemeData errorWidget(ErrorWidgetComponent? errorWidget);
+
+  ComponentThemeData loadingWidget(LoadingWidgetComponent? loadingWidget);
+
+  ComponentThemeData loaderComponent(LoaderComponent? loaderComponent);
+
+  ComponentThemeData richTextBuilderComponent(
+      RichTextBuilderComponent? richTextBuilderComponent);
+
+  ComponentThemeData textInputComponent(TextInputComponent? textInputComponent);
+
+  ComponentThemeData fileSelectionButtonComponent(
+      FileSelectionButtonComponent? fileSelectionButtonComponent);
+
+  ComponentThemeData flatButtonComponent(
+      FlatButtonComponent? flatButtonComponent);
+
+  ComponentThemeData simpleIconButtonComponent(
+      SimpleIconButtonComponent? simpleIconButtonComponent);
+
+  ComponentThemeData symbolButtonComponent(
+      SymbolButtonComponent? symbolButtonComponent);
+
+  ComponentThemeData informationCardComponent(
+      InformationCardComponent? informationCardComponent);
+
+  ComponentThemeData portfolioCardComponent(
+      PortfolioCardComponent? portfolioCardComponent);
+
+  ComponentThemeData quoteCardComponent(QuoteCardComponent? quoteCardComponent);
+
+  ComponentThemeData skillCardComponent(SkillCardComponent? skillCardComponent);
+
+  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `ComponentThemeData(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
+  ///
+  /// Usage
+  /// ```dart
+  /// ComponentThemeData(...).copyWith(id: 12, name: "My name")
+  /// ````
+  ComponentThemeData call({
+    TopAppBarComponent? appBar,
+    TopNavigationBarComponent? topNavigationBarComponent,
+    BottomNavigationBarComponent? bottomNavigationBar,
+    ErrorWidgetComponent? errorWidget,
+    LoadingWidgetComponent? loadingWidget,
+    LoaderComponent? loaderComponent,
+    RichTextBuilderComponent? richTextBuilderComponent,
+    TextInputComponent? textInputComponent,
+    FileSelectionButtonComponent? fileSelectionButtonComponent,
+    FlatButtonComponent? flatButtonComponent,
+    SimpleIconButtonComponent? simpleIconButtonComponent,
+    SymbolButtonComponent? symbolButtonComponent,
+    InformationCardComponent? informationCardComponent,
+    PortfolioCardComponent? portfolioCardComponent,
+    QuoteCardComponent? quoteCardComponent,
+    SkillCardComponent? skillCardComponent,
+  });
+}
+
+/// Proxy class for `copyWith` functionality. This is a callable class and can be used as follows: `instanceOfComponentThemeData.copyWith(...)`. Additionally contains functions for specific fields e.g. `instanceOfComponentThemeData.copyWith.fieldName(...)`
+class _$ComponentThemeDataCWProxyImpl implements _$ComponentThemeDataCWProxy {
+  const _$ComponentThemeDataCWProxyImpl(this._value);
+
+  final ComponentThemeData _value;
+
+  @override
+  ComponentThemeData appBar(TopAppBarComponent? appBar) => this(appBar: appBar);
+
+  @override
+  ComponentThemeData topNavigationBarComponent(
+          TopNavigationBarComponent? topNavigationBarComponent) =>
+      this(topNavigationBarComponent: topNavigationBarComponent);
+
+  @override
+  ComponentThemeData bottomNavigationBar(
+          BottomNavigationBarComponent? bottomNavigationBar) =>
+      this(bottomNavigationBar: bottomNavigationBar);
+
+  @override
+  ComponentThemeData errorWidget(ErrorWidgetComponent? errorWidget) =>
+      this(errorWidget: errorWidget);
+
+  @override
+  ComponentThemeData loadingWidget(LoadingWidgetComponent? loadingWidget) =>
+      this(loadingWidget: loadingWidget);
+
+  @override
+  ComponentThemeData loaderComponent(LoaderComponent? loaderComponent) =>
+      this(loaderComponent: loaderComponent);
+
+  @override
+  ComponentThemeData richTextBuilderComponent(
+          RichTextBuilderComponent? richTextBuilderComponent) =>
+      this(richTextBuilderComponent: richTextBuilderComponent);
+
+  @override
+  ComponentThemeData textInputComponent(
+          TextInputComponent? textInputComponent) =>
+      this(textInputComponent: textInputComponent);
+
+  @override
+  ComponentThemeData fileSelectionButtonComponent(
+          FileSelectionButtonComponent? fileSelectionButtonComponent) =>
+      this(fileSelectionButtonComponent: fileSelectionButtonComponent);
+
+  @override
+  ComponentThemeData flatButtonComponent(
+          FlatButtonComponent? flatButtonComponent) =>
+      this(flatButtonComponent: flatButtonComponent);
+
+  @override
+  ComponentThemeData simpleIconButtonComponent(
+          SimpleIconButtonComponent? simpleIconButtonComponent) =>
+      this(simpleIconButtonComponent: simpleIconButtonComponent);
+
+  @override
+  ComponentThemeData symbolButtonComponent(
+          SymbolButtonComponent? symbolButtonComponent) =>
+      this(symbolButtonComponent: symbolButtonComponent);
+
+  @override
+  ComponentThemeData informationCardComponent(
+          InformationCardComponent? informationCardComponent) =>
+      this(informationCardComponent: informationCardComponent);
+
+  @override
+  ComponentThemeData portfolioCardComponent(
+          PortfolioCardComponent? portfolioCardComponent) =>
+      this(portfolioCardComponent: portfolioCardComponent);
+
+  @override
+  ComponentThemeData quoteCardComponent(
+          QuoteCardComponent? quoteCardComponent) =>
+      this(quoteCardComponent: quoteCardComponent);
+
+  @override
+  ComponentThemeData skillCardComponent(
+          SkillCardComponent? skillCardComponent) =>
+      this(skillCardComponent: skillCardComponent);
+
+  @override
+
+  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `ComponentThemeData(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
+  ///
+  /// Usage
+  /// ```dart
+  /// ComponentThemeData(...).copyWith(id: 12, name: "My name")
+  /// ````
+  ComponentThemeData call({
+    Object? appBar = const $CopyWithPlaceholder(),
+    Object? topNavigationBarComponent = const $CopyWithPlaceholder(),
+    Object? bottomNavigationBar = const $CopyWithPlaceholder(),
+    Object? errorWidget = const $CopyWithPlaceholder(),
+    Object? loadingWidget = const $CopyWithPlaceholder(),
+    Object? loaderComponent = const $CopyWithPlaceholder(),
+    Object? richTextBuilderComponent = const $CopyWithPlaceholder(),
+    Object? textInputComponent = const $CopyWithPlaceholder(),
+    Object? fileSelectionButtonComponent = const $CopyWithPlaceholder(),
+    Object? flatButtonComponent = const $CopyWithPlaceholder(),
+    Object? simpleIconButtonComponent = const $CopyWithPlaceholder(),
+    Object? symbolButtonComponent = const $CopyWithPlaceholder(),
+    Object? informationCardComponent = const $CopyWithPlaceholder(),
+    Object? portfolioCardComponent = const $CopyWithPlaceholder(),
+    Object? quoteCardComponent = const $CopyWithPlaceholder(),
+    Object? skillCardComponent = const $CopyWithPlaceholder(),
+  }) {
+    return ComponentThemeData(
+      appBar: appBar == const $CopyWithPlaceholder()
+          ? _value.appBar
+          // ignore: cast_nullable_to_non_nullable
+          : appBar as TopAppBarComponent?,
+      topNavigationBarComponent:
+          topNavigationBarComponent == const $CopyWithPlaceholder()
+              ? _value.topNavigationBarComponent
+              // ignore: cast_nullable_to_non_nullable
+              : topNavigationBarComponent as TopNavigationBarComponent?,
+      bottomNavigationBar: bottomNavigationBar == const $CopyWithPlaceholder()
+          ? _value.bottomNavigationBar
+          // ignore: cast_nullable_to_non_nullable
+          : bottomNavigationBar as BottomNavigationBarComponent?,
+      errorWidget: errorWidget == const $CopyWithPlaceholder()
+          ? _value.errorWidget
+          // ignore: cast_nullable_to_non_nullable
+          : errorWidget as ErrorWidgetComponent?,
+      loadingWidget: loadingWidget == const $CopyWithPlaceholder()
+          ? _value.loadingWidget
+          // ignore: cast_nullable_to_non_nullable
+          : loadingWidget as LoadingWidgetComponent?,
+      loaderComponent: loaderComponent == const $CopyWithPlaceholder()
+          ? _value.loaderComponent
+          // ignore: cast_nullable_to_non_nullable
+          : loaderComponent as LoaderComponent?,
+      richTextBuilderComponent:
+          richTextBuilderComponent == const $CopyWithPlaceholder()
+              ? _value.richTextBuilderComponent
+              // ignore: cast_nullable_to_non_nullable
+              : richTextBuilderComponent as RichTextBuilderComponent?,
+      textInputComponent: textInputComponent == const $CopyWithPlaceholder()
+          ? _value.textInputComponent
+          // ignore: cast_nullable_to_non_nullable
+          : textInputComponent as TextInputComponent?,
+      fileSelectionButtonComponent:
+          fileSelectionButtonComponent == const $CopyWithPlaceholder()
+              ? _value.fileSelectionButtonComponent
+              // ignore: cast_nullable_to_non_nullable
+              : fileSelectionButtonComponent as FileSelectionButtonComponent?,
+      flatButtonComponent: flatButtonComponent == const $CopyWithPlaceholder()
+          ? _value.flatButtonComponent
+          // ignore: cast_nullable_to_non_nullable
+          : flatButtonComponent as FlatButtonComponent?,
+      simpleIconButtonComponent:
+          simpleIconButtonComponent == const $CopyWithPlaceholder()
+              ? _value.simpleIconButtonComponent
+              // ignore: cast_nullable_to_non_nullable
+              : simpleIconButtonComponent as SimpleIconButtonComponent?,
+      symbolButtonComponent:
+          symbolButtonComponent == const $CopyWithPlaceholder()
+              ? _value.symbolButtonComponent
+              // ignore: cast_nullable_to_non_nullable
+              : symbolButtonComponent as SymbolButtonComponent?,
+      informationCardComponent:
+          informationCardComponent == const $CopyWithPlaceholder()
+              ? _value.informationCardComponent
+              // ignore: cast_nullable_to_non_nullable
+              : informationCardComponent as InformationCardComponent?,
+      portfolioCardComponent:
+          portfolioCardComponent == const $CopyWithPlaceholder()
+              ? _value.portfolioCardComponent
+              // ignore: cast_nullable_to_non_nullable
+              : portfolioCardComponent as PortfolioCardComponent?,
+      quoteCardComponent: quoteCardComponent == const $CopyWithPlaceholder()
+          ? _value.quoteCardComponent
+          // ignore: cast_nullable_to_non_nullable
+          : quoteCardComponent as QuoteCardComponent?,
+      skillCardComponent: skillCardComponent == const $CopyWithPlaceholder()
+          ? _value.skillCardComponent
+          // ignore: cast_nullable_to_non_nullable
+          : skillCardComponent as SkillCardComponent?,
+    );
+  }
+}
+
+extension $ComponentThemeDataCopyWith on ComponentThemeData {
+  /// Returns a callable class that can be used as follows: `instanceOfComponentThemeData.copyWith(...)` or like so:`instanceOfComponentThemeData.copyWith.fieldName(...)`.
+  // ignore: library_private_types_in_public_api
+  _$ComponentThemeDataCWProxy get copyWith =>
+      _$ComponentThemeDataCWProxyImpl(this);
+}

packages/wyatt_ui_components/pubspec.yaml

@@ -9,25 +9,22 @@ environment:
   sdk: ">=2.17.0 <3.0.0"
 
 dependencies:
-  flutter:
+  flutter: { sdk: flutter }
-    sdk: flutter
+  copy_with_extension: ^5.0.0
   wyatt_component_copy_with_extension:
     git:
       url: ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-packages.git
       path: packages/wyatt_component_copy_with_extension
 
 dev_dependencies:
-  flutter_test:
+  flutter_test: { sdk: flutter }
-    sdk: flutter
+  wyatt_analysis:
+    hosted: https://git.wyatt-studio.fr/api/packages/Wyatt-FOSS/pub
+    version: ^2.4.0
 
   build_runner: ^2.3.3
+  copy_with_extension_gen: ^5.0.0
   wyatt_component_copy_with_gen:
     git:
       url: ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-packages.git
       path: packages/wyatt_component_copy_with_gen
-
-  wyatt_analysis:
-    git:
-      url: https://git.wyatt-studio.fr/Wyatt-FOSS/wyatt-packages
-      ref: wyatt_analysis-v2.4.0
-      path: packages/wyatt_analysis

packages/wyatt_ui_kit/README.md

@@ -25,6 +25,25 @@
 
 UIKit and Design System used in Wyatt Studio.
 
+## Theme negotiation
+
+When building a component, most of its attributes can be 'null'.
+The `build()` method then starts to negotiate the theme in the tree to obtain the most consistent style possible.
+
+Explanation:
+
+When you build a component `Button({double? radius})`.
+You have several possibilities:
+1) Pass the "radius" into the constructor, `Button(radius: 12)`.
+2) Set up a theme extension `ButtonThemeExtension(radius: 15)`.
+3) Let `wyatt_ui_kit` "negotiate" and try to find a suitable style in the flutter theme. 
+
+If this negotiation phase fails, then: 
+- If the value is mandatory: a hardcoded value in "wyatt_ui_kit" is chosen.
+- If not, the style is simply not applied.
+
+If, for example, you don't use option 1, then the radius will be 15. If you use neither option 1 nor option 2 then the radius will be 4 as this is the [official Material Design value](https://m2.material.io/design/shape/about-shape.html#shape-customization-tool).
+
 ## Features
 
 TODO: List what your package can do. Maybe include images, gifs, or videos.

packages/wyatt_ui_kit/build.yaml

@@ -0,0 +1,8 @@
+targets:
+  $default:
+    builders:
+      # Typically the builder key is just the package name, run `pub run build_runner doctor` to check your config.
+      wyatt_component_copy_with_gen:component_copy_with_gen:
+        generate_for:
+          # Example glob for only the Dart files under `lib/models`
+          - lib/**/*.dart

packages/wyatt_ui_kit/example/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "studio-landpage"
+  }
+}

packages/wyatt_ui_kit/example/.gitignore

@@ -32,6 +32,9 @@ migrate_working_dir/
 .pub/
 /build/
 
+# Firebase
+.firebase/
+
 # Symbolication related
 app.*.symbols
 

packages/wyatt_ui_kit/example/README.md

@@ -1,16 +1,9 @@
-# example
+# Wyatt UIKIt Example
 
-A new Flutter project.
+You can force the launch page. (For debug purposes).
 
-## Getting Started
+```shell
+flutter run -d macos --dart-define PAGE=1 --dart-define THEME=1
+```
 
-This project is a starting point for a Flutter application.
+> This will forces `Buttons` page with `Studio` theme
-
-A few resources to get you started if this is your first Flutter project:
-
-- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
-
-For help getting started with Flutter development, view the
-[online documentation](https://docs.flutter.dev/), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.