feat: [MDS-405] Create CircularProgress widget

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

@@ -0,0 +1,65 @@
+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 CircularProgressStory extends Story {
+  CircularProgressStory()
+      : super(
+          name: "CircularProgress",
+          builder: (context) {
+            final circularProgressSizesKnob = context.knobs.options(
+              label: "MoonCircularProgressSize",
+              description: "CircularProgress size variants.",
+              initial: MoonCircularProgressSize.md,
+              options: const [
+                Option(label: "x2s", value: MoonCircularProgressSize.x2s),
+                Option(label: "xs", value: MoonCircularProgressSize.xs),
+                Option(label: "sm", value: MoonCircularProgressSize.sm),
+                Option(label: "md", value: MoonCircularProgressSize.md),
+                Option(label: "lg", value: MoonCircularProgressSize.lg),
+              ],
+            );
+
+            final circularProgressColorKnob = context.knobs.options(
+              label: "color",
+              description: "MoonColors variants for CircularProgress color.",
+              initial: 0, // piccolo
+              options: colorOptions,
+            );
+
+            final color = colorTable(context)[circularProgressColorKnob];
+
+            final circularProgressBackgroundColorKnob = context.knobs.options(
+              label: "backgroundColor",
+              description: "MoonColors variants for CircularProgress background.",
+              initial: 6, // trunks
+              options: colorOptions,
+            );
+
+            final backgroundColor = colorTable(context)[circularProgressBackgroundColorKnob];
+
+            final circularProgressValueKnob = context.knobs.slider(
+              label: "value",
+              description: "CircularProgress value.",
+              initial: 0.75,
+            );
+
+            return Center(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  const SizedBox(height: 64),
+                  MoonCircularProgress(
+                    value: circularProgressValueKnob,
+                    color: color,
+                    backgroundColor: backgroundColor,
+                    circularProgressSize: circularProgressSizesKnob,
+                  ),
+                  const SizedBox(height: 64),
+                ],
+              ),
+            );
+          },
+        );
+}

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

@@ -9,7 +9,7 @@ class LoaderStory extends Story {
           name: "Loader",
           builder: (context) {
             final loaderSizesKnob = context.knobs.options(
-              label: "loaderSize",
+              label: "MoonLoaderSize",
               description: "Loader size variants.",
               initial: MoonLoaderSize.md,
               options: const [

example/lib/src/storybook/storybook.dart

@@ -2,6 +2,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/chip.dart';
+import 'package:example/src/storybook/stories/circular_progress.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';
@@ -64,6 +65,7 @@ class StorybookPage extends StatelessWidget {
             AvatarStory(),
             ButtonStory(),
             ChipStory(),
+            CircularProgressStory(),
             IconsStory(),
             LoaderStory(),
             TagStory(),

lib/moon_design.dart

@@ -7,6 +7,8 @@ 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/chip/chip_sizes.dart';
 export 'package:moon_design/src/theme/chip/chip_theme.dart';
+export 'package:moon_design/src/theme/circular_progress/circular_progress_sizes.dart';
+export 'package:moon_design/src/theme/circular_progress/circular_progress_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';
@@ -36,6 +38,7 @@ 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/chips/chip.dart';
 export 'package:moon_design/src/widgets/chips/ghost_chip.dart';
+export 'package:moon_design/src/widgets/circular_progress/circular_progress.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';

lib/src/theme/circular_progress/circular_progress_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 MoonCircularProgressSizes extends ThemeExtension<MoonCircularProgressSizes> with DiagnosticableTreeMixin {
+  static final x2s = MoonCircularProgressSizes(
+    circularProgressSizeValue: MoonSizes.sizes.x2s,
+    circularProgressStrokeWidth: MoonSizes.sizes.x6s,
+  );
+
+  static final xs = MoonCircularProgressSizes(
+    circularProgressSizeValue: MoonSizes.sizes.xs,
+    circularProgressStrokeWidth: MoonSizes.sizes.x6s,
+  );
+
+  static final sm = MoonCircularProgressSizes(
+    circularProgressSizeValue: MoonSizes.sizes.sm,
+    circularProgressStrokeWidth: MoonSizes.sizes.x6s,
+  );
+
+  static final md = MoonCircularProgressSizes(
+    circularProgressSizeValue: MoonSizes.sizes.md,
+    circularProgressStrokeWidth: MoonSizes.sizes.x5s,
+  );
+
+  static final lg = MoonCircularProgressSizes(
+    circularProgressSizeValue: MoonSizes.sizes.lg,
+    circularProgressStrokeWidth: MoonSizes.sizes.x5s,
+  );
+
+  /// Circular progress size value.
+  final double circularProgressSizeValue;
+
+  /// Circular progress stroke width.
+  final double circularProgressStrokeWidth;
+
+  const MoonCircularProgressSizes({
+    required this.circularProgressSizeValue,
+    required this.circularProgressStrokeWidth,
+  });
+
+  @override
+  MoonCircularProgressSizes copyWith({
+    double? circularProgressSizeValue,
+    double? circularProgressStrokeWidth,
+  }) {
+    return MoonCircularProgressSizes(
+      circularProgressSizeValue: circularProgressSizeValue ?? this.circularProgressSizeValue,
+      circularProgressStrokeWidth: circularProgressStrokeWidth ?? this.circularProgressStrokeWidth,
+    );
+  }
+
+  @override
+  MoonCircularProgressSizes lerp(ThemeExtension<MoonCircularProgressSizes>? other, double t) {
+    if (other is! MoonCircularProgressSizes) return this;
+
+    return MoonCircularProgressSizes(
+      circularProgressSizeValue: lerpDouble(circularProgressSizeValue, other.circularProgressSizeValue, t)!,
+      circularProgressStrokeWidth: lerpDouble(circularProgressStrokeWidth, other.circularProgressStrokeWidth, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonCircularProgressSizes"))
+      ..add(DoubleProperty("circularProgressSizeValue", circularProgressSizeValue))
+      ..add(DoubleProperty("circularProgressStrokeWidth", circularProgressStrokeWidth));
+  }
+}

lib/src/theme/circular_progress/circular_progress_theme.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/circular_progress/circular_progress_sizes.dart';
+
+@immutable
+class MoonCircularProgressTheme extends ThemeExtension<MoonCircularProgressTheme> with DiagnosticableTreeMixin {
+  static final sizes = MoonCircularProgressTheme(
+    x2s: MoonCircularProgressSizes.x2s,
+    xs: MoonCircularProgressSizes.xs,
+    sm: MoonCircularProgressSizes.sm,
+    md: MoonCircularProgressSizes.md,
+    lg: MoonCircularProgressSizes.lg,
+  );
+
+  /// (2x) Extra small circular progress properties.
+  final MoonCircularProgressSizes x2s;
+
+  /// Extra small circular progress properties.
+  final MoonCircularProgressSizes xs;
+
+  /// Small circular progress properties.
+  final MoonCircularProgressSizes sm;
+
+  /// Medium circular progress properties.
+  final MoonCircularProgressSizes md;
+
+  /// Large circular progress properties.
+  final MoonCircularProgressSizes lg;
+
+  const MoonCircularProgressTheme({
+    required this.x2s,
+    required this.xs,
+    required this.sm,
+    required this.md,
+    required this.lg,
+  });
+
+  @override
+  MoonCircularProgressTheme copyWith({
+    MoonCircularProgressSizes? x2s,
+    MoonCircularProgressSizes? xs,
+    MoonCircularProgressSizes? sm,
+    MoonCircularProgressSizes? md,
+    MoonCircularProgressSizes? lg,
+  }) {
+    return MoonCircularProgressTheme(
+      x2s: x2s ?? this.x2s,
+      xs: xs ?? this.xs,
+      sm: sm ?? this.sm,
+      md: md ?? this.md,
+      lg: lg ?? this.lg,
+    );
+  }
+
+  @override
+  MoonCircularProgressTheme lerp(ThemeExtension<MoonCircularProgressTheme>? other, double t) {
+    if (other is! MoonCircularProgressTheme) return this;
+
+    return MoonCircularProgressTheme(
+      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", "MoonCircularProgressTheme"))
+      ..add(DiagnosticsProperty<MoonCircularProgressSizes>("x2s", x2s))
+      ..add(DiagnosticsProperty<MoonCircularProgressSizes>("xs", xs))
+      ..add(DiagnosticsProperty<MoonCircularProgressSizes>("sm", sm))
+      ..add(DiagnosticsProperty<MoonCircularProgressSizes>("md", md))
+      ..add(DiagnosticsProperty<MoonCircularProgressSizes>("lg", lg));
+  }
+}

lib/src/theme/loader/loader_theme.dart

@@ -13,19 +13,19 @@ class MoonLoaderTheme extends ThemeExtension<MoonLoaderTheme> with Diagnosticabl
     lg: MoonLoaderSizes.lg,
   );
 
-  /// (2x) Extra small avatar properties.
+  /// (2x) Extra small loader properties.
   final MoonLoaderSizes x2s;
 
-  /// Extra small avatar properties.
+  /// Extra small loader properties.
   final MoonLoaderSizes xs;
 
-  /// Small avatar properties.
+  /// Small loader properties.
   final MoonLoaderSizes sm;
 
-  /// Medium avatar properties.
+  /// Medium loader properties.
   final MoonLoaderSizes md;
 
-  /// Large avatar properties.
+  /// Large loader properties.
   final MoonLoaderSizes lg;
 
   const MoonLoaderTheme({

lib/src/theme/theme.dart

@@ -5,6 +5,7 @@ import 'package:moon_design/src/theme/avatar/avatar_theme.dart';
 import 'package:moon_design/src/theme/borders.dart';
 import 'package:moon_design/src/theme/button/button_theme.dart';
 import 'package:moon_design/src/theme/chip/chip_theme.dart';
+import 'package:moon_design/src/theme/circular_progress/circular_progress_theme.dart';
 import 'package:moon_design/src/theme/colors.dart';
 import 'package:moon_design/src/theme/effects/effects.dart';
 import 'package:moon_design/src/theme/loader/loader_theme.dart';
@@ -22,6 +23,7 @@ class MoonTheme extends ThemeExtension<MoonTheme> with DiagnosticableTreeMixin {
     borders: MoonBorders.borders,
     buttonTheme: MoonButtonTheme.sizes,
     chipTheme: MoonChipTheme.sizes,
+    circularProgressTheme: MoonCircularProgressTheme.sizes,
     colors: MoonColors.light,
     effects: MoonEffects.light,
     loaderTheme: MoonLoaderTheme.sizes,
@@ -38,6 +40,7 @@ class MoonTheme extends ThemeExtension<MoonTheme> with DiagnosticableTreeMixin {
     borders: MoonBorders.borders,
     buttonTheme: MoonButtonTheme.sizes,
     chipTheme: MoonChipTheme.sizes,
+    circularProgressTheme: MoonCircularProgressTheme.sizes,
     colors: MoonColors.dark,
     effects: MoonEffects.dark,
     loaderTheme: MoonLoaderTheme.sizes,
@@ -61,6 +64,9 @@ class MoonTheme extends ThemeExtension<MoonTheme> with DiagnosticableTreeMixin {
   /// Moon Design System chip theming.
   final MoonChipTheme chipTheme;
 
+  /// Moon Design System circular progress theming.
+  final MoonCircularProgressTheme circularProgressTheme;
+
   /// Moon Design System colors.
   final MoonColors colors;
 
@@ -93,6 +99,7 @@ class MoonTheme extends ThemeExtension<MoonTheme> with DiagnosticableTreeMixin {
     required this.borders,
     required this.buttonTheme,
     required this.chipTheme,
+    required this.circularProgressTheme,
     required this.colors,
     required this.effects,
     required this.loaderTheme,
@@ -110,6 +117,7 @@ class MoonTheme extends ThemeExtension<MoonTheme> with DiagnosticableTreeMixin {
     MoonBorders? borders,
     MoonButtonTheme? buttonTheme,
     MoonChipTheme? chipTheme,
+    MoonCircularProgressTheme? circularProgressTheme,
     MoonColors? colors,
     MoonEffects? effects,
     MoonLoaderTheme? loaderTheme,
@@ -125,6 +133,7 @@ class MoonTheme extends ThemeExtension<MoonTheme> with DiagnosticableTreeMixin {
       borders: borders ?? this.borders,
       buttonTheme: buttonTheme ?? this.buttonTheme,
       chipTheme: chipTheme ?? this.chipTheme,
+      circularProgressTheme: circularProgressTheme ?? this.circularProgressTheme,
       colors: colors ?? this.colors,
       effects: effects ?? this.effects,
       loaderTheme: loaderTheme ?? this.loaderTheme,
@@ -146,6 +155,7 @@ class MoonTheme extends ThemeExtension<MoonTheme> with DiagnosticableTreeMixin {
       borders: borders.lerp(other.borders, t),
       buttonTheme: buttonTheme.lerp(other.buttonTheme, t),
       chipTheme: chipTheme.lerp(other.chipTheme, t),
+      circularProgressTheme: circularProgressTheme.lerp(other.circularProgressTheme, t),
       colors: colors.lerp(other.colors, t),
       effects: effects.lerp(other.effects, t),
       loaderTheme: loaderTheme.lerp(other.loaderTheme, t),
@@ -167,6 +177,7 @@ class MoonTheme extends ThemeExtension<MoonTheme> with DiagnosticableTreeMixin {
       ..add(DiagnosticsProperty<MoonBorders>("MoonBorders", borders))
       ..add(DiagnosticsProperty<MoonButtonTheme>("MoonButtonTheme", buttonTheme))
       ..add(DiagnosticsProperty<MoonChipTheme>("MoonChipTheme", chipTheme))
+      ..add(DiagnosticsProperty<MoonCircularProgressTheme>("MoonCircularProgressTheme", circularProgressTheme))
       ..add(DiagnosticsProperty<MoonColors>("MoonColors", colors))
       ..add(DiagnosticsProperty<MoonEffects>("MoonEffects", effects))
       ..add(DiagnosticsProperty<MoonLoaderTheme>("MoonLoaderTheme", loaderTheme))
@@ -185,6 +196,7 @@ extension MoonThemeX on BuildContext {
   MoonBorders? get moonBorders => moonTheme?.borders;
   MoonButtonTheme? get moonButtonTheme => moonTheme?.buttonTheme;
   MoonChipTheme? get moonChipTheme => moonTheme?.chipTheme;
+  MoonCircularProgressTheme? get moonCircularProgressTheme => moonTheme?.circularProgressTheme;
   MoonColors? get moonColors => moonTheme?.colors;
   MoonEffects? get moonEffects => moonTheme?.effects;
   MoonLoaderTheme? get moonLoaderTheme => moonTheme?.loaderTheme;