feat: Slider component

packages/mix/lib/mix.dart

@@ -1,15 +1,15 @@
-///   /\\\\            /\\\\  /\\\\\\\\\\\  /\\\       /\\\              
-///   \/\\\\\\        /\\\\\\ \/////\\\///  \///\\\   /\\\/  
-///    \/\\\//\\\    /\\\//\\\     \/\\\       \///\\\\\\/    
-///     \/\\\\///\\\/\\\/ \/\\\     \/\\\         \//\\\\      
-///      \/\\\  \///\\\/   \/\\\     \/\\\          \/\\\\      
-///       \/\\\    \///     \/\\\     \/\\\          /\\\\\\     
-///        \/\\\             \/\\\     \/\\\        /\\\////\\\   
-///         \/\\\             \/\\\  /\\\\\\\\\\\  /\\\/   \///\\\ 
-///          \///              \///  \///////////  \///       \/// 
+///   /\\\\            /\\\\  /\\\\\\\\\\\  /\\\       /\\\
+///   \/\\\\\\        /\\\\\\ \/////\\\///  \///\\\   /\\\/
+///    \/\\\//\\\    /\\\//\\\     \/\\\       \///\\\\\\/
+///     \/\\\\///\\\/\\\/ \/\\\     \/\\\         \//\\\\
+///      \/\\\  \///\\\/   \/\\\     \/\\\          \/\\\\
+///       \/\\\    \///     \/\\\     \/\\\          /\\\\\\
+///        \/\\\             \/\\\     \/\\\        /\\\////\\\
+///         \/\\\             \/\\\  /\\\\\\\\\\\  /\\\/   \///\\\
+///          \///              \///  \///////////  \///       \///
+///
+///                        https://fluttermix.com
 ///
-///                        https://fluttermix.com 
-/// 
 ///             /\///////////////////////////////////////////////////\
 ///             \/\           ***** GENERATED CODE *****            \ \
 ///              \/\            ** DO NOT EDIT THIS FILE **          \ \
@@ -54,6 +54,7 @@ export 'src/attributes/strut_style/strut_style_dto.dart';
 export 'src/attributes/text_height_behavior/text_height_behavior_dto.dart';
 export 'src/attributes/text_style/text_style_dto.dart';
 export 'src/attributes/text_style/text_style_util.dart';
+
 /// CORE
 export 'src/core/attribute.dart';
 export 'src/core/attributes_map.dart';
@@ -71,6 +72,7 @@ export 'src/core/styled_widget.dart';
 export 'src/core/utility.dart';
 export 'src/core/variant.dart';
 export 'src/core/widget_state/widget_state_controller.dart';
+
 /// MODIFIERS
 export 'src/modifiers/align_widget_modifier.dart';
 export 'src/modifiers/aspect_ratio_widget_modifier.dart';
@@ -87,6 +89,7 @@ export 'src/modifiers/sized_box_widget_modifier.dart';
 export 'src/modifiers/transform_widget_modifier.dart';
 export 'src/modifiers/visibility_widget_modifier.dart';
 export 'src/modifiers/widget_modifiers_util.dart';
+
 /// SPECS
 export 'src/specs/box/box_spec.dart';
 export 'src/specs/box/box_widget.dart';
@@ -102,6 +105,7 @@ export 'src/specs/stack/stack_widget.dart';
 export 'src/specs/text/text_directives_util.dart';
 export 'src/specs/text/text_spec.dart';
 export 'src/specs/text/text_widget.dart';
+
 /// THEME
 export 'src/theme/material/material_theme.dart';
 export 'src/theme/material/material_tokens.dart';
@@ -114,6 +118,7 @@ export 'src/theme/tokens/space_token.dart';
 export 'src/theme/tokens/text_style_token.dart';
 export 'src/theme/tokens/token_resolver.dart';
 export 'src/theme/tokens/token_util.dart';
+
 /// VARIANTS
 export 'src/variants/context_variant.dart';
 export 'src/variants/context_variant_util/on_breakpoint_util.dart';
@@ -125,5 +130,6 @@ export 'src/variants/context_variant_util/on_platform_util.dart';
 export 'src/variants/context_variant_util/on_util.dart';
 export 'src/variants/variant_attribute.dart';
 export 'src/variants/widget_state_variant.dart';
+
 /// WIDGETS
 export 'src/widgets/pressable_widget.dart';

packages/remix/demo/lib/components/slider.dart

@@ -0,0 +1,42 @@
+import 'package:demo/helpers/use_case_state.dart';
+import 'package:flutter/widgets.dart';
+import 'package:remix/remix.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+final _key = GlobalKey();
+
+@widgetbook.UseCase(
+  name: 'Slider Component',
+  type: Slider,
+)
+Widget buildButtonUseCase(BuildContext context) {
+  final knobState = WidgetbookState.of(context);
+  return KeyedSubtree(
+    key: _key,
+    child: Scaffold(
+      body: Center(
+        child: SizedBox(
+          width: 200,
+          child: Slider(
+            onChanged: (value) => knobState.updateKnob('value', value),
+            disabled: context.knobs.boolean(
+              label: 'disabled',
+              initialValue: false,
+            ),
+            divisions: context.knobs.int.input(
+              label: 'divisions',
+              initialValue: 0,
+            ),
+            value: context.knobs.double.slider(
+              label: 'value',
+              min: 0,
+              max: 1,
+              initialValue: 0.25,
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+}

packages/remix/demo/lib/main.directories.g.dart

@@ -25,9 +25,10 @@ import 'package:demo/components/progress_use_case.dart' as _i14;
 import 'package:demo/components/radio_use_case.dart' as _i15;
 import 'package:demo/components/segmented_control_use_case.dart' as _i16;
 import 'package:demo/components/select_use_case.dart' as _i17;
-import 'package:demo/components/spinner_use_case.dart' as _i18;
-import 'package:demo/components/switch_use_case.dart' as _i19;
-import 'package:demo/components/toast_use_case.dart' as _i20;
+import 'package:demo/components/slider.dart' as _i18;
+import 'package:demo/components/spinner_use_case.dart' as _i19;
+import 'package:demo/components/switch_use_case.dart' as _i20;
+import 'package:demo/components/toast_use_case.dart' as _i21;
 import 'package:widgetbook/widgetbook.dart' as _i1;
 
 final directories = <_i1.WidgetbookNode>[
@@ -226,14 +227,26 @@ final directories = <_i1.WidgetbookNode>[
           )
         ],
       ),
+      _i1.WidgetbookFolder(
+        name: 'slider',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'Slider',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'Slider Component',
+              builder: _i18.buildButtonUseCase,
+            ),
+          )
+        ],
+      ),
       _i1.WidgetbookFolder(
         name: 'spinner',
         children: [
           _i1.WidgetbookLeafComponent(
             name: 'Spinner',
             useCase: _i1.WidgetbookUseCase(
               name: 'Spinner Component',
-              builder: _i18.buildSpinnerUseCase,
+              builder: _i19.buildSpinnerUseCase,
             ),
           )
         ],
@@ -245,7 +258,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'Switch',
             useCase: _i1.WidgetbookUseCase(
               name: 'Switch Component',
-              builder: _i19.buildSwitchUseCase,
+              builder: _i20.buildSwitchUseCase,
             ),
           )
         ],
@@ -257,7 +270,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'Toast',
             useCase: _i1.WidgetbookUseCase(
               name: 'Toast Component',
-              builder: _i20.buildButtonUseCase,
+              builder: _i21.buildButtonUseCase,
             ),
           )
         ],

packages/remix/lib/remix.dart

@@ -39,6 +39,7 @@ export 'src/components/radio/radio.dart';
 export 'src/components/scaffold/scaffold.dart';
 export 'src/components/segmented_control/segmented_control.dart';
 export 'src/components/select/select.dart';
+export 'src/components/slider/slider.dart';
 export 'src/components/spinner/spinner.dart';
 export 'src/components/switch/switch.dart';
 export 'src/components/toast/toast.dart';

packages/remix/lib/src/components/chip/chip_style.dart

@@ -23,12 +23,8 @@ class ChipStyle extends SpecStyle<ChipSpecUtility> {
 
     final labelStyle = [
       $.label.chain
-        ..textHeightBehavior(
-          const TextHeightBehavior(
-            applyHeightToFirstAscent: false,
-            applyHeightToLastDescent: true,
-          ),
-        )
+        ..textHeightBehavior.heightToFirstAscent.off()
+        ..textHeightBehavior.heightToLastDescent.on()
         ..style.fontSize(14)
         ..style.height(1.5)
         ..style.color.black()

packages/remix/lib/src/components/slider/slider.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:mix/mix.dart';
+import 'package:mix_annotations/mix_annotations.dart';
+
+import '../../theme/remix_theme.dart';
+import '../../theme/remix_tokens.dart';
+
+part 'slider.g.dart';
+part 'slider_style.dart';
+part 'slider_theme.dart';
+part 'slider_widget.dart';
+
+@MixableSpec()
+class SliderSpec extends Spec<SliderSpec> with _$SliderSpec, Diagnosticable {
+  final BoxSpec thumb;
+  final BoxSpec track;
+  final BoxSpec activeTrack;
+  final BoxSpec division;
+
+  /// {@macro button_spec_of}
+  static const of = _$SliderSpec.of;
+
+  static const from = _$SliderSpec.from;
+
+  SliderSpec({
+    BoxSpec? thumb,
+    BoxSpec? track,
+    BoxSpec? activeTrack,
+    BoxSpec? division,
+    super.modifiers,
+    super.animated,
+  })  : thumb = thumb ?? const BoxSpec(),
+        track = track ?? const BoxSpec(),
+        activeTrack = activeTrack ?? const BoxSpec(),
+        division = division ?? const BoxSpec();
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    _debugFillProperties(properties);
+  }
+}