fix/208-theme-lerp

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.16.2
+
+- **FIX**: `ShadTabs` and `ShadResizable` lerp
+- **FIX**: `ShadTabs` focused border color in dark mode
+
 ## 0.16.1
 
 - **FEAT**: Add parameters to `ShadFocusable`.

lib/src/components/tabs.dart

@@ -281,7 +281,6 @@ class ShadTabsState<T> extends State<ShadTabs<T>> with RestorationMixin {
         widget.padding ?? tabsTheme.padding ?? EdgeInsets.zero;
 
     final effectiveDecoration = ShadDecoration(
-      merge: false,
       color: theme.colorScheme.muted,
       border: ShadBorder.all(radius: theme.radius, width: 0),
     ).mergeWith(tabsTheme.decoration).mergeWith(widget.decoration);
@@ -699,6 +698,7 @@ class _ShadTabState<T> extends State<ShadTab<T>> {
               focusedBorder: ShadBorder.all(
                 width: 2,
                 radius: BorderRadius.circular(2),
+                color: theme.colorScheme.ring,
               ),
             ),
           false => ShadDecoration(
@@ -723,12 +723,14 @@ class _ShadTabState<T> extends State<ShadTab<T>> {
                   isLastTab ? 2 : 0,
                   2,
                 ),
+                color: theme.colorScheme.ring,
               ),
             ),
         };
 
-        final effectiveDecoration =
-            widget.decoration ?? tabsTheme.tabDecoration ?? defaultDecoration;
+        final effectiveDecoration = defaultDecoration
+            .mergeWith(tabsTheme.tabDecoration)
+            .mergeWith(widget.decoration);
 
         return ShadButton.secondary(
           icon: widget.icon,

lib/src/theme/components/resizable.dart

@@ -48,15 +48,15 @@ class ShadResizableTheme {
     if (identical(a, b)) return a;
     return ShadResizableTheme(
       merge: b.merge,
-      mainAxisAlignment: b.mainAxisAlignment,
-      crossAxisAlignment: b.crossAxisAlignment,
-      mainAxisSize: b.mainAxisSize,
-      textDirection: b.textDirection,
-      verticalDirection: b.verticalDirection,
-      showHandle: b.showHandle,
-      handleIconSrc: b.handleIconSrc,
+      mainAxisAlignment: t < 0.5 ? a.mainAxisAlignment : b.mainAxisAlignment,
+      crossAxisAlignment: t < 0.5 ? a.crossAxisAlignment : b.crossAxisAlignment,
+      mainAxisSize: t < 0.5 ? a.mainAxisSize : b.mainAxisSize,
+      textDirection: t < 0.5 ? a.textDirection : b.textDirection,
+      verticalDirection: t < 0.5 ? a.verticalDirection : b.verticalDirection,
+      showHandle: t < 0.5 ? a.showHandle : b.showHandle,
+      handleIconSrc: t < 0.5 ? a.handleIconSrc : b.handleIconSrc,
       dividerSize: lerpDouble(a.dividerSize, b.dividerSize, t),
-      resetOnDoubleTap: b.resetOnDoubleTap,
+      resetOnDoubleTap: t < 0.5 ? a.resetOnDoubleTap : b.resetOnDoubleTap,
       handleDecoration:
           ShadDecoration.lerp(a.handleDecoration, b.handleDecoration, t),
       handlePadding: EdgeInsets.lerp(a.handlePadding, b.handlePadding, t),
@@ -79,7 +79,8 @@ class ShadResizableTheme {
       handleIconSrc: other.handleIconSrc,
       dividerSize: other.dividerSize,
       resetOnDoubleTap: other.resetOnDoubleTap,
-      handleDecoration: other.handleDecoration,
+      handleDecoration: handleDecoration?.mergeWith(other.handleDecoration) ??
+          other.handleDecoration,
       handlePadding: other.handlePadding,
       handleSize: other.handleSize,
       dividerColor: other.dividerColor,

lib/src/theme/themes/default_theme_no_secondary_border_variant.dart

@@ -703,7 +703,6 @@ class ShadDefaultThemeNoSecondaryBorderVariant extends ShadThemeVariant {
       dividerColor: colorScheme.border,
       resetOnDoubleTap: true,
       handleDecoration: ShadDecoration(
-        merge: false,
         color: colorScheme.border,
         border: ShadBorder.all(
           radius: const BorderRadius.all(Radius.circular(4)),
@@ -742,7 +741,6 @@ class ShadDefaultThemeNoSecondaryBorderVariant extends ShadThemeVariant {
       dragStartBehavior: DragStartBehavior.start,
       padding: const EdgeInsets.all(4),
       decoration: ShadDecoration(
-        merge: false,
         color: colorScheme.muted,
         border: ShadBorder.all(radius: radius, width: 0),
       ),

lib/src/theme/themes/default_theme_variant.dart

@@ -675,7 +675,6 @@ class ShadDefaultThemeVariant extends ShadThemeVariant {
       dividerColor: colorScheme.border,
       resetOnDoubleTap: true,
       handleDecoration: ShadDecoration(
-        merge: false,
         color: colorScheme.border,
         border: ShadBorder.all(
           radius: const BorderRadius.all(Radius.circular(4)),
@@ -714,9 +713,12 @@ class ShadDefaultThemeVariant extends ShadThemeVariant {
       dragStartBehavior: DragStartBehavior.start,
       padding: EdgeInsets.zero,
       decoration: ShadDecoration(
-        merge: false,
         color: colorScheme.muted,
-        border: ShadBorder.all(radius: radius, width: 0),
+        border: ShadBorder.all(
+          radius: radius,
+          width: 0,
+          color: colorScheme.ring,
+        ),
       ),
       gap: 8,
       expandContent: false,

pubspec.yaml

@@ -1,6 +1,6 @@
 name: shadcn_ui
 description: shadcn-ui ported in Flutter. Awesome UI components for Flutter, fully customizable.
-version: 0.16.1
+version: 0.16.2
 homepage: https://flutter-shadcn-ui.mariuti.com
 repository: https://github.com/nank1ro/flutter-shadcn-ui
 documentation: https://flutter-shadcn-ui.mariuti.com