feat: Chip component

.fvmrc

@@ -1,5 +1,5 @@
 {
-  "flutter": "3.19.0",
+  "flutter": "stable",
   "flavors": {
     "prod": "stable",
     "mincompat": "3.19.0"

.vscode/settings.json

@@ -4,7 +4,7 @@
     "source.fixAll": "explicit",
     "source.dcm.fixAll": "explicit"
   },
-  "dart.flutterSdkPath": ".fvm/versions/3.19.0",
+  "dart.flutterSdkPath": ".fvm/versions/stable",
   "dart.lineLength": 80,
   "search.exclude": {
     "**/.fvm/versions": true

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

@@ -0,0 +1,48 @@
+import 'package:demo/addons/icon_data_knob.dart';
+import 'package:demo/helpers/knob_builder.dart';
+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: 'Chip Component',
+  type: Chip,
+)
+Widget buildChipUseCase(BuildContext context) {
+  final knobState = WidgetbookState.of(context);
+
+  return KeyedSubtree(
+    key: _key,
+    child: Scaffold(
+      body: Center(
+        child: Chip(
+          value: context.knobs.boolean(label: 'Checked', initialValue: true),
+          onChanged: (value) => knobState.updateKnob('Checked', value),
+          variants: [
+            context.knobs.variant(FortalezaChipStyle.variants),
+          ],
+          label: context.knobs.string(
+            label: 'Label',
+            initialValue: 'Chip',
+          ),
+          disabled: context.knobs.boolean(
+            label: 'Disabled',
+            initialValue: false,
+          ),
+          iconLeft: context.knobs.iconData(
+            label: 'Icon left',
+            initialValue: null,
+          ),
+          iconRight: context.knobs.iconData(
+            label: 'Icon right',
+            initialValue: null,
+          ),
+        ),
+      ),
+    ),
+  );
+}

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

@@ -16,16 +16,17 @@ import 'package:demo/components/button_use_case.dart' as _i5;
 import 'package:demo/components/callout_use_case.dart' as _i6;
 import 'package:demo/components/card_use_case.dart' as _i7;
 import 'package:demo/components/checkbox_use_case.dart' as _i8;
-import 'package:demo/components/dialog_use_case.dart' as _i9;
-import 'package:demo/components/divider_use_case.dart' as _i10;
-import 'package:demo/components/icon_button_use_case.dart' as _i11;
-import 'package:demo/components/progress_use_case.dart' as _i12;
-import 'package:demo/components/radio_use_case.dart' as _i13;
-import 'package:demo/components/segmented_control_use_case.dart' as _i14;
-import 'package:demo/components/select_use_case.dart' as _i15;
-import 'package:demo/components/spinner_use_case.dart' as _i16;
-import 'package:demo/components/switch_use_case.dart' as _i17;
-import 'package:demo/components/toast_use_case.dart' as _i18;
+import 'package:demo/components/chip_use_case.dart' as _i9;
+import 'package:demo/components/dialog_use_case.dart' as _i10;
+import 'package:demo/components/divider_use_case.dart' as _i11;
+import 'package:demo/components/icon_button_use_case.dart' as _i12;
+import 'package:demo/components/progress_use_case.dart' as _i13;
+import 'package:demo/components/radio_use_case.dart' as _i14;
+import 'package:demo/components/segmented_control_use_case.dart' as _i15;
+import 'package:demo/components/select_use_case.dart' as _i16;
+import 'package:demo/components/spinner_use_case.dart' as _i17;
+import 'package:demo/components/switch_use_case.dart' as _i18;
+import 'package:demo/components/toast_use_case.dart' as _i19;
 import 'package:widgetbook/widgetbook.dart' as _i1;
 
 final directories = <_i1.WidgetbookNode>[
@@ -116,14 +117,26 @@ final directories = <_i1.WidgetbookNode>[
           )
         ],
       ),
+      _i1.WidgetbookFolder(
+        name: 'chip',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'Chip',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'Chip Component',
+              builder: _i9.buildChipUseCase,
+            ),
+          )
+        ],
+      ),
       _i1.WidgetbookFolder(
         name: 'dialog',
         children: [
           _i1.WidgetbookLeafComponent(
             name: 'Dialog',
             useCase: _i1.WidgetbookUseCase(
               name: 'Dialog Component',
-              builder: _i9.buildButtonUseCase,
+              builder: _i10.buildButtonUseCase,
             ),
           )
         ],
@@ -135,7 +148,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'Divider',
             useCase: _i1.WidgetbookUseCase(
               name: 'Divider Component',
-              builder: _i10.buildDivider,
+              builder: _i11.buildDivider,
             ),
           )
         ],
@@ -147,7 +160,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'IconButton',
             useCase: _i1.WidgetbookUseCase(
               name: 'Button Component',
-              builder: _i11.buildButtonUseCase,
+              builder: _i12.buildButtonUseCase,
             ),
           )
         ],
@@ -159,7 +172,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'Progress',
             useCase: _i1.WidgetbookUseCase(
               name: 'Progress Component',
-              builder: _i12.buildProgressUseCase,
+              builder: _i13.buildProgressUseCase,
             ),
           )
         ],
@@ -171,7 +184,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'Radio',
             useCase: _i1.WidgetbookUseCase(
               name: 'Radio Component',
-              builder: _i13.buildRadioUseCase,
+              builder: _i14.buildRadioUseCase,
             ),
           )
         ],
@@ -183,7 +196,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'SegmentedControl',
             useCase: _i1.WidgetbookUseCase(
               name: 'SegmentedControl Component',
-              builder: _i14.buildAccordionUseCase,
+              builder: _i15.buildAccordionUseCase,
             ),
           )
         ],
@@ -195,7 +208,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'Select',
             useCase: _i1.WidgetbookUseCase(
               name: 'Select Component',
-              builder: _i15.buildSelect,
+              builder: _i16.buildSelect,
             ),
           )
         ],
@@ -207,7 +220,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'Spinner',
             useCase: _i1.WidgetbookUseCase(
               name: 'Spinner Component',
-              builder: _i16.buildSpinnerUseCase,
+              builder: _i17.buildSpinnerUseCase,
             ),
           )
         ],
@@ -219,7 +232,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'Switch',
             useCase: _i1.WidgetbookUseCase(
               name: 'Switch Component',
-              builder: _i17.buildSwitchUseCase,
+              builder: _i18.buildSwitchUseCase,
             ),
           )
         ],
@@ -231,7 +244,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'Toast',
             useCase: _i1.WidgetbookUseCase(
               name: 'Toast Component',
-              builder: _i18.buildButtonUseCase,
+              builder: _i19.buildButtonUseCase,
             ),
           )
         ],

packages/remix/lib/remix.dart

@@ -1,15 +1,15 @@
-///   /\\\\            /\\\\  /\\\\\\\\\\\  /\\\       /\\\
-///   \/\\\\\\        /\\\\\\ \/////\\\///  \///\\\   /\\\/
-///    \/\\\//\\\    /\\\//\\\     \/\\\       \///\\\\\\/
-///     \/\\\\///\\\/\\\/ \/\\\     \/\\\         \//\\\\
-///      \/\\\  \///\\\/   \/\\\     \/\\\          \/\\\\
-///       \/\\\    \///     \/\\\     \/\\\          /\\\\\\
-///        \/\\\             \/\\\     \/\\\        /\\\////\\\
-///         \/\\\             \/\\\  /\\\\\\\\\\\  /\\\/   \///\\\
-///          \///              \///  \///////////  \///       \///
-///
-///                        https://fluttermix.com
+///   /\\\\            /\\\\  /\\\\\\\\\\\  /\\\       /\\\              
+///   \/\\\\\\        /\\\\\\ \/////\\\///  \///\\\   /\\\/  
+///    \/\\\//\\\    /\\\//\\\     \/\\\       \///\\\\\\/    
+///     \/\\\\///\\\/\\\/ \/\\\     \/\\\         \//\\\\      
+///      \/\\\  \///\\\/   \/\\\     \/\\\          \/\\\\      
+///       \/\\\    \///     \/\\\     \/\\\          /\\\\\\     
+///        \/\\\             \/\\\     \/\\\        /\\\////\\\   
+///         \/\\\             \/\\\  /\\\\\\\\\\\  /\\\/   \///\\\ 
+///          \///              \///  \///////////  \///       \/// 
 ///
+///                        https://fluttermix.com 
+/// 
 ///             /\///////////////////////////////////////////////////\
 ///             \/\           ***** GENERATED CODE *****            \ \
 ///              \/\            ** DO NOT EDIT THIS FILE **          \ \
@@ -20,7 +20,6 @@ library remix;
 
 /// APP
 export 'src/app/remix_app.dart';
-
 /// COMPONENTS
 export 'src/components/accordion/accordion.dart';
 export 'src/components/avatar/avatar.dart';
@@ -30,28 +29,25 @@ export 'src/components/callout/callout.dart';
 export 'src/components/card/card.dart';
 export 'src/components/checkbox/checkbox.dart';
 export 'src/components/checkbox_group/checkbox_group.dart';
+export 'src/components/chip/chip.dart';
 export 'src/components/dialog/dialog.dart';
 export 'src/components/divider/divider.dart';
 export 'src/components/icon_button/icon_button.dart';
 export 'src/components/progress/progress.dart';
 export 'src/components/radio/radio.dart';
-
-/// LAYOUT
 export 'src/components/scaffold/scaffold.dart';
 export 'src/components/segmented_control/segmented_control.dart';
 export 'src/components/select/select.dart';
 export 'src/components/spinner/spinner.dart';
 export 'src/components/switch/switch.dart';
 export 'src/components/toast/toast.dart';
-
 /// HELPERS
 export 'src/helpers/color_palette.dart';
 export 'src/helpers/color_utils.dart';
 export 'src/helpers/component_builder.dart';
 export 'src/helpers/context_ext.dart';
 export 'src/helpers/spec/composited_transform_follower_spec.dart';
 export 'src/helpers/utility_extension.dart';
-
 /// THEME
 export 'src/theme/remix_theme.dart';
 export 'src/theme/remix_tokens.dart';

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

@@ -0,0 +1,45 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+import 'package:mix/mix.dart';
+import 'package:mix_annotations/mix_annotations.dart';
+
+import '../../theme/remix_theme.dart';
+import '../../theme/remix_tokens.dart';
+
+part 'chip.g.dart';
+
+part 'chip_style.dart';
+part 'chip_theme.dart';
+part 'chip_widget.dart';
+
+@MixableSpec()
+class ChipSpec extends Spec<ChipSpec> with _$ChipSpec, Diagnosticable {
+  final FlexSpec flex;
+  final BoxSpec container;
+  final IconSpec icon;
+  final TextSpec label;
+
+  /// {@macro button_spec_of}
+  static const of = _$ChipSpec.of;
+
+  static const from = _$ChipSpec.from;
+
+  const ChipSpec({
+    BoxSpec? container,
+    FlexSpec? flex,
+    IconSpec? icon,
+    TextSpec? label,
+    super.modifiers,
+    super.animated,
+  })  : flex = flex ?? const FlexSpec(),
+        container = container ?? const BoxSpec(),
+        icon = icon ?? const IconSpec(),
+        label = label ?? const TextSpec();
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    _debugFillProperties(properties);
+  }
+}