feat: [MDS-518] Create MoonSegmentedControl component

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

@@ -0,0 +1,196 @@
+import 'package:example/src/storybook/common/color_options.dart';
+import 'package:example/src/storybook/common/widgets/text_divider.dart';
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class SegmentedControlStory extends Story {
+  SegmentedControlStory()
+      : super(
+          name: "SegmentedControl",
+          builder: (context) {
+            final segmentedControlSizesKnob = context.knobs.nullable.options(
+              label: "segmentedControlSize",
+              description: "Size variants for MoonSegmentedControl.",
+              enabled: false,
+              initial: MoonSegmentedControlSize.md,
+              options: const [
+                Option(label: "sm", value: MoonSegmentedControlSize.sm),
+                Option(label: "md", value: MoonSegmentedControlSize.md),
+              ],
+            );
+
+            final backgroundColorsKnob = context.knobs.nullable.options(
+              label: "backgroundColor",
+              description: "MoonColors variants for MoonSegmentedControl background.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40];
+
+            final selectedSegmentColorsKnob = context.knobs.nullable.options(
+              label: "selectedSegmentColor",
+              description: "MoonColors variants for selected segment.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final selectedSegmentColor = colorTable(context)[selectedSegmentColorsKnob ?? 40];
+
+            final textColorsKnob = context.knobs.nullable.options(
+              label: "textColor",
+              description: "MoonColors variants for default text.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final textColor = colorTable(context)[textColorsKnob ?? 40];
+
+            final selectedTextColorsKnob = context.knobs.nullable.options(
+              label: "selectedTextColor",
+              description: "MoonColors variants for selected segment text.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final selectedTextColor = colorTable(context)[selectedTextColorsKnob ?? 40];
+
+            final borderRadiusKnob = context.knobs.nullable.sliderInt(
+              label: "borderRadius",
+              description: "Border radius for MoonSegmentedControl.",
+              enabled: false,
+              initial: 12,
+              max: 32,
+            );
+
+            final segmentBorderRadiusKnob = context.knobs.nullable.sliderInt(
+              label: "segmentBorderRadius",
+              description: "Border radius for MoonSegmentedControl segments.",
+              enabled: false,
+              initial: 8,
+              max: 32,
+            );
+
+            final gapKnob = context.knobs.nullable.sliderInt(
+              label: "gap",
+              description: "Gap between MoonSegmentedControl segments.",
+              enabled: false,
+              initial: 4,
+              max: 16,
+            );
+
+            final isExpandedKnob = context.knobs.boolean(
+              label: "isExpanded",
+              description: "Whether MoonSegmentControl is horizontally expanded.",
+            );
+
+            final showLeadingKnob = context.knobs.boolean(
+              label: "leading",
+              description: "Show widget in MoonSegmentedControl leading slot.",
+            );
+
+            final showLabelKnob = context.knobs.boolean(
+              label: "label",
+              description: "Show widget in MoonSegmentedControl label slot.",
+              initial: true,
+            );
+
+            final showTrailingKnob = context.knobs.boolean(
+              label: "trailing",
+              description: "Show widget in MoonSegmentedControl trailing slot.",
+            );
+
+            final segmentStyle = SegmentStyle(
+              textColor: textColor,
+              selectedTextColor: selectedTextColor,
+              selectedSegmentColor: selectedSegmentColor,
+              segmentBorderRadius:
+                  segmentBorderRadiusKnob != null ? BorderRadius.circular(segmentBorderRadiusKnob.toDouble()) : null,
+            );
+
+            return Center(
+              child: SingleChildScrollView(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    const SizedBox(height: 64),
+                    const TextDivider(text: "Default MoonSegmentedControl"),
+                    const SizedBox(height: 32),
+                    Column(
+                      children: [
+                        MoonSegmentedControl(
+                          isExpanded: isExpandedKnob,
+                          gap: gapKnob?.toDouble(),
+                          segmentedControlSize: segmentedControlSizesKnob,
+                          backgroundColor: backgroundColor,
+                          borderRadius:
+                              borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+                          segments: [
+                            Segment(
+                              leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
+                              label: showLabelKnob ? const Text('Tab') : null,
+                              trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
+                              segmentStyle: segmentStyle,
+                            ),
+                            Segment(
+                              leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
+                              label: showLabelKnob ? const Text('Tab') : null,
+                              trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
+                              segmentStyle: segmentStyle,
+                            ),
+                            Segment(
+                              leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
+                              label: showLabelKnob ? const Text('Tab') : null,
+                              trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
+                              segmentStyle: segmentStyle,
+                            ),
+                          ],
+                        ),
+                        const SizedBox(height: 32),
+                        const TextDivider(text: "Icon MoonSegmentedControl"),
+                        const SizedBox(height: 32),
+                        MoonSegmentedControl(
+                          isExpanded: isExpandedKnob,
+                          gap: gapKnob?.toDouble(),
+                          segmentedControlSize: segmentedControlSizesKnob,
+                          backgroundColor: backgroundColor,
+                          borderRadius:
+                              borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+                          segments: [
+                            Segment(
+                              trailing: const MoonIcon(MoonIcons.frame_24),
+                              segmentStyle: segmentStyle,
+                            ),
+                            Segment(
+                              trailing: const MoonIcon(MoonIcons.frame_24),
+                              segmentStyle: segmentStyle,
+                            ),
+                            Segment(
+                              trailing: const MoonIcon(MoonIcons.frame_24),
+                              segmentStyle: segmentStyle,
+                            ),
+                            Segment(
+                              trailing: const MoonIcon(MoonIcons.frame_24),
+                              segmentStyle: segmentStyle,
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                    const SizedBox(height: 64),
+                  ],
+                ),
+              ),
+            );
+          },
+        );
+}

example/lib/src/storybook/storybook.dart

@@ -14,6 +14,7 @@ import 'package:example/src/storybook/stories/linear_progress.dart';
 import 'package:example/src/storybook/stories/modal.dart';
 import 'package:example/src/storybook/stories/popover.dart';
 import 'package:example/src/storybook/stories/radio.dart';
+import 'package:example/src/storybook/stories/segmented_control.dart';
 import 'package:example/src/storybook/stories/switch.dart';
 import 'package:example/src/storybook/stories/tag.dart';
 import 'package:example/src/storybook/stories/text_area.dart';
@@ -26,6 +27,7 @@ import 'package:storybook_flutter/storybook_flutter.dart';
 
 class StorybookPage extends StatelessWidget {
   static bool isLargeScreen = MediaQueryData.fromWindow(WidgetsBinding.instance.window).size.width > 1000;
+
   const StorybookPage({super.key});
 
   static final _storyPanelFocusNode = FocusNode();
@@ -92,6 +94,7 @@ class StorybookPage extends StatelessWidget {
             ModalStory(),
             PopoverStory(),
             RadioStory(),
+            SegmentedControlStory(),
             SwitchStory(),
             TagStory(),
             TextAreaStory(),

lib/moon_design.dart

@@ -19,6 +19,7 @@ export 'package:moon_design/src/theme/popover/popover_theme.dart';
 export 'package:moon_design/src/theme/progress/circular_progress/circular_progress_theme.dart';
 export 'package:moon_design/src/theme/progress/linear_progress/linear_progress_theme.dart';
 export 'package:moon_design/src/theme/radio/radio_theme.dart';
+export 'package:moon_design/src/theme/segmented_control/segmented_control_theme.dart';
 export 'package:moon_design/src/theme/shadows.dart';
 export 'package:moon_design/src/theme/sizes.dart';
 export 'package:moon_design/src/theme/switch/switch_theme.dart';
@@ -50,6 +51,7 @@ export 'package:moon_design/src/widgets/chips/chip.dart';
 export 'package:moon_design/src/widgets/chips/text_chip.dart';
 export 'package:moon_design/src/widgets/common/animated_icon_theme.dart';
 export 'package:moon_design/src/widgets/common/base_control.dart';
+export 'package:moon_design/src/widgets/common/base_segmented_tab_bar.dart';
 export 'package:moon_design/src/widgets/common/effects/focus_effect.dart';
 export 'package:moon_design/src/widgets/common/effects/pulse_effect.dart';
 export 'package:moon_design/src/widgets/common/icons/icons.dart';
@@ -63,6 +65,7 @@ export 'package:moon_design/src/widgets/popover/popover.dart';
 export 'package:moon_design/src/widgets/progress/circular_progress.dart';
 export 'package:moon_design/src/widgets/progress/linear_progress.dart';
 export 'package:moon_design/src/widgets/radio/radio.dart';
+export 'package:moon_design/src/widgets/segmented_control/segmented_control.dart';
 export 'package:moon_design/src/widgets/switch/switch.dart';
 export 'package:moon_design/src/widgets/tag/tag.dart';
 export 'package:moon_design/src/widgets/text_area/text_area.dart';

lib/src/theme/chip/chip_sizes.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-
 import 'package:moon_design/src/theme/chip/chip_size_properties.dart';
 
 @immutable
@@ -23,11 +22,8 @@ class MoonChipSizes extends ThemeExtension<MoonChipSizes> with DiagnosticableTre
 
   @override
   MoonChipSizes copyWith({
-    MoonChipSizeProperties? xs,
     MoonChipSizeProperties? sm,
     MoonChipSizeProperties? md,
-    MoonChipSizeProperties? lg,
-    MoonChipSizeProperties? xl,
   }) {
     return MoonChipSizes(
       sm: sm ?? this.sm,

lib/src/theme/segmented_control/segmented_control_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 MoonSegmentedControlColors extends ThemeExtension<MoonSegmentedControlColors> with DiagnosticableTreeMixin {
+  static final light = MoonSegmentedControlColors(
+    backgroundColor: MoonColors.light.goku,
+    selectedSegmentColor: MoonColors.light.gohan,
+    textColor: MoonColors.light.bulma,
+    selectedTextColor: MoonColors.light.bulma,
+  );
+
+  static final dark = MoonSegmentedControlColors(
+    backgroundColor: MoonColors.dark.goku,
+    selectedSegmentColor: MoonColors.dark.gohan,
+    textColor: MoonColors.dark.bulma,
+    selectedTextColor: MoonColors.dark.bulma,
+  );
+
+  /// Background color of SegmentedControl.
+  final Color backgroundColor;
+
+  /// Color of selected segment.
+  final Color selectedSegmentColor;
+
+  /// Default text color of segments.
+  final Color textColor;
+
+  /// Text color of selected segment.
+  final Color selectedTextColor;
+
+  const MoonSegmentedControlColors({
+    required this.backgroundColor,
+    required this.selectedSegmentColor,
+    required this.textColor,
+    required this.selectedTextColor,
+  });
+
+  @override
+  MoonSegmentedControlColors copyWith({
+    Color? backgroundColor,
+    Color? selectedSegmentColor,
+    Color? textColor,
+    Color? selectedTextColor,
+  }) {
+    return MoonSegmentedControlColors(
+      backgroundColor: backgroundColor ?? this.backgroundColor,
+      selectedSegmentColor: selectedSegmentColor ?? this.selectedSegmentColor,
+      textColor: textColor ?? this.textColor,
+      selectedTextColor: selectedTextColor ?? this.selectedTextColor,
+    );
+  }
+
+  @override
+  MoonSegmentedControlColors lerp(ThemeExtension<MoonSegmentedControlColors>? other, double t) {
+    if (other is! MoonSegmentedControlColors) return this;
+
+    return MoonSegmentedControlColors(
+      backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!,
+      selectedSegmentColor: Color.lerp(selectedSegmentColor, other.selectedSegmentColor, t)!,
+      textColor: Color.lerp(textColor, other.textColor, t)!,
+      selectedTextColor: Color.lerp(selectedTextColor, other.selectedTextColor, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonSegmentedControlColors"))
+      ..add(ColorProperty("backgroundColor", backgroundColor))
+      ..add(ColorProperty("selectedSegmentColor", selectedSegmentColor))
+      ..add(ColorProperty("textColor", textColor))
+      ..add(ColorProperty("selectedTextColor", selectedTextColor));
+  }
+}