create AttributeBridge

packages/mix/lib/src/core/styled_widget.dart

@@ -3,10 +3,12 @@ import 'package:flutter/widgets.dart';
 import '../modifiers/internal/render_widget_modifier.dart';
 import '../variants/widget_state_variant.dart';
 import '../widgets/pressable_widget.dart';
+import 'attribute.dart';
 import 'factory/mix_data.dart';
 import 'factory/mix_provider.dart';
 import 'factory/style_mix.dart';
 import 'modifier.dart';
+import 'spec.dart';
 import 'widget_state/widget_state_controller.dart';
 
 /// An abstract widget for applying custom styles.
@@ -150,3 +152,32 @@ class SpecBuilder extends StatelessWidget {
     return current;
   }
 }
+
+/// A widget that bridges a complex attribute to a simpler one.
+///
+/// [AttributeBridge] acts as a link between a complex attribute not directly
+/// supported by another widget and simplifies it into a basic attribute that
+/// can be used by a specific widget. This is particularly useful when creating
+/// custom styled widgets.
+class AttributeBridge<T extends SpecAttribute> extends StatelessWidget {
+  const AttributeBridge({
+    super.key,
+    required this.child,
+    required this.bridgeBuilder,
+  });
+
+  final Attribute Function(T?) bridgeBuilder;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    final data = Mix.maybeOfInherited(context);
+    final attribute = data?.attributeOf<T>();
+
+    return SpecBuilder(
+      inherit: true,
+      style: Style(bridgeBuilder(attribute)),
+      builder: (context) => child,
+    );
+  }
+}

packages/remix/demo/.gitignore

@@ -5,9 +5,11 @@
 *.swp
 .DS_Store
 .atom/
+.build/
 .buildlog/
 .history
 .svn/
+.swiftpm/
 migrate_working_dir/
 
 # IntelliJ related

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

@@ -1,4 +1,5 @@
 import 'package:flutter/widgets.dart';
+import 'package:mix/mix.dart';
 import 'package:remix/remix.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
@@ -10,14 +11,15 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 Widget buildDivider(BuildContext context) {
   return Center(
     child: SizedBox(
-      height: 100,
-      width: 100,
+      height: 200,
+      width: 200,
       child: Center(
         child: Divider(
           axis: context.knobs.list(
             label: 'Axis',
             options: [Axis.horizontal, Axis.vertical],
           ),
+          child: const StyledText('Divider'),
         ),
       ),
     ),

packages/remix/demo/macos/Flutter/ephemeral/.app_filename

@@ -0,0 +1 @@
+demo.app

packages/remix/demo/macos/Flutter/ephemeral/Flutter-Generated.xcconfig

@@ -0,0 +1,12 @@
+// This is a generated file; do not edit or check into version control.
+FLUTTER_ROOT=/Users/lucasoliveira/fvm/versions/stable
+FLUTTER_APPLICATION_PATH=/Users/lucasoliveira/Developer/mix/packages/remix/demo
+COCOAPODS_PARALLEL_CODE_SIGN=true
+FLUTTER_TARGET=/Users/lucasoliveira/Developer/mix/packages/remix/demo/lib/main.dart
+FLUTTER_BUILD_DIR=build
+FLUTTER_BUILD_NAME=1.0.0
+FLUTTER_BUILD_NUMBER=1
+DART_OBFUSCATION=false
+TRACK_WIDGET_CREATION=true
+TREE_SHAKE_ICONS=false
+PACKAGE_CONFIG=/Users/lucasoliveira/Developer/mix/packages/remix/demo/.dart_tool/package_config.json

packages/remix/demo/macos/Flutter/ephemeral/FlutterOutputs.xcfilelist

@@ -0,0 +1,32 @@
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/App
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/Info.plist
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/AssetManifest.bin
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/AssetManifest.json
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/FontManifest.json
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/NOTICES.Z
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/fonts/MaterialIcons-Regular.otf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/isolate_snapshot_data
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/kernel_blob.bin
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/cupertino_icons/assets/CupertinoIcons.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-Black.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-BlackItalic.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-Bold.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-BoldItalic.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-ExtraBold.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-ExtraBoldItalic.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-ExtraLight.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-ExtraLightItalic.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-Italic.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-Light.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-LightItalic.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-Medium.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-MediumItalic.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-Regular.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-SemiBold.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-SemiBoldItalic.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-Thin.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/fonts/Poppins/Poppins-ThinItalic.ttf
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/packages/widgetbook/assets/logo.png
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/shaders/ink_sparkle.frag
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/App.framework/Versions/A/Resources/flutter_assets/vm_snapshot_data
+/Users/lucasoliveira/Developer/mix/packages/remix/demo/build/macos/Build/Products/Debug/FlutterMacOS.framework/Versions/A/FlutterMacOS

packages/remix/demo/macos/Flutter/ephemeral/flutter_export_environment.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+# This is a generated file; do not edit or check into version control.
+export "FLUTTER_ROOT=/Users/lucasoliveira/fvm/versions/stable"
+export "FLUTTER_APPLICATION_PATH=/Users/lucasoliveira/Developer/mix/packages/remix/demo"
+export "COCOAPODS_PARALLEL_CODE_SIGN=true"
+export "FLUTTER_TARGET=/Users/lucasoliveira/Developer/mix/packages/remix/demo/lib/main.dart"
+export "FLUTTER_BUILD_DIR=build"
+export "FLUTTER_BUILD_NAME=1.0.0"
+export "FLUTTER_BUILD_NUMBER=1"
+export "DART_OBFUSCATION=false"
+export "TRACK_WIDGET_CREATION=true"
+export "TREE_SHAKE_ICONS=false"
+export "PACKAGE_CONFIG=/Users/lucasoliveira/Developer/mix/packages/remix/demo/.dart_tool/package_config.json"

packages/remix/demo/macos/Runner/AppDelegate.swift

@@ -6,4 +6,8 @@ class AppDelegate: FlutterAppDelegate {
   override func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool {
     return true
   }
+
+  override func applicationSupportsSecureRestorableState(_ app: NSApplication) -> Bool {
+    return true
+  }
 }

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

@@ -15,14 +15,23 @@ part 'divider_widget.dart';
 base class DividerSpec extends Spec<DividerSpec>
     with _$DividerSpec, Diagnosticable {
   final BoxSpec container;
+  final FlexSpec flex;
+  final TextSpec label;
 
   /// {@macro progress_spec_of}
   static const of = _$DividerSpec.of;
 
   static const from = _$DividerSpec.from;
 
-  const DividerSpec({BoxSpec? container, super.animated, super.modifiers})
-      : container = container ?? const BoxSpec();
+  const DividerSpec({
+    BoxSpec? container,
+    FlexSpec? flex,
+    TextSpec? label,
+    super.animated,
+    super.modifiers,
+  })  : container = container ?? const BoxSpec(),
+        flex = flex ?? const FlexSpec(),
+        label = label ?? const TextSpec();
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {

packages/remix/lib/src/components/divider/divider_style.dart

@@ -18,6 +18,17 @@ class DividerStyle extends SpecStyle<DividerSpecUtility> {
       vertical($.container.width(1)),
     ];
 
-    return Style.create([...containerStyle]);
+    final flexStyle = [
+      $.flex.chain
+        ..crossAxisAlignment.center
+        ..mainAxisAlignment.center
+        ..gap(8),
+      horizontal($.flex.row()),
+      vertical($.flex.column()),
+    ];
+
+    final labelStyle = $.label.chain..style.fontSize(14);
+
+    return Style.create([...containerStyle, ...flexStyle, labelStyle]);
   }
 }

packages/remix/lib/src/components/divider/divider_theme.dart

@@ -9,7 +9,16 @@ class FortalezaDividerStyle extends DividerStyle {
 
     final baseStyle = super.makeStyle(spec);
     final containerStyle = [$.container.color.$neutral(5)];
+    final labelStyle = $.label.chain
+      ..style.color.$neutral(10)
+      ..style.fontSize(14)
+      ..textHeightBehavior(
+        const TextHeightBehavior(
+          applyHeightToFirstAscent: false,
+          applyHeightToLastDescent: false,
+        ),
+      );
 
-    return Style.create([baseStyle(), ...containerStyle]);
+    return Style.create([baseStyle(), ...containerStyle, labelStyle]);
   }
 }

packages/remix/lib/src/components/divider/divider_widget.dart

@@ -6,8 +6,10 @@ class Divider extends StatelessWidget {
     this.style,
     this.variants = const [],
     this.axis = Axis.horizontal,
+    this.child,
   });
 
+  final Widget? child;
   final DividerStyle? style;
   final Axis axis;
   final List<Variant> variants;
@@ -20,14 +22,29 @@ class Divider extends StatelessWidget {
         : DividerStyle.vertical;
 
     final configuration = SpecConfiguration(context, DividerSpecUtility.self);
+    final styleA = style
+        .makeStyle(configuration)
+        .applyVariants([...variants, axisVariant]);
 
     return SpecBuilder(
-      style: style
-          .makeStyle(configuration)
-          .applyVariants([...variants, axisVariant]),
+      style: styleA,
       builder: (context) {
         final spec = DividerSpec.of(context);
 
+        if (child != null) {
+          return spec.flex(
+            direction: axis,
+            children: [
+              Expanded(child: spec.container()),
+              AttributeBridge<DividerSpecAttribute>(
+                bridgeBuilder: (attribute) => attribute!.label!,
+                child: child!,
+              ),
+              Expanded(child: spec.container()),
+            ],
+          );
+        }
+
         return spec.container();
       },
     );