Rewrite radio in the new architecture

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

@@ -1,33 +1,20 @@
+import 'package:demo/helpers/string.dart';
 import 'package:flutter/material.dart';
 import 'package:remix/components/radio/radio.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
 final _key = GlobalKey();
 
-enum RadioType {
-  solid,
-  outline,
-  soft,
-  surface;
-
-  RadioVariant get variant {
-    switch (this) {
-      case RadioType.solid:
-        return RadioVariant.solid;
-      case RadioType.outline:
-        return RadioVariant.outline;
-      case RadioType.soft:
-        return RadioVariant.soft;
-      case RadioType.surface:
-        return RadioVariant.surface;
-    }
-  }
+enum Theme {
+  dark,
+  light,
+  system,
 }
 
 @widgetbook.UseCase(
   name: 'Radio Component',
-  type: RxRadio,
+  type: XRadio,
 )
 Widget buildRadioUseCase(BuildContext context) {
   return const RadioExample();
@@ -41,7 +28,7 @@ class RadioExample extends StatefulWidget {
 }
 
 class _RadioExampleState extends State<RadioExample> {
-  RadioType? _type = RadioType.outline;
+  Theme _theme = Theme.dark;
 
   @override
   Widget build(BuildContext context) {
@@ -51,38 +38,27 @@ class _RadioExampleState extends State<RadioExample> {
         mainAxisSize: MainAxisSize.min,
         key: _key,
         children: <Widget>[
-          for (var type in RadioType.values)
+          for (var theme in Theme.values) ...[
             Row(
               children: [
-                RxRadio<RadioType>(
-                  value: type,
-                  groupValue: _type,
-                  variant: type.variant,
-                  onChanged: (RadioType? value) {
+                XRadio<Theme>(
+                  value: theme,
+                  groupValue: _theme,
+                  onChanged: (Theme? value) {
                     setState(() {
-                      _type = value;
+                      _theme = value!;
                     });
                   },
-                  size: context.knobs.list(
-                    label: 'Size',
-                    options: RadioSize.values,
-                    initialOption: RadioSize.medium,
-                    labelBuilder: (value) => value.label,
-                  ),
                   disabled: context.knobs.boolean(
                     label: 'Disabled',
                     initialValue: false,
                   ),
-                ),
-                const SizedBox(width: 16, height: 30),
-                Text(
-                  type.name,
-                  style: const TextStyle(
-                    fontSize: 16,
-                  ),
+                  text: theme.name.capitalize(),
                 ),
               ],
             ),
+            const SizedBox(height: 8),
+          ]
         ],
       ),
     );

packages/remix/demo/lib/helpers/string.dart

@@ -0,0 +1,5 @@
+extension StringExtension on String {
+  String capitalize() {
+    return "${this[0].toUpperCase()}${substring(1).toLowerCase()}";
+  }
+}

packages/remix/lib/components/radio/radio.dart

@@ -5,19 +5,16 @@ import 'package:mix/mix.dart';
 import 'package:mix_annotations/mix_annotations.dart';
 import '../../helpers/utility_extension.dart';
 
-import '../../helpers/variant.dart';
-import '../../tokens/remix_tokens.dart';
-
 part 'radio.g.dart';
 part 'radio_style.dart';
-part 'radio_variants.dart';
 part 'radio_widget.dart';
-part 'radio_blank.dart';
 
 @MixableSpec()
 base class RadioSpec extends Spec<RadioSpec> with _$RadioSpec, Diagnosticable {
   final BoxSpec container;
   final BoxSpec indicator;
+  final FlexSpec flex;
+  final TextSpec text;
 
   /// {@macro radio_spec_of}
   static const of = _$RadioSpec.of;
@@ -27,10 +24,14 @@ base class RadioSpec extends Spec<RadioSpec> with _$RadioSpec, Diagnosticable {
   const RadioSpec({
     BoxSpec? container,
     BoxSpec? indicator,
+    FlexSpec? flex,
+    TextSpec? text,
     super.modifiers,
     super.animated,
   })  : container = container ?? const BoxSpec(),
-        indicator = indicator ?? const BoxSpec();
+        indicator = indicator ?? const BoxSpec(),
+        text = text ?? const TextSpec(),
+        flex = flex ?? const FlexSpec();
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {