feat: [MDS-1597] Tag component

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

@@ -68,6 +68,14 @@ class TagStory extends StatelessWidget {
       max: 32,
     );
 
+    final gapKnob = context.knobs.nullable.sliderInt(
+      label: "gap",
+      description: "Gap between MoonTag leading, label and trailing slots.",
+      enabled: false,
+      initial: 4,
+      max: 24,
+    );
+
     final showLeadingKnob = context.knobs.boolean(
       label: "leading",
       description: "Show widget in MoonTag leading slot.",
@@ -85,34 +93,31 @@ class TagStory extends StatelessWidget {
       initial: true,
     );
 
+    final icon = HugeIcon(
+      icon: HugeIcons.strokeRoundedCancel01,
+      color: iconColor ?? Colors.black,
+      size: 12.0,
+    );
+
     return Center(
       child: SingleChildScrollView(
         padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0),
         child: MoonTag(
+          gap: gapKnob?.toDouble(),
+          tagSize: tagSizeKnob,
+          backgroundColor: backgroundColor,
           borderRadius: borderRadiusKnob != null
               ? BorderRadius.circular(borderRadiusKnob.toDouble())
               : null,
           onTap: () {},
-          tagSize: tagSizeKnob,
-          backgroundColor: backgroundColor,
-          leading: showLeadingKnob
-              ? Icon(
-                  MoonIcons.controls_close_small_16_light,
-                  color: iconColor,
-                )
-              : null,
+          leading: showLeadingKnob ? icon : null,
+          trailing: showTrailingKnob ? icon : null,
           label: showLabelKnob
               ? Text(
                   customLabelTextKnob,
                   style: TextStyle(color: textColor),
                 )
               : null,
-          trailing: showTrailingKnob
-              ? Icon(
-                  MoonIcons.controls_close_small_16_light,
-                  color: iconColor,
-                )
-              : null,
         ),
       ),
     );

lib/moon_design.dart

@@ -1,6 +1,8 @@
 /// Moon Design for Flutter
 library moon_design;
 
+export 'package:hugeicons/hugeicons.dart';
+
 export 'package:moon_design/src/theme/accordion/accordion_theme.dart';
 export 'package:moon_design/src/theme/alert/alert_theme.dart';
 export 'package:moon_design/src/theme/auth_code/auth_code_theme.dart';

lib/src/widgets/tag/tag.dart

@@ -1,13 +1,12 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
+import 'package:mix/mix.dart';
 import 'package:moon_core/moon_core.dart';
 
 import 'package:moon_design/src/theme/tag/tag_size_properties.dart';
 import 'package:moon_design/src/theme/tag/tag_sizes.dart';
-import 'package:moon_design/src/theme/theme.dart';
 import 'package:moon_design/src/theme/tokens/tokens.dart';
-import 'package:moon_design/src/utils/extensions.dart';
-import 'package:moon_design/src/utils/squircle/squircle_border.dart';
 
 import 'package:moon_tokens/moon_tokens.dart';
 
@@ -82,18 +81,13 @@ class MoonTag extends StatelessWidget {
   MoonTagSizeProperties _getMoonTagSize(
     BuildContext context,
     MoonTagSize? moonTagSize,
-  ) {
-    return switch (moonTagSize) {
-      MoonTagSize.x2s => context.moonTheme?.tagTheme.sizes.x2s ??
-          MoonTagSizes(tokens: MoonTokens.light).x2s,
-      MoonTagSize.xs => context.moonTheme?.tagTheme.sizes.xs ??
-          MoonTagSizes(tokens: MoonTokens.light).xs,
-      MoonTagSize.sm => context.moonTheme?.tagTheme.sizes.sm ??
-          MoonTagSizes(tokens: MoonTokens.light).sm,
-      _ => context.moonTheme?.tagTheme.sizes.xs ??
-          MoonTagSizes(tokens: MoonTokens.light).xs,
-    };
-  }
+  ) =>
+      switch (moonTagSize) {
+        MoonTagSize.x2s => MoonTagSizes(tokens: MoonTokens.light).x2s,
+        MoonTagSize.xs => MoonTagSizes(tokens: MoonTokens.light).xs,
+        MoonTagSize.sm => MoonTagSizes(tokens: MoonTokens.light).sm,
+        _ => MoonTagSizes(tokens: MoonTokens.light).xs,
+      };
 
   @override
   Widget build(BuildContext context) {
@@ -103,17 +97,12 @@ class MoonTag extends StatelessWidget {
     final BorderRadiusGeometry effectiveBorderRadius =
         borderRadius ?? effectiveMoonTagSize.borderRadius;
 
-    final Color effectiveBackgroundColor = backgroundColor ??
-        context.moonTheme?.tagTheme.colors.backgroundColor ??
-        MoonColors.light.goku;
+    final Color effectiveBackgroundColor =
+        backgroundColor ?? MoonColors.light.goku;
 
-    final Color effectiveTextColor =
-        context.moonTheme?.tagTheme.colors.textColor ??
-            MoonColors.light.textPrimary;
+    final Color effectiveTextColor = MoonColors.light.textPrimary;
 
-    final Color effectiveIconColor =
-        context.moonTheme?.tagTheme.colors.iconColor ??
-            MoonColors.light.iconPrimary;
+    final Color effectiveIconColor = MoonColors.light.iconPrimary;
 
     final double effectiveHeight = height ?? effectiveMoonTagSize.height;
 
@@ -122,77 +111,51 @@ class MoonTag extends StatelessWidget {
     final EdgeInsetsGeometry effectivePadding =
         padding ?? effectiveMoonTagSize.padding;
 
-    final EdgeInsets resolvedDirectionalPadding =
-        effectivePadding.resolve(Directionality.of(context));
-
-    final EdgeInsetsGeometry correctedPadding = padding == null
-        ? EdgeInsetsDirectional.fromSTEB(
-            leading == null && label != null
-                ? resolvedDirectionalPadding.left
-                : 0,
-            resolvedDirectionalPadding.top,
-            trailing == null && label != null
-                ? resolvedDirectionalPadding.right
-                : 0,
-            resolvedDirectionalPadding.bottom,
-          )
-        : resolvedDirectionalPadding;
-
-    return Semantics(
-      label: semanticLabel,
-      button: false,
-      focusable: false,
-      child: GestureDetector(
-        excludeFromSemantics: true,
-        onTap: onTap,
-        onLongPress: onLongPress,
-        child: MouseRegion(
-          cursor: onTap != null
-              ? SystemMouseCursors.click
-              : SystemMouseCursors.basic,
-          child: Container(
-            width: width,
-            height: effectiveHeight,
-            padding: correctedPadding,
-            constraints: BoxConstraints(minWidth: effectiveHeight),
-            decoration: decoration ??
-                ShapeDecorationWithPremultipliedAlpha(
-                  color: effectiveBackgroundColor,
-                  shape: MoonSquircleBorder(
-                    borderRadius:
-                        effectiveBorderRadius.squircleBorderRadius(context),
-                  ),
-                ),
-            child: IconTheme(
-              data: IconThemeData(
-                color: effectiveIconColor,
-                size: effectiveMoonTagSize.iconSizeValue,
-              ),
-              child: DefaultTextStyle(
-                style: effectiveMoonTagSize.textStyle.copyWith(
-                  color: effectiveTextColor,
-                ),
-                child: Row(
-                  mainAxisSize: MainAxisSize.min,
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    if (leading != null)
-                      Padding(
-                        padding: EdgeInsets.symmetric(horizontal: effectiveGap),
-                        child: leading,
-                      ),
-                    if (label != null) label!,
-                    if (trailing != null)
-                      Padding(
-                        padding: EdgeInsets.symmetric(horizontal: effectiveGap),
-                        child: trailing,
-                      ),
-                  ],
-                ),
-              ),
+    final TextStyle resolvedTextStyle =
+        effectiveMoonTagSize.textStyle.copyWith(color: effectiveTextColor);
+
+    final SystemMouseCursor effectiveMouseCursor =
+        (onTap != null || onLongPress != null)
+            ? SystemMouseCursors.click
+            : SystemMouseCursors.basic;
+
+    final Style tagStyle = Style(
+      $box.chain
+        ..height(effectiveHeight)
+        ..constraints(minWidth: effectiveHeight)
+        ..padding.as(effectivePadding),
+      width != null ? $box.width(width!) : null,
+      decorationToAttribute(
+        decoration ??
+            ShapeDecorationWithPremultipliedAlpha(
+              color: effectiveBackgroundColor,
+              shape: MoonBorder(borderRadius: effectiveBorderRadius),
             ),
-          ),
-        ),
+      ),
+      $flex.chain
+        ..gap(effectiveGap)
+        ..mainAxisSize.min()
+        ..mainAxisAlignment.center(),
+      $with.defaultTextStyle.style.as(resolvedTextStyle),
+      $with.iconTheme.data(
+        color: effectiveIconColor,
+        size: effectiveMoonTagSize.iconSizeValue,
+      ),
+    );
+
+    return MoonBaseInteractiveWidget(
+      semanticLabel: semanticLabel,
+      mouseCursor: effectiveMouseCursor,
+      focusNode: FocusNode(skipTraversal: true),
+      onTap: onTap,
+      onLongPress: onLongPress,
+      child: HBox(
+        style: tagStyle,
+        children: [
+          if (leading != null) leading!,
+          if (label != null) label!,
+          if (trailing != null) trailing!,
+        ],
       ),
     );
   }

pubspec.yaml

@@ -12,6 +12,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  hugeicons: ^0.0.3
   moon_core:
     git:
       url: https://github.com/coingaming/moon_flutter_core