feat: [MDS-379] Finalize the MoonTag

example/lib/src/storybook/stories/tag.dart

@@ -0,0 +1,103 @@
+import 'package:example/src/storybook/common/options.dart';
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class TagStory extends Story {
+  TagStory()
+      : super(
+          name: "Tags",
+          builder: (context) {
+            final customLabelTextKnob = context.knobs.text(
+              label: "Custom label text",
+              initial: "MoonTag",
+            );
+
+            final colorsKnob = context.knobs.options(
+              label: "backgroundColor",
+              description: "MoonColors variants for tag.",
+              initial: 5, // bulma
+              options: colorOptions,
+            );
+
+            final color = colorTable(context)[colorsKnob];
+
+            final borderRadiusKnob = context.knobs.sliderInt(
+              max: 12,
+              initial: 4,
+              label: "borderRadius",
+              description: "Border radius for tag.",
+            );
+
+            final tagSizesKnob = context.knobs.options(
+              label: "tagSize",
+              description: "Tag size variants.",
+              initial: MoonTagSize.xs,
+              options: const [
+                Option(label: "x2s", value: MoonTagSize.x2s),
+                Option(label: "xs", value: MoonTagSize.xs),
+              ],
+            );
+
+            final setRtlModeKnob = context.knobs.boolean(
+              label: "RTL mode",
+              description: "Switch between LTR and RTL modes.",
+            );
+
+            final setUpperCase = context.knobs.boolean(
+              label: "isUpperCase",
+              description: "Sets the text style of the tag to upper case.",
+            );
+
+            final showLeftIconKnob = context.knobs.boolean(
+              label: "Show leftIcon",
+              description: "Show widget in the leftIcon slot.",
+            );
+
+            final showLabelKnob = context.knobs.boolean(
+              label: "Show label",
+              description: "Show widget in the label slot.",
+              initial: true,
+            );
+
+            final showRightIconKnob = context.knobs
+                .boolean(label: "Show rightIcon", description: "Show widget in the rightIcon slot.", initial: true);
+
+            final effectiveIconSize = tagSizesKnob == MoonTagSize.x2s ? 12.0 : 16.0;
+
+            return Directionality(
+              textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
+              child: Center(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    const SizedBox(height: 64),
+                    MoonTag(
+                      borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
+                      tagSize: tagSizesKnob,
+                      isUpperCase: setUpperCase,
+                      backgroundColor: color,
+                      leftIcon: showLeftIconKnob
+                          ? MoonPlaceholderIcon(
+                              height: effectiveIconSize,
+                              width: effectiveIconSize,
+                            )
+                          : null,
+                      label: showLabelKnob
+                          ? Text(setUpperCase ? customLabelTextKnob.toUpperCase() : customLabelTextKnob)
+                          : null,
+                      rightIcon: showRightIconKnob
+                          ? MoonPlaceholderIcon(
+                              height: effectiveIconSize,
+                              width: effectiveIconSize,
+                            )
+                          : null,
+                    ),
+                    const SizedBox(height: 64),
+                  ],
+                ),
+              ),
+            );
+          },
+        );
+}

example/lib/src/storybook/storybook.dart

@@ -1,6 +1,7 @@
 import 'package:example/src/storybook/common/widgets/version.dart';
 import 'package:example/src/storybook/stories/avatar.dart';
 import 'package:example/src/storybook/stories/button.dart';
+import 'package:example/src/storybook/stories/tag.dart';
 import 'package:flutter/material.dart';
 
 import 'package:moon_design/moon_design.dart';
@@ -58,6 +59,7 @@ class StorybookPage extends StatelessWidget {
           stories: [
             AvatarStory(),
             ButtonStory(),
+            TagStory(),
           ],
         ),
         const Align(

lib/moon_design.dart

@@ -1,8 +1,10 @@
 library moon_design;
 
+export 'package:moon_design/src/theme/avatar/avatar_sizes.dart';
+export 'package:moon_design/src/theme/avatar/avatar_theme.dart';
 export 'package:moon_design/src/theme/borders.dart';
-export 'package:moon_design/src/theme/button_sizes.dart';
-export 'package:moon_design/src/theme/button_theme.dart';
+export 'package:moon_design/src/theme/button/button_sizes.dart';
+export 'package:moon_design/src/theme/button/button_theme.dart';
 export 'package:moon_design/src/theme/colors.dart';
 export 'package:moon_design/src/theme/effects/controls_effects.dart';
 export 'package:moon_design/src/theme/effects/effects.dart';
@@ -11,9 +13,9 @@ export 'package:moon_design/src/theme/effects/hover_effects.dart';
 export 'package:moon_design/src/theme/opacity.dart';
 export 'package:moon_design/src/theme/shadows.dart';
 export 'package:moon_design/src/theme/sizes.dart';
-export 'package:moon_design/src/theme/text_styles.dart';
 export 'package:moon_design/src/theme/theme.dart';
-export 'package:moon_design/src/theme/typography.dart';
+export 'package:moon_design/src/theme/typography/text_styles.dart';
+export 'package:moon_design/src/theme/typography/typography.dart';
 export 'package:moon_design/src/utils/extensions.dart';
 export 'package:moon_design/src/utils/measure_size.dart';
 export 'package:moon_design/src/utils/moon_icon.dart';
@@ -28,3 +30,4 @@ export 'package:moon_design/src/widgets/buttons/secondary_button.dart';
 export 'package:moon_design/src/widgets/buttons/tertiary_button.dart';
 export 'package:moon_design/src/widgets/effects/focus_effect.dart';
 export 'package:moon_design/src/widgets/effects/pulse_effect.dart';
+export 'package:moon_design/src/widgets/tag/tag.dart';

lib/src/theme/avatar_sizes.dart → lib/src/theme/avatar/avatar_sizes.dart

@@ -5,7 +5,7 @@ import 'package:flutter/material.dart';
 
 import 'package:moon_design/src/theme/borders.dart';
 import 'package:moon_design/src/theme/sizes.dart';
-import 'package:moon_design/src/theme/text_styles.dart';
+import 'package:moon_design/src/theme/typography/text_styles.dart';
 
 @immutable
 class MoonAvatarSizes extends ThemeExtension<MoonAvatarSizes> with DiagnosticableTreeMixin {

lib/src/theme/avatar_theme.dart → lib/src/theme/avatar/avatar_theme.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
-import 'package:moon_design/src/theme/avatar_sizes.dart';
+import 'package:moon_design/src/theme/avatar/avatar_sizes.dart';
 
 @immutable
 class MoonAvatarTheme extends ThemeExtension<MoonAvatarTheme> with DiagnosticableTreeMixin {
@@ -29,7 +29,7 @@ class MoonAvatarTheme extends ThemeExtension<MoonAvatarTheme> with Diagnosticabl
   /// Extra large avatar properties.
   final MoonAvatarSizes xl;
 
-  /// 2x extra large avatar properties.
+  /// (2x) Extra large avatar properties.
   final MoonAvatarSizes x2l;
 
   const MoonAvatarTheme({

lib/src/theme/button_sizes.dart → lib/src/theme/button/button_sizes.dart

@@ -5,7 +5,7 @@ import 'package:flutter/material.dart';
 
 import 'package:moon_design/src/theme/borders.dart';
 import 'package:moon_design/src/theme/sizes.dart';
-import 'package:moon_design/src/theme/text_styles.dart';
+import 'package:moon_design/src/theme/typography/text_styles.dart';
 
 @immutable
 class MoonButtonSizes extends ThemeExtension<MoonButtonSizes> with DiagnosticableTreeMixin {

lib/src/theme/button_theme.dart → lib/src/theme/button/button_theme.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
-import 'package:moon_design/src/theme/button_sizes.dart';
+import 'package:moon_design/src/theme/button/button_sizes.dart';
 
 @immutable
 class MoonButtonTheme extends ThemeExtension<MoonButtonTheme> with DiagnosticableTreeMixin {

lib/src/theme/tag/tag_sizes.dart

@@ -0,0 +1,102 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/borders.dart';
+import 'package:moon_design/src/theme/sizes.dart';
+import 'package:moon_design/src/theme/typography/text_styles.dart';
+
+@immutable
+class MoonTagSizes extends ThemeExtension<MoonTagSizes> with DiagnosticableTreeMixin {
+  static final x2s = MoonTagSizes(
+    height: MoonSizes.sizes.x2s,
+    gap: MoonSizes.sizes.x5s,
+    padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s),
+    borderRadius: MoonBorders.borders.interactiveXs,
+    textStyle: MoonTextStyles.text.text10.copyWith(fontWeight: FontWeight.w400),
+    upperCaseTextStyle: MoonTextStyles.heading.text9.copyWith(fontWeight: FontWeight.w700),
+  );
+
+  static final xs = MoonTagSizes(
+    height: MoonSizes.sizes.xs,
+    gap: MoonSizes.sizes.x5s,
+    padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s),
+    borderRadius: MoonBorders.borders.interactiveXs,
+    textStyle: MoonTextStyles.text.text12.copyWith(fontWeight: FontWeight.w400),
+    upperCaseTextStyle: MoonTextStyles.heading.text10,
+  );
+
+  /// Tag height.
+  final double height;
+
+  /// Space between tag children.
+  final double gap;
+
+  /// Padding around tag children.
+  final EdgeInsets padding;
+
+  /// Tag border radius.
+  final BorderRadius borderRadius;
+
+  /// Tag text style.
+  final TextStyle textStyle;
+
+  /// Tag upper case text style.
+  final TextStyle upperCaseTextStyle;
+
+  const MoonTagSizes({
+    required this.height,
+    required this.gap,
+    required this.padding,
+    required this.borderRadius,
+    required this.textStyle,
+    required this.upperCaseTextStyle,
+  });
+
+  @override
+  MoonTagSizes copyWith({
+    double? height,
+    double? gap,
+    EdgeInsets? padding,
+    BorderRadius? borderRadius,
+    TextStyle? textStyle,
+    TextStyle? upperCaseTextStyle,
+  }) {
+    return MoonTagSizes(
+      height: height ?? this.height,
+      gap: gap ?? this.gap,
+      padding: padding ?? this.padding,
+      borderRadius: borderRadius ?? this.borderRadius,
+      textStyle: textStyle ?? this.textStyle,
+      upperCaseTextStyle: upperCaseTextStyle ?? this.upperCaseTextStyle,
+    );
+  }
+
+  @override
+  MoonTagSizes lerp(ThemeExtension<MoonTagSizes>? other, double t) {
+    if (other is! MoonTagSizes) return this;
+
+    return MoonTagSizes(
+      height: lerpDouble(height, other.height, t)!,
+      gap: lerpDouble(gap, other.gap, t)!,
+      padding: EdgeInsets.lerp(padding, other.padding, t)!,
+      borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!,
+      textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
+      upperCaseTextStyle: TextStyle.lerp(upperCaseTextStyle, other.upperCaseTextStyle, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonTagSizes"))
+      ..add(DoubleProperty("height", height))
+      ..add(DoubleProperty("gap", gap))
+      ..add(DiagnosticsProperty<EdgeInsets>("padding", padding))
+      ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius))
+      ..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle))
+      ..add(DiagnosticsProperty<TextStyle>("upperCaseTextStyle", upperCaseTextStyle));
+  }
+}

lib/src/theme/tag/tag_theme.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/tag/tag_sizes.dart';
+
+@immutable
+class MoonTagTheme extends ThemeExtension<MoonTagTheme> with DiagnosticableTreeMixin {
+  static final sizes = MoonTagTheme(
+    x2s: MoonTagSizes.x2s,
+    xs: MoonTagSizes.xs,
+  );
+
+  /// (2x) Extra small tag properties.
+  final MoonTagSizes x2s;
+
+  /// Extra small tag properties.
+  final MoonTagSizes xs;
+
+  const MoonTagTheme({
+    required this.x2s,
+    required this.xs,
+  });
+
+  @override
+  MoonTagTheme copyWith({
+    MoonTagSizes? x2s,
+    MoonTagSizes? xs,
+  }) {
+    return MoonTagTheme(
+      x2s: x2s ?? this.x2s,
+      xs: xs ?? this.xs,
+    );
+  }
+
+  @override
+  MoonTagTheme lerp(ThemeExtension<MoonTagTheme>? other, double t) {
+    if (other is! MoonTagTheme) return this;
+
+    return MoonTagTheme(
+      x2s: x2s.lerp(other.x2s, t),
+      xs: xs.lerp(other.xs, t),
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonTagTheme"))
+      ..add(DiagnosticsProperty<MoonTagSizes>("x2s", x2s))
+      ..add(DiagnosticsProperty<MoonTagSizes>("xs", xs));
+  }
+}