feat: [MDS-389] Create MoonLoader

example/lib/src/storybook/common/options.dart

@@ -47,6 +47,7 @@ List<Option<int>> colorOptions = const [
   Option(label: "whis100", value: 36),
   Option(label: "whis60", value: 37),
   Option(label: "whis10", value: 38),
+  Option(label: "none", value: 39),
 ];
 
 /// LUT for the color options.
@@ -90,4 +91,5 @@ List<Color> colorTable(BuildContext context) => [
       context.moonColors!.whis100,
       context.moonColors!.whis60,
       context.moonColors!.whis10,
+      Colors.transparent,
     ];

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

@@ -76,9 +76,9 @@ class AvatarStory extends Story {
 
             final badgeColor = colorTable(context)[badgeColorKnob];
 
-            return Center(
-              child: Directionality(
-                textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
+            return Directionality(
+              textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
+              child: Center(
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [

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

@@ -0,0 +1,58 @@
+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 LoaderStory extends Story {
+  LoaderStory()
+      : super(
+          name: "Loader",
+          builder: (context) {
+            final loaderSizesKnob = context.knobs.options(
+              label: "loaderSize",
+              description: "Loader size variants.",
+              initial: MoonLoaderSize.md,
+              options: const [
+                Option(label: "x2s", value: MoonLoaderSize.x2s),
+                Option(label: "xs", value: MoonLoaderSize.xs),
+                Option(label: "sm", value: MoonLoaderSize.sm),
+                Option(label: "md", value: MoonLoaderSize.md),
+                Option(label: "lg", value: MoonLoaderSize.lg),
+              ],
+            );
+
+            final loaderColorKnob = context.knobs.options(
+              label: "color",
+              description: "MoonColors variants for Loader color.",
+              initial: 1, // hit
+              options: colorOptions,
+            );
+
+            final color = colorTable(context)[loaderColorKnob];
+
+            final loaderBackgroundColorKnob = context.knobs.options(
+              label: "backgroundColor",
+              description: "MoonColors variants for Loader background.",
+              initial: 39, // none
+              options: colorOptions,
+            );
+
+            final backgroundColor = colorTable(context)[loaderBackgroundColorKnob];
+
+            return Center(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  const SizedBox(height: 64),
+                  MoonLoader(
+                    color: color,
+                    backgroundColor: backgroundColor,
+                    loaderSize: loaderSizesKnob,
+                  ),
+                  const SizedBox(height: 64),
+                ],
+              ),
+            );
+          },
+        );
+}

example/lib/src/storybook/storybook.dart

@@ -3,6 +3,7 @@ import 'package:example/src/storybook/stories/avatar.dart';
 import 'package:example/src/storybook/stories/button.dart';
 import 'package:example/src/storybook/stories/chip.dart';
 import 'package:example/src/storybook/stories/icons.dart';
+import 'package:example/src/storybook/stories/loader.dart';
 import 'package:example/src/storybook/stories/tag.dart';
 import 'package:example/src/storybook/stories/tooltip.dart';
 import 'package:flutter/material.dart';
@@ -64,6 +65,7 @@ class StorybookPage extends StatelessWidget {
             ButtonStory(),
             ChipStory(),
             IconsStory(),
+            LoaderStory(),
             TagStory(),
             TooltipStory(),
           ],

lib/moon_design.dart

@@ -12,6 +12,8 @@ export 'package:moon_design/src/theme/effects/controls_effects.dart';
 export 'package:moon_design/src/theme/effects/effects.dart';
 export 'package:moon_design/src/theme/effects/focus_effects.dart';
 export 'package:moon_design/src/theme/effects/hover_effects.dart';
+export 'package:moon_design/src/theme/loader/loader_sizes.dart';
+export 'package:moon_design/src/theme/loader/loader_theme.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';
@@ -37,5 +39,6 @@ export 'package:moon_design/src/widgets/chips/ghost_chip.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/icons.dart';
+export 'package:moon_design/src/widgets/loader/loader.dart';
 export 'package:moon_design/src/widgets/tag/tag.dart';
 export 'package:moon_design/src/widgets/tooltip/tooltip.dart';

lib/src/theme/avatar/avatar_sizes.dart

@@ -63,10 +63,10 @@ class MoonAvatarSizes extends ThemeExtension<MoonAvatarSizes> with Diagnosticabl
   /// Avatar size value.
   final double avatarSizeValue;
 
-  /// Avatar size value.
+  /// Avatar badge size value.
   final double badgeSizeValue;
 
-  /// Avatar size value.
+  /// Avatar badge margin value.
   final double badgeMarginValue;
 
   /// Avatar border radius.

lib/src/theme/loader/loader_sizes.dart

@@ -0,0 +1,75 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/sizes.dart';
+
+@immutable
+class MoonLoaderSizes extends ThemeExtension<MoonLoaderSizes> with DiagnosticableTreeMixin {
+  static final x2s = MoonLoaderSizes(
+    loaderSizeValue: MoonSizes.sizes.x2s,
+    loaderStrokeWidth: MoonSizes.sizes.x6s,
+  );
+
+  static final xs = MoonLoaderSizes(
+    loaderSizeValue: MoonSizes.sizes.xs,
+    loaderStrokeWidth: MoonSizes.sizes.x6s,
+  );
+
+  static final sm = MoonLoaderSizes(
+    loaderSizeValue: MoonSizes.sizes.sm,
+    loaderStrokeWidth: MoonSizes.sizes.x6s,
+  );
+
+  static final md = MoonLoaderSizes(
+    loaderSizeValue: MoonSizes.sizes.md,
+    loaderStrokeWidth: MoonSizes.sizes.x5s,
+  );
+
+  static final lg = MoonLoaderSizes(
+    loaderSizeValue: MoonSizes.sizes.lg,
+    loaderStrokeWidth: MoonSizes.sizes.x5s,
+  );
+
+  /// Loader size value.
+  final double loaderSizeValue;
+
+  /// Loader stroke width.
+  final double loaderStrokeWidth;
+
+  const MoonLoaderSizes({
+    required this.loaderSizeValue,
+    required this.loaderStrokeWidth,
+  });
+
+  @override
+  MoonLoaderSizes copyWith({
+    double? loaderSizeValue,
+    double? loaderStrokeWidth,
+  }) {
+    return MoonLoaderSizes(
+      loaderSizeValue: loaderSizeValue ?? this.loaderSizeValue,
+      loaderStrokeWidth: loaderStrokeWidth ?? this.loaderStrokeWidth,
+    );
+  }
+
+  @override
+  MoonLoaderSizes lerp(ThemeExtension<MoonLoaderSizes>? other, double t) {
+    if (other is! MoonLoaderSizes) return this;
+
+    return MoonLoaderSizes(
+      loaderSizeValue: lerpDouble(loaderSizeValue, other.loaderSizeValue, t)!,
+      loaderStrokeWidth: lerpDouble(loaderStrokeWidth, other.loaderStrokeWidth, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonLoaderSizes"))
+      ..add(DoubleProperty("loaderSizeValue", loaderSizeValue))
+      ..add(DoubleProperty("loaderStrokeWidth", loaderStrokeWidth));
+  }
+}

lib/src/theme/loader/loader_theme.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/loader/loader_sizes.dart';
+
+@immutable
+class MoonLoaderTheme extends ThemeExtension<MoonLoaderTheme> with DiagnosticableTreeMixin {
+  static final sizes = MoonLoaderTheme(
+    x2s: MoonLoaderSizes.x2s,
+    xs: MoonLoaderSizes.xs,
+    sm: MoonLoaderSizes.sm,
+    md: MoonLoaderSizes.md,
+    lg: MoonLoaderSizes.lg,
+  );
+
+  /// (2x) Extra small avatar properties.
+  final MoonLoaderSizes x2s;
+
+  /// Extra small avatar properties.
+  final MoonLoaderSizes xs;
+
+  /// Small avatar properties.
+  final MoonLoaderSizes sm;
+
+  /// Medium avatar properties.
+  final MoonLoaderSizes md;
+
+  /// Large avatar properties.
+  final MoonLoaderSizes lg;
+
+  const MoonLoaderTheme({
+    required this.x2s,
+    required this.xs,
+    required this.sm,
+    required this.md,
+    required this.lg,
+  });
+
+  @override
+  MoonLoaderTheme copyWith({
+    MoonLoaderSizes? x2s,
+    MoonLoaderSizes? xs,
+    MoonLoaderSizes? sm,
+    MoonLoaderSizes? md,
+    MoonLoaderSizes? lg,
+  }) {
+    return MoonLoaderTheme(
+      x2s: x2s ?? this.x2s,
+      xs: xs ?? this.xs,
+      sm: sm ?? this.sm,
+      md: md ?? this.md,
+      lg: lg ?? this.lg,
+    );
+  }
+
+  @override
+  MoonLoaderTheme lerp(ThemeExtension<MoonLoaderTheme>? other, double t) {
+    if (other is! MoonLoaderTheme) return this;
+
+    return MoonLoaderTheme(
+      x2s: x2s.lerp(other.x2s, t),
+      xs: xs.lerp(other.xs, t),
+      sm: sm.lerp(other.sm, t),
+      md: md.lerp(other.md, t),
+      lg: lg.lerp(other.lg, t),
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonLoaderTheme"))
+      ..add(DiagnosticsProperty<MoonLoaderSizes>("x2s", x2s))
+      ..add(DiagnosticsProperty<MoonLoaderSizes>("xs", xs))
+      ..add(DiagnosticsProperty<MoonLoaderSizes>("sm", sm))
+      ..add(DiagnosticsProperty<MoonLoaderSizes>("md", md))
+      ..add(DiagnosticsProperty<MoonLoaderSizes>("lg", lg));
+  }
+}

lib/src/theme/sizes.dart

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 @immutable
 class MoonSizes extends ThemeExtension<MoonSizes> with DiagnosticableTreeMixin {
   static const sizes = MoonSizes(
+    x6s: 2,
     x5s: 4,
     x4s: 8,
     x3s: 12,
@@ -18,6 +19,9 @@ class MoonSizes extends ThemeExtension<MoonSizes> with DiagnosticableTreeMixin {
     x2l: 64,
   );
 
+  /// (6x) Extra small size.
+  final double x6s;
+
   /// (5x) Extra small size.
   final double x5s;
 
@@ -49,6 +53,7 @@ class MoonSizes extends ThemeExtension<MoonSizes> with DiagnosticableTreeMixin {
   final double x2l;
 
   const MoonSizes({
+    required this.x6s,
     required this.x5s,
     required this.x4s,
     required this.x3s,
@@ -63,6 +68,7 @@ class MoonSizes extends ThemeExtension<MoonSizes> with DiagnosticableTreeMixin {
 
   @override
   MoonSizes copyWith({
+    double? x6s,
     double? x5s,
     double? x4s,
     double? x3s,
@@ -75,6 +81,7 @@ class MoonSizes extends ThemeExtension<MoonSizes> with DiagnosticableTreeMixin {
     double? x2l,
   }) {
     return MoonSizes(
+      x6s: x6s ?? this.x6s,
       x5s: x5s ?? this.x5s,
       x4s: x4s ?? this.x4s,
       x3s: x3s ?? this.x3s,
@@ -93,6 +100,7 @@ class MoonSizes extends ThemeExtension<MoonSizes> with DiagnosticableTreeMixin {
     if (other is! MoonSizes) return this;
 
     return MoonSizes(
+      x6s: lerpDouble(x6s, other.x6s, t)!,
       x5s: lerpDouble(x5s, other.x5s, t)!,
       x4s: lerpDouble(x4s, other.x4s, t)!,
       x3s: lerpDouble(x3s, other.x3s, t)!,
@@ -111,6 +119,7 @@ class MoonSizes extends ThemeExtension<MoonSizes> with DiagnosticableTreeMixin {
     super.debugFillProperties(properties);
     properties
       ..add(DiagnosticsProperty("type", "MoonSizes"))
+      ..add(DoubleProperty("x6s", x6s))
       ..add(DoubleProperty("x5s", x5s))
       ..add(DoubleProperty("x4s", x4s))
       ..add(DoubleProperty("x3s", x3s))