feat: [MDS-436] Create Checkbox component

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

@@ -0,0 +1,102 @@
+import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/widgets/text_divider.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+bool? value = false;
+
+class CheckboxStory extends Story {
+  CheckboxStory()
+      : super(
+          name: "Checkbox",
+          builder: (context) {
+            final checkColorsKnob = context.knobs.options(
+              label: "checkColor",
+              description: "MoonColors variants for the Checkbox icon.",
+              initial: 7, // goten
+              options: colorOptions,
+            );
+
+            final checkColor = colorTable(context)[checkColorsKnob];
+
+            final activeColorsKnob = context.knobs.options(
+              label: "activeColor",
+              description: "MoonColors variants for when Checkbox is checked.",
+              initial: 0, // piccolo
+              options: colorOptions,
+            );
+
+            final activeColor = colorTable(context)[activeColorsKnob];
+
+            final fillColorsKnob = context.knobs.options(
+              label: "fillColor",
+              description: "MoonColors variants for when Checkbox is unchecked.",
+              initial: 39, // transparent
+              options: colorOptions,
+            );
+
+            final fillColor = colorTable(context)[fillColorsKnob];
+
+            final isDisabled = context.knobs.boolean(
+              label: "Disabled",
+              description: "onChanged() is null.",
+            );
+
+            final isTristate = context.knobs.boolean(
+              label: "tristate",
+              description: "Whether the checkbox uses tristate.",
+            );
+
+            final setRtlModeKnob = context.knobs.boolean(
+              label: "RTL mode",
+              description: "Switch between LTR and RTL modes.",
+            );
+
+            return Directionality(
+              textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
+              child: Center(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    const SizedBox(height: 64),
+                    const TextDivider(text: "Customisable Checkbox"),
+                    const SizedBox(height: 32),
+                    StatefulBuilder(
+                      builder: (context, setState) {
+                        return MoonCheckbox(
+                          checkColor: checkColor,
+                          activeColor: activeColor,
+                          fillColor: fillColor,
+                          tristate: isTristate,
+                          value: value,
+                          onChanged: isDisabled ? null : (newValue) => setState(() => value = newValue),
+                        );
+                      },
+                    ),
+                    const SizedBox(height: 40),
+                    const TextDivider(text: "Checkbox with clickable text"),
+                    const SizedBox(height: 32),
+                    StatefulBuilder(
+                      builder: (context, setState) {
+                        return MoonCheckbox.withLabel(
+                          context,
+                          checkColor: checkColor,
+                          activeColor: activeColor,
+                          fillColor: fillColor,
+                          tristate: isTristate,
+                          value: value,
+                          onChanged: isDisabled ? null : (newValue) => setState(() => value = newValue),
+                          label: "With label",
+                        );
+                      },
+                    ),
+                    const SizedBox(height: 64),
+                  ],
+                ),
+              ),
+            );
+          },
+        );
+}

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

@@ -1,6 +1,7 @@
 import 'package:example/src/storybook/common/options.dart';
 import 'package:example/src/storybook/common/widgets/text_divider.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
@@ -97,12 +98,12 @@ class SwitchStory extends Story {
                           ),
                           activeTrackWidget: Text(
                             "ON",
-                            style: MoonTextStyles.caption.text8.copyWith(letterSpacing: 0.5),
+                            style: MoonTextStyles.caption.text8.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1),
                             textAlign: TextAlign.center,
                           ),
                           inactiveTrackWidget: Text(
                             "OFF",
-                            style: MoonTextStyles.caption.text8.copyWith(letterSpacing: 0.5),
+                            style: MoonTextStyles.caption.text8.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1),
                             textAlign: TextAlign.center,
                           ),
                           value: value,

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

@@ -75,6 +75,7 @@ class TagStory extends Story {
                     const SizedBox(height: 64),
                     MoonTag(
                       borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
+                      onTap: () {},
                       tagSize: tagSizesKnob,
                       isUpperCase: setUpperCase,
                       backgroundColor: color,

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/checkbox.dart';
 import 'package:example/src/storybook/stories/chip.dart';
 import 'package:example/src/storybook/stories/circular_loader.dart';
 import 'package:example/src/storybook/stories/circular_progress.dart';
@@ -67,6 +68,7 @@ class StorybookPage extends StatelessWidget {
           stories: [
             AvatarStory(),
             ButtonStory(),
+            CheckboxStory(),
             ChipStory(),
             CircularLoaderStory(),
             CircularProgressStory(),

lib/moon_design.dart

@@ -3,6 +3,7 @@ library moon_design;
 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/button_theme.dart';
+export 'package:moon_design/src/theme/checkbox/checkbox_theme.dart';
 export 'package:moon_design/src/theme/chip/chip_theme.dart';
 export 'package:moon_design/src/theme/colors.dart';
 export 'package:moon_design/src/theme/effects/effects.dart';
@@ -31,6 +32,7 @@ export 'package:moon_design/src/widgets/buttons/ghost_button.dart';
 export 'package:moon_design/src/widgets/buttons/primary_button.dart';
 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/checkbox/checkbox.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/common/animated_icon_theme.dart';

lib/src/theme/checkbox/checkbox_colors.dart

@@ -0,0 +1,78 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/colors.dart';
+
+@immutable
+class MoonCheckboxColors extends ThemeExtension<MoonCheckboxColors> with DiagnosticableTreeMixin {
+  static final light = MoonCheckboxColors(
+    activeColor: MoonColors.light.piccolo,
+    checkColor: MoonColors.light.goten,
+    fillColor: Colors.transparent,
+    borderColor: MoonColors.light.trunks,
+  );
+
+  static final dark = MoonCheckboxColors(
+    activeColor: MoonColors.dark.piccolo,
+    checkColor: MoonColors.dark.goten,
+    fillColor: Colors.transparent,
+    borderColor: MoonColors.dark.trunks,
+  );
+
+  /// Checkbox active color.
+  final Color activeColor;
+
+  /// Checkbox border color.
+  final Color borderColor;
+
+  /// Checkbox icon color.
+  final Color checkColor;
+
+  /// Checkbox fill (inactive) color.
+  final Color fillColor;
+
+  const MoonCheckboxColors({
+    required this.activeColor,
+    required this.borderColor,
+    required this.checkColor,
+    required this.fillColor,
+  });
+
+  @override
+  MoonCheckboxColors copyWith({
+    Color? activeColor,
+    Color? borderColor,
+    Color? checkColor,
+    Color? fillColor,
+  }) {
+    return MoonCheckboxColors(
+      activeColor: activeColor ?? this.activeColor,
+      borderColor: borderColor ?? this.borderColor,
+      checkColor: checkColor ?? this.checkColor,
+      fillColor: fillColor ?? this.fillColor,
+    );
+  }
+
+  @override
+  MoonCheckboxColors lerp(ThemeExtension<MoonCheckboxColors>? other, double t) {
+    if (other is! MoonCheckboxColors) return this;
+
+    return MoonCheckboxColors(
+      activeColor: Color.lerp(activeColor, other.activeColor, t)!,
+      borderColor: Color.lerp(borderColor, other.borderColor, t)!,
+      checkColor: Color.lerp(checkColor, other.checkColor, t)!,
+      fillColor: Color.lerp(fillColor, other.fillColor, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonCheckboxColors"))
+      ..add(ColorProperty("activeColor", activeColor))
+      ..add(ColorProperty("borderColor", borderColor))
+      ..add(ColorProperty("checkColor", checkColor))
+      ..add(ColorProperty("fillColor", fillColor));
+  }
+}

lib/src/theme/checkbox/checkbox_properties.dart

@@ -0,0 +1,45 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:moon_design/src/theme/borders.dart';
+
+@immutable
+class MoonCheckboxProperties extends ThemeExtension<MoonCheckboxProperties> with DiagnosticableTreeMixin {
+  static final properties = MoonCheckboxProperties(
+    borderRadiusValue: MoonBorders.borders.interactiveXs.topLeft.x,
+  );
+
+  /// Checkbox border radius value.
+  final double borderRadiusValue;
+
+  const MoonCheckboxProperties({
+    required this.borderRadiusValue,
+  });
+
+  @override
+  MoonCheckboxProperties copyWith({
+    double? borderRadiusValue,
+  }) {
+    return MoonCheckboxProperties(
+      borderRadiusValue: borderRadiusValue ?? this.borderRadiusValue,
+    );
+  }
+
+  @override
+  MoonCheckboxProperties lerp(ThemeExtension<MoonCheckboxProperties>? other, double t) {
+    if (other is! MoonCheckboxProperties) return this;
+
+    return MoonCheckboxProperties(
+      borderRadiusValue: lerpDouble(borderRadiusValue, other.borderRadiusValue, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonCheckboxProperties"))
+      ..add(DiagnosticsProperty<double>("borderRadiusValue", borderRadiusValue));
+  }
+}

lib/src/theme/checkbox/checkbox_theme.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/checkbox/checkbox_colors.dart';
+import 'package:moon_design/src/theme/checkbox/checkbox_properties.dart';
+
+@immutable
+class MoonCheckboxTheme extends ThemeExtension<MoonCheckboxTheme> with DiagnosticableTreeMixin {
+  static final light = MoonCheckboxTheme(
+    colors: MoonCheckboxColors.light,
+    properties: MoonCheckboxProperties.properties,
+  );
+
+  static final dark = MoonCheckboxTheme(
+    colors: MoonCheckboxColors.dark,
+    properties: MoonCheckboxProperties.properties,
+  );
+
+  /// Checkbox colors.
+  final MoonCheckboxColors colors;
+
+  /// Checkbox properties.
+  final MoonCheckboxProperties properties;
+
+  const MoonCheckboxTheme({
+    required this.colors,
+    required this.properties,
+  });
+
+  @override
+  MoonCheckboxTheme copyWith({
+    MoonCheckboxColors? colors,
+    MoonCheckboxProperties? properties,
+  }) {
+    return MoonCheckboxTheme(
+      colors: colors ?? this.colors,
+      properties: properties ?? this.properties,
+    );
+  }
+
+  @override
+  MoonCheckboxTheme lerp(ThemeExtension<MoonCheckboxTheme>? other, double t) {
+    if (other is! MoonCheckboxTheme) return this;
+
+    return MoonCheckboxTheme(
+      colors: colors.lerp(other.colors, t),
+      properties: properties.lerp(other.properties, t),
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) {
+    super.debugFillProperties(diagnosticProperties);
+    diagnosticProperties
+      ..add(DiagnosticsProperty("type", "MoonCheckboxTheme"))
+      ..add(DiagnosticsProperty<MoonCheckboxColors>("colors", colors))
+      ..add(DiagnosticsProperty<MoonCheckboxProperties>("properties", properties));
+  }
+}