refactor: Component style cleanup and codebase reorganization

packages/remix/analysis_options.yaml

@@ -58,6 +58,8 @@ analyzer:
 
 linter:
   rules:
-    # TODO: Turn this to true when all public apis are documented 
+    # TODO: Turn this to true when all public apis are documented
     public_member_api_docs: false
     prefer_relative_imports: true
+    # Enforce import ordering for consistency
+    directives_ordering: true

packages/remix/lib/remix.dart

@@ -1,16 +1,20 @@
 library remix;
 
+/// EXTERNAL DEPENDENCIES
+export 'package:mix/mix.dart';
+export 'package:naked_ui/naked_ui.dart' show OverlayPositionConfig;
+
 /// COMPONENTS
 export 'src/components/accordion/accordion.dart';
 export 'src/components/avatar/avatar.dart';
 export 'src/components/badge/badge.dart';
 export 'src/components/button/button.dart';
 export 'src/components/callout/callout.dart';
-export 'src/components/dialog/dialog.dart';
-export 'src/components/icon_button/icon_button.dart';
 export 'src/components/card/card.dart';
 export 'src/components/checkbox/checkbox.dart';
+export 'src/components/dialog/dialog.dart';
 export 'src/components/divider/divider.dart';
+export 'src/components/icon_button/icon_button.dart';
 export 'src/components/menu/menu.dart';
 export 'src/components/progress/progress.dart';
 export 'src/components/radio/radio.dart';
@@ -22,10 +26,7 @@ export 'src/components/tabs/tabs.dart';
 export 'src/components/textfield/textfield.dart';
 export 'src/components/tooltip/tooltip.dart';
 
-/// EXTERNAL DEPENDENCIES
-export 'package:mix/mix.dart';
-export 'package:naked_ui/naked_ui.dart' show OverlayPositionConfig;
-
 /// THEME
-export 'src/theme/remix_theme.dart';
 export 'src/fortal/fortal.dart';
+export 'src/theme/animation_constants.dart';
+export 'src/theme/remix_theme.dart';

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

@@ -7,6 +7,7 @@ import 'package:mix/mix.dart';
 import 'package:naked_ui/naked_ui.dart';
 
 import '../../fortal/fortal.dart';
+import '../../theme/animation_constants.dart';
 import '../../utilities/remix_style.dart';
 
 part 'accordion_spec.dart';

packages/remix/lib/src/components/accordion/accordion_widget.dart

@@ -190,14 +190,15 @@ class RemixAccordion<T> extends StatelessWidget {
         final child = isExpanded
             ? StyleBuilder(
                 style: style,
+                controller: NakedAccordionItemState.controllerOf(context),
                 builder: (context, spec) {
                   return Box(styleSpec: spec.content, child: panel);
                 },
               )
             : const SizedBox.shrink();
 
         return AnimatedSwitcher(
-          duration: const Duration(milliseconds: 200),
+          duration: RemixAnimationDurations.normal,
           transitionBuilder: transitionBuilder,
           child: child,
         );

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

@@ -4,9 +4,9 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
+import '../../fortal/fortal.dart';
 import '../../style/style.dart';
 import '../../utilities/remix_style.dart';
-import '../../fortal/fortal.dart';
 
 part 'avatar_spec.dart';
 part 'avatar_style.dart';

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

@@ -4,9 +4,9 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
+import '../../fortal/fortal.dart';
 import '../../style/style.dart';
 import '../../utilities/remix_style.dart';
-import '../../fortal/fortal.dart';
 
 part 'badge_spec.dart';
 part 'badge_style.dart';

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

@@ -8,6 +8,7 @@ import 'package:naked_ui/naked_ui.dart';
 
 import '../../fortal/fortal.dart';
 import '../../style/style.dart';
+import '../../theme/animation_constants.dart';
 import '../../utilities/remix_style.dart';
 import '../spinner/spinner.dart';
 

packages/remix/lib/src/components/button/button_widget.dart

@@ -217,7 +217,7 @@ class RemixButton extends StatelessWidget {
               children: rowChildren,
             );
 
-            // Layer spinner above the content while keeping size stable.
+            // Layer spinner above the content while keeping size stable
             final layered = Stack(
               alignment: Alignment.center,
               children: [contentRow, if (loading) spinner],
@@ -229,7 +229,13 @@ class RemixButton extends StatelessWidget {
                 liveRegion: loading,
                 label: semanticLabel ?? label,
                 hint: semanticHint,
-                child: layered,
+                child: onDoubleTap != null
+                    ? GestureDetector(
+                        behavior: HitTestBehavior.opaque,
+                        onDoubleTap: _isEnabled ? onDoubleTap : null,
+                        child: layered,
+                      )
+                    : layered,
               ),
             );
           },

packages/remix/lib/src/components/button/fortal_button_styles.dart

@@ -39,7 +39,7 @@ class FortalButtonStyle {
         .spinner(
           RemixSpinnerStyle(
             strokeWidth: FortalTokens.borderWidth2(),
-            duration: const Duration(milliseconds: 800),
+            duration: RemixAnimationDurations.slow,
           ),
         )
         // Focus ring (generic)

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

@@ -4,10 +4,10 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
+import '../../fortal/fortal.dart';
 import '../../style/mixins/styled_text_style_mixin.dart';
 import '../../style/style.dart';
 import '../../utilities/remix_style.dart';
-import '../../fortal/fortal.dart';
 
 part 'callout_spec.dart';
 part 'callout_style.dart';

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

@@ -4,8 +4,8 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
-import '../../utilities/remix_style.dart';
 import '../../fortal/fortal.dart';
+import '../../utilities/remix_style.dart';
 
 part 'card_spec.dart';
 part 'card_style.dart';

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

@@ -7,6 +7,7 @@ import 'package:mix/mix.dart';
 import 'package:naked_ui/naked_ui.dart';
 
 import '../../fortal/fortal.dart';
+import '../../theme/animation_constants.dart';
 import '../../utilities/remix_style.dart';
 
 part 'dialog_spec.dart';

packages/remix/lib/src/components/dialog/dialog_widget.dart

@@ -32,7 +32,7 @@ Future<T?> showRemixDialog<T>({
   bool useRootNavigator = true,
   RouteSettings? routeSettings,
   Offset? anchorPoint,
-  Duration transitionDuration = const Duration(milliseconds: 400),
+  Duration transitionDuration = RemixAnimationDurations.moderate,
   RouteTransitionsBuilder? transitionBuilder,
   bool requestFocus = true,
   TraversalEdgeBehavior? traversalEdgeBehavior,

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

@@ -4,8 +4,8 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
-import '../../utilities/remix_style.dart';
 import '../../fortal/fortal.dart';
+import '../../utilities/remix_style.dart';
 
 part 'divider_spec.dart';
 part 'divider_style.dart';

packages/remix/lib/src/components/icon_button/fortal_icon_button_styles.dart

@@ -37,7 +37,7 @@ class FortalIconButtonStyle {
         .spinner(
           RemixSpinnerStyle(
             strokeWidth: FortalTokens.borderWidth2(),
-            duration: const Duration(milliseconds: 800),
+            duration: RemixAnimationDurations.slow,
           ),
         )
         // Focus ring (generic)

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

@@ -5,10 +5,11 @@ import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 import 'package:naked_ui/naked_ui.dart';
 
+import '../../fortal/fortal.dart';
 import '../../style/style.dart';
+import '../../theme/animation_constants.dart';
 import '../../utilities/remix_style.dart';
 import '../spinner/spinner.dart';
-import '../../fortal/fortal.dart';
 
 part 'icon_button_spec.dart';
 part 'icon_button_style.dart';

packages/remix/lib/src/components/icon_button/icon_button_widget.dart

@@ -145,17 +145,14 @@ class RemixIconButton extends StatelessWidget {
           style: style,
           controller: NakedState.controllerOf(context),
           builder: (context, spec) {
-            Widget? iconWidget;
-
-            if (iconBuilder != null) {
-              iconWidget = StyleSpecBuilder(
-                styleSpec: spec.icon,
-                builder: (context, iconSpec) =>
-                    iconBuilder!(context, iconSpec, icon),
-              );
-            } else {
-              iconWidget = StyledIcon(icon: icon, styleSpec: spec.icon);
-            }
+            // Build icon widget
+            final iconWidget = iconBuilder != null
+                ? StyleSpecBuilder(
+                    styleSpec: spec.icon,
+                    builder: (context, iconSpec) =>
+                        iconBuilder!(context, iconSpec, icon),
+                  )
+                : StyledIcon(icon: icon, styleSpec: spec.icon);
 
             // Build spinner (used when loading)
             final spinner = Center(
@@ -176,7 +173,7 @@ class RemixIconButton extends StatelessWidget {
               child: iconWidget,
             );
 
-            // Layer spinner above the content while keeping size stable.
+            // Layer spinner above the icon while keeping size stable
             final layered = Stack(
               alignment: Alignment.center,
               children: [content, if (loading) spinner],
@@ -188,7 +185,16 @@ class RemixIconButton extends StatelessWidget {
                 liveRegion: loading,
                 label: semanticLabel ?? 'Icon Button',
                 hint: semanticHint,
-                child: Box(styleSpec: spec.container, child: layered),
+                child: Box(
+                  styleSpec: spec.container,
+                  child: onDoubleTap != null
+                      ? GestureDetector(
+                          behavior: HitTestBehavior.opaque,
+                          onDoubleTap: _isEnabled ? onDoubleTap : null,
+                          child: layered,
+                        )
+                      : layered,
+                ),
               ),
             );
           },

packages/remix/lib/src/components/menu/menu_widget.dart

@@ -192,6 +192,18 @@ class RemixMenu<T> extends StatelessWidget {
     final effectiveController = controller ?? MenuController();
 
     return NakedMenu<T>(
+      controller: effectiveController,
+      onSelected: onSelected,
+      onOpen: onOpen,
+      onClose: onClose,
+      onCanceled: onCanceled,
+      onOpenRequested: onOpenRequested,
+      onCloseRequested: onCloseRequested,
+      consumeOutsideTaps: consumeOutsideTaps,
+      useRootOverlay: useRootOverlay,
+      closeOnClickOutside: closeOnClickOutside,
+      triggerFocusNode: triggerFocusNode,
+      positioning: positioning,
       // Render items list with direct spec passing
       overlayBuilder: (context, info) {
         return StyleBuilder(
@@ -212,18 +224,6 @@ class RemixMenu<T> extends StatelessWidget {
           },
         );
       },
-      controller: effectiveController,
-      onSelected: onSelected,
-      onOpen: onOpen,
-      onClose: onClose,
-      onCanceled: onCanceled,
-      onOpenRequested: onOpenRequested,
-      onCloseRequested: onCloseRequested,
-      consumeOutsideTaps: consumeOutsideTaps,
-      useRootOverlay: useRootOverlay,
-      closeOnClickOutside: closeOnClickOutside,
-      triggerFocusNode: triggerFocusNode,
-      positioning: positioning,
       // Render trigger from RemixMenuTrigger data
       builder: (context, state, _) {
         return StyleBuilder(
@@ -236,9 +236,12 @@ class RemixMenu<T> extends StatelessWidget {
             return RowBox(
               styleSpec: triggerSpec.container,
               children: [
-                StyledText(trigger.label, styleSpec: triggerSpec.label),
                 if (trigger.icon != null)
-                  StyledIcon(icon: trigger.icon!, styleSpec: triggerSpec.icon),
+                  StyledIcon(
+                    icon: trigger.icon!,
+                    styleSpec: triggerSpec.icon,
+                  ),
+                StyledText(trigger.label, styleSpec: triggerSpec.label),
               ],
             );
           },

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

@@ -4,8 +4,8 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
-import '../../utilities/remix_style.dart';
 import '../../fortal/fortal.dart';
+import '../../utilities/remix_style.dart';
 
 part 'progress_spec.dart';
 part 'progress_style.dart';

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

@@ -6,8 +6,8 @@ import 'package:flutter/services.dart';
 import 'package:mix/mix.dart';
 import 'package:naked_ui/naked_ui.dart';
 
-import '../../utilities/remix_style.dart';
 import '../../fortal/fortal.dart';
+import '../../utilities/remix_style.dart';
 import '../../utilities/selected_mixin.dart';
 
 part 'radio_group_widget.dart';

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

@@ -5,9 +5,10 @@ import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 import 'package:naked_ui/naked_ui.dart';
 
+import '../../fortal/fortal.dart';
 import '../../style/style.dart';
+import '../../theme/animation_constants.dart';
 import '../../utilities/remix_style.dart';
-import '../../fortal/fortal.dart';
 
 part 'select_spec.dart';
 part 'select_style.dart';

packages/remix/lib/src/components/select/select_widget.dart

@@ -142,8 +142,8 @@ class _RemixSelectState<T> extends State<RemixSelect<T>>
   void initState() {
     super.initState();
     animationController = AnimationController(
-      duration: const Duration(milliseconds: 150),
-      reverseDuration: const Duration(milliseconds: 150),
+      duration: RemixAnimationDurations.fast,
+      reverseDuration: RemixAnimationDurations.fast,
       vsync: this,
     );
   }
@@ -159,7 +159,7 @@ class _RemixSelectState<T> extends State<RemixSelect<T>>
   Widget _buildOverlayMenu(RemixSelectSpec spec) {
     return _AnimatedOverlayMenu(
       controller: animationController,
-      duration: const Duration(milliseconds: 150),
+      duration: RemixAnimationDurations.fast,
       curve: Curves.easeInOut,
       menuContainer: spec.menuContainer,
       children: widget.items

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

@@ -8,8 +8,9 @@ import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 import 'package:naked_ui/naked_ui.dart';
 
-import '../../utilities/remix_style.dart';
 import '../../fortal/fortal.dart';
+import '../../theme/animation_constants.dart';
+import '../../utilities/remix_style.dart';
 
 part 'slider_spec.dart';
 part 'slider_style.dart';

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

@@ -179,7 +179,7 @@ class RemixSlider extends StatelessWidget {
                             rangeWidth: spec.rangeWidth,
                             trackColor: spec.trackColor,
                             trackWidth: spec.trackWidth,
-                            duration: const Duration(milliseconds: 200),
+                            duration: RemixAnimationDurations.normal,
                             curve: Curves.linear,
                           ),
                         ),

packages/remix/lib/src/components/spinner/fortal_spinner_styles.dart

@@ -30,7 +30,7 @@ class FortalSpinnerStyles {
     return RemixSpinnerStyle(
       // Default properties (no focus state for spinners)
       indicatorColor: FortalTokens.accent9(), // Uses accent step 9 as per spec
-      duration: const Duration(milliseconds: 800), // per component token
+      duration: RemixAnimationDurations.slow, // per component token
     )
         // Merge with size-specific styles
         .merge(_sizeStyle(size));