kasy-cli 1.24.0 → 1.26.0

package/templates/firebase/lib/features/onboarding/ui/widgets/selectable_row_tile.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 
 typedef OnSelectRow = void Function(int index, bool selected);
 
@@ -51,38 +52,50 @@ class _OnboardingSelectableRowGroupState
     return ListView.separated(
       physics: widget.physics,
       shrinkWrap: true,
-      separatorBuilder: (context, index) => const SizedBox(height: KasySpacing.sm),
+      separatorBuilder: (context, index) =>
+          const SizedBox(height: KasySpacing.sm),
       itemCount: widget.options.length,
       itemBuilder: (context, index) {
-        final hasOnSelectInfo = widget.onSelectInfoWidget != null &&
+        final hasOnSelectInfo =
+            widget.onSelectInfoWidget != null &&
             widget.onSelectInfoWidget!.length > index &&
             widget.onSelectInfoWidget![index] != null;
+        void selectRow() {
+          if (_selectedIndex == index) {
+            return;
+          }
+          setState(() {
+            _selectedIndex = index;
+          });
+          widget.onSelect?.call(index, true);
+        }
+
         return Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
-            Material(
-              color: Colors.transparent,
+            KasyFocusRing(
+              onActivate: selectRow,
               borderRadius: KasyRadius.lgBorderRadius,
-              child: InkWell(
+              child: Material(
+                color: Colors.transparent,
                 borderRadius: KasyRadius.lgBorderRadius,
-                onTap: () {
-                  if (_selectedIndex == index) {
-                    return;
-                  }
-                  setState(() {
-                    _selectedIndex = index;
-                  });
-                  widget.onSelect?.call(index, true);
-                },
-                child: switch (hasOnSelectInfo && _selectedIndex == index) {
-                  false => widget.options[index],
-                  true => widget.options[index],
-                },
+                child: InkWell(
+                  canRequestFocus: false,
+                  borderRadius: KasyRadius.lgBorderRadius,
+                  onTap: selectRow,
+                  child: switch (hasOnSelectInfo && _selectedIndex == index) {
+                    false => widget.options[index],
+                    true => widget.options[index],
+                  },
+                ),
               ),
             ),
             if (hasOnSelectInfo && _selectedIndex == index)
               Padding(
-                padding: const EdgeInsets.only(top: KasySpacing.sm, bottom: KasySpacing.md),
+                padding: const EdgeInsets.only(
+                  top: KasySpacing.sm,
+                  bottom: KasySpacing.md,
+                ),
                 child: widget.onSelectInfoWidget![index],
               ),
           ],
@@ -126,26 +139,33 @@ class _OnboardingMultiSelectableRowGroupState
       runSpacing: KasySpacing.sm,
       children: widget.options.map((option) {
         final index = widget.options.indexOf(option);
-        return Material(
-          color: Colors.transparent,
+        void toggleSelection() {
+          if (_selectedIndex.contains(index)) {
+            _selectedIndex.remove(index);
+            widget.onSelect?.call(index, false);
+          } else {
+            _selectedIndex.add(index);
+            widget.onSelect?.call(index, true);
+          }
+          setState(() {});
+        }
+
+        return KasyFocusRing(
+          onActivate: toggleSelection,
           borderRadius: KasyRadius.mdBorderRadius,
-          child: InkWell(
-            splashColor: context.colors.primary.withValues(alpha:.1),
-            onTap: () {
-              if (_selectedIndex.contains(index)) {
-                _selectedIndex.remove(index);
-                widget.onSelect?.call(index, false);
-              } else {
-                _selectedIndex.add(index);
-                widget.onSelect?.call(index, true);
-              }
-              setState(() {});
-            },
-            child: SelectableRowTile(
-              title: option.title,
-              subtitle: option.subtitle,
-              selected: _selectedIndex.contains(index),
-              emoj: option.emoj,
+          child: Material(
+            color: Colors.transparent,
+            borderRadius: KasyRadius.mdBorderRadius,
+            child: InkWell(
+              canRequestFocus: false,
+              splashColor: context.colors.primary.withValues(alpha: .1),
+              onTap: toggleSelection,
+              child: SelectableRowTile(
+                title: option.title,
+                subtitle: option.subtitle,
+                selected: _selectedIndex.contains(index),
+                emoj: option.emoj,
+              ),
             ),
           ),
         );
@@ -205,15 +225,11 @@ class _SelectableRowTileState extends State<SelectableRowTile>
     _opacityAnimation = Tween(
       begin: 0.0,
       end: 1.0,
-    ).animate(
-      CurvedAnimation(parent: _controller, curve: Curves.ease),
-    );
+    ).animate(CurvedAnimation(parent: _controller, curve: Curves.ease));
     _iconSizeAnimation = Tween(
       begin: 0.0,
       end: 1.0,
-    ).animate(
-      CurvedAnimation(parent: _controller, curve: Curves.elasticOut),
-    );
+    ).animate(CurvedAnimation(parent: _controller, curve: Curves.elasticOut));
     if (widget.selected) {
       _controller.forward();
     }
@@ -267,9 +283,7 @@ class _SelectableRowTileState extends State<SelectableRowTile>
                 padding: const EdgeInsets.only(right: KasySpacing.md),
                 child: Text(
                   widget.emoj!,
-                  style: context.textTheme.titleMedium?.copyWith(
-                    fontSize: 28,
-                  ),
+                  style: context.textTheme.titleMedium?.copyWith(fontSize: 28),
                 ),
               ),
             ),
@@ -282,8 +296,9 @@ class _SelectableRowTileState extends State<SelectableRowTile>
                     widget.title!,
                     style: context.textTheme.bodyLarge?.copyWith(
                       color: colors.onSurface,
-                      fontWeight:
-                          widget.selected ? FontWeight.w700 : FontWeight.w600,
+                      fontWeight: widget.selected
+                          ? FontWeight.w700
+                          : FontWeight.w600,
                     ),
                   ),
                 if (widget.subtitle != null)
@@ -301,10 +316,7 @@ class _SelectableRowTileState extends State<SelectableRowTile>
           ),
           const SizedBox(width: KasySpacing.sm),
           if (!widget.selected)
-            Flexible(
-              flex: 0,
-              child: RoundRadioBox.unselected(context),
-            ),
+            Flexible(flex: 0, child: RoundRadioBox.unselected(context)),
           if (widget.selected)
             Flexible(
               flex: 0,
@@ -371,10 +383,7 @@ class RoundRadioBox extends StatelessWidget {
       decoration: BoxDecoration(
         color: bgColor,
         shape: BoxShape.circle,
-        border: Border.all(
-          color: borderColor,
-          width: 2,
-        ),
+        border: Border.all(color: borderColor, width: 2),
       ),
       child: Center(
         child: icon != null
@@ -382,11 +391,7 @@ class RoundRadioBox extends StatelessWidget {
                 opacity: iconOpacity,
                 child: Transform.scale(
                   scale: iconSize,
-                  child: Icon(
-                    icon,
-                    color: context.colors.onPrimary,
-                    size: 15,
-                  ),
+                  child: Icon(icon, color: context.colors.onPrimary, size: 15),
                 ),
               )
             : const SizedBox.shrink(),

package/templates/firebase/lib/features/settings/settings_page.dart

@@ -12,6 +12,7 @@ import 'package:kasy_kit/core/security/biometric_ui_bundle.dart';
 import 'package:kasy_kit/core/states/logout_action.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/features/settings/ui/components/avatar_component.dart';
 import 'package:kasy_kit/features/settings/ui/components/delete_user_component.dart';
@@ -329,7 +330,18 @@ class ProfileTile extends StatelessWidget {
       child: ClipRRect(
         borderRadius: KasyRadius.smBorderRadius,
         child: onTap != null
-            ? InkWell(onTap: onTap, child: content)
+            ? KasyFocusRing(
+                onActivate: onTap,
+                borderRadius: KasyRadius.smBorderRadius,
+                gapColor: context.colors.surface,
+                // The InkWell keeps its tap ripple but yields focus to the ring,
+                // so the keyboard outline matches every other Kasy control.
+                child: InkWell(
+                  canRequestFocus: false,
+                  onTap: onTap,
+                  child: content,
+                ),
+              )
             : content,
       ),
     );
@@ -547,6 +559,8 @@ class _NavTile extends StatelessWidget {
       borderRadius: KasyRadius.smBorderRadius,
       hoverColor: c.surfaceNeutralSoft,
       pressColor: c.onSurface,
+      focusable: true,
+      focusGapColor: c.surface,
       onTap: onTap,
       child: Container(
         padding: const EdgeInsets.symmetric(
@@ -770,6 +784,8 @@ class _LogoutRow extends StatelessWidget {
     return KasyHover(
       borderRadius: KasyRadius.smBorderRadius,
       pressColor: context.colors.error,
+      focusable: true,
+      focusGapColor: context.colors.surface,
       onTap: onTap,
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),

package/templates/firebase/lib/features/settings/ui/components/avatar_component.dart

@@ -11,6 +11,7 @@ import 'package:kasy_kit/core/data/repositories/user_repository.dart';
 import 'package:kasy_kit/core/states/models/user_state.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/avatar_utils.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/round_progress.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
@@ -57,12 +58,18 @@ class _EditableUserAvatarState extends ConsumerState<EditableUserAvatar> {
     final displayAvatarPath = _optimisticAvatarUrl ?? avatarPath;
     final double d = widget.diameter ?? KasyAvatarSize.medium.diameter;
 
-    return GestureDetector(
-      behavior: HitTestBehavior.opaque,
-      onTap: userId != null && !_isUploading
-          ? () => _onTapAvatar(context, userState, avatarPath)
-          : null,
-      child: Padding(
+    final VoidCallback? onTapAvatar = userId != null && !_isUploading
+        ? () => _onTapAvatar(context, userState, avatarPath)
+        : null;
+
+    return KasyFocusRing(
+      enabled: onTapAvatar != null,
+      onActivate: onTapAvatar,
+      borderRadius: BorderRadius.circular(999),
+      child: GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: onTapAvatar,
+        child: Padding(
         padding: const EdgeInsets.all(6),
         child: Stack(
           clipBehavior: Clip.none,
@@ -103,6 +110,7 @@ class _EditableUserAvatarState extends ConsumerState<EditableUserAvatar> {
             ),
           ],
         ),
+        ),
       ),
     );
   }
@@ -313,24 +321,30 @@ class _BottomSheetTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final Color fg = color ?? context.colors.onSurface;
-    return InkWell(
-      onTap: onTap,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(
-          horizontal: KasySpacing.md,
-          vertical: KasySpacing.smd,
-        ),
-        child: Row(
-          children: [
-            if (icon != null) ...[
-              Icon(icon, size: 22, color: fg),
-              const SizedBox(width: KasySpacing.sm),
+    return KasyFocusRing(
+      onActivate: onTap,
+      borderRadius: BorderRadius.circular(KasyRadius.sm),
+      gapColor: context.colors.surface,
+      child: InkWell(
+        canRequestFocus: false,
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: KasySpacing.md,
+            vertical: KasySpacing.smd,
+          ),
+          child: Row(
+            children: [
+              if (icon != null) ...[
+                Icon(icon, size: 22, color: fg),
+                const SizedBox(width: KasySpacing.sm),
+              ],
+              Text(
+                label,
+                style: context.textTheme.bodyLarge?.copyWith(color: fg),
+              ),
             ],
-            Text(
-              label,
-              style: context.textTheme.bodyLarge?.copyWith(color: fg),
-            ),
-          ],
+          ),
         ),
       ),
     );

package/templates/firebase/lib/features/settings/ui/components/language_switcher.dart

@@ -5,6 +5,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/core/home_widgets/home_widget_mywidget_service.dart';
 import 'package:kasy_kit/core/shared_preferences/shared_preferences.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
 import 'package:kasy_kit/i18n/app_locale_display.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
@@ -17,31 +18,40 @@ class LanguageSwitcher extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final AppLocale current = TranslationProvider.of(context).locale;
-    return InkWell(
-      onTap: () => _showLanguagePicker(context, ref, current),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
-        child: Row(
-          children: <Widget>[
-            Icon(KasyIcons.language, size: 21, color: context.colors.onSurface),
-            const SizedBox(width: KasySpacing.sm),
-            Expanded(
-              child: Text(
-                context.t.settings.language_title,
-                style: context.textTheme.titleMedium?.copyWith(
-                  color: context.colors.onSurface,
+    return KasyFocusRing(
+      onActivate: () => _showLanguagePicker(context, ref, current),
+      borderRadius: KasyRadius.smBorderRadius,
+      child: InkWell(
+        canRequestFocus: false,
+        onTap: () => _showLanguagePicker(context, ref, current),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+          child: Row(
+            children: <Widget>[
+              Icon(
+                KasyIcons.language,
+                size: 21,
+                color: context.colors.onSurface,
+              ),
+              const SizedBox(width: KasySpacing.sm),
+              Expanded(
+                child: Text(
+                  context.t.settings.language_title,
+                  style: context.textTheme.titleMedium?.copyWith(
+                    color: context.colors.onSurface,
+                  ),
                 ),
               ),
-            ),
-            Text(
-              current.nativeName,
-              style: context.textTheme.bodyMedium?.copyWith(
-                color: context.colors.muted,
+              Text(
+                current.nativeName,
+                style: context.textTheme.bodyMedium?.copyWith(
+                  color: context.colors.muted,
+                ),
               ),
-            ),
-            const SizedBox(width: KasySpacing.xs),
-            const SettingsListChevron(),
-          ],
+              const SizedBox(width: KasySpacing.xs),
+              const SettingsListChevron(),
+            ],
+          ),
         ),
       ),
     );
@@ -147,36 +157,41 @@ class _LocaleOptionTile extends StatelessWidget {
     final Color primary = context.colors.primary;
     final Color fg = isSelected ? primary : context.colors.onSurface;
 
-    return InkWell(
-      onTap: onTap,
+    return KasyFocusRing(
+      onActivate: onTap,
       borderRadius: BorderRadius.circular(KasyRadius.sm),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(
-          horizontal: KasySpacing.xs,
-          vertical: KasySpacing.smd,
-        ),
-        child: Row(
-          children: <Widget>[
-            Expanded(
-              child: Text(
-                locale.nativeName,
-                style: context.textTheme.bodyLarge?.copyWith(
-                  color: fg,
-                  fontWeight:
-                      isSelected ? FontWeight.w600 : FontWeight.w400,
+      child: InkWell(
+        canRequestFocus: false,
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(KasyRadius.sm),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: KasySpacing.xs,
+            vertical: KasySpacing.smd,
+          ),
+          child: Row(
+            children: <Widget>[
+              Expanded(
+                child: Text(
+                  locale.nativeName,
+                  style: context.textTheme.bodyLarge?.copyWith(
+                    color: fg,
+                    fontWeight:
+                        isSelected ? FontWeight.w600 : FontWeight.w400,
+                  ),
                 ),
               ),
-            ),
-            if (isSelected)
-              Container(
-                width: 10,
-                height: 10,
-                decoration: BoxDecoration(
-                  color: primary,
-                  shape: BoxShape.circle,
+              if (isSelected)
+                Container(
+                  width: 10,
+                  height: 10,
+                  decoration: BoxDecoration(
+                    color: primary,
+                    shape: BoxShape.circle,
+                  ),
                 ),
-              ),
-          ],
+            ],
+          ),
         ),
       ),
     );

package/templates/firebase/lib/features/settings/ui/widgets/admin_card.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 
 /// Here is just a simple content card
 class AdminPanelCard extends StatelessWidget {
@@ -21,12 +22,18 @@ class AdminPanelCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return InkWell(
-      onTap: () {
-        KasyHaptics.medium(context);
-        onTap.call();
-      },
-      child: Card(
+    void handleActivate() {
+      KasyHaptics.medium(context);
+      onTap.call();
+    }
+
+    return KasyFocusRing(
+      onActivate: handleActivate,
+      borderRadius: BorderRadius.circular(KasyRadius.sm),
+      child: InkWell(
+        canRequestFocus: false,
+        onTap: handleActivate,
+        child: Card(
         color: backgroundColor ?? context.colors.primary.withValues(alpha: .15),
         margin: EdgeInsets.zero,
         elevation: 0,
@@ -53,6 +60,7 @@ class AdminPanelCard extends StatelessWidget {
             ],
           ),
         ),
+        ),
       ),
     );
   }

package/templates/firebase/lib/features/settings/ui/widgets/settings_tile.dart

@@ -157,6 +157,8 @@ class SettingsTile extends StatelessWidget {
       onTap: onTap,
       hoverEnabled: false,
       pressEnabled: false,
+      focusable: true,
+      borderRadius: KasyRadius.smBorderRadius,
       semanticLabel: title,
       padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
       child: Row(

package/templates/firebase/lib/features/subscriptions/ui/widgets/premium_banner.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 
 typedef PremiumWideBannerOnTap = void Function();
 
@@ -32,9 +33,13 @@ class PremiumWideBanner extends StatelessWidget {
             color: bgColor,
             // border: Border.all(color: borderColor),
           ),
-          child: InkWell(
-            onTap: () => onTap(),
-            child: Row(
+          child: KasyFocusRing(
+            onActivate: () => onTap(),
+            borderRadius: BorderRadius.zero,
+            child: InkWell(
+              canRequestFocus: false,
+              onTap: () => onTap(),
+              child: Row(
               children: [
                 Image.asset(
                   imagePath,
@@ -72,6 +77,7 @@ class PremiumWideBanner extends StatelessWidget {
                 const SizedBox(width: KasySpacing.lg),
               ],
             ),
+            ),
           ),
         ),
       );

package/templates/firebase/lib/features/subscriptions/ui/widgets/premium_close_button.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 
 class AppCloseButtonComponent extends ConsumerWidget {
   final ValueNotifier<bool> showCloseBtn;
@@ -34,24 +35,31 @@ class AppCloseButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final VoidCallback? onClose = onTap;
     return Material(
       color: Colors.transparent,
-      child: InkWell(
-        onTapUp: (_) {
-          onTap?.call();
-        },
-        child: Ink(
-          width: 32,
-          height: 32,
-          decoration: BoxDecoration(
-            shape: BoxShape.circle,
-            color: context.colors.onBackground.withValues(alpha: 0.6),
-          ),
-          child: Center(
-            child: Icon(
-              KasyIcons.close,
-              color: context.colors.background,
-              size: 21,
+      child: KasyFocusRing(
+        enabled: onClose != null,
+        onActivate: onClose,
+        borderRadius: BorderRadius.circular(999),
+        child: InkWell(
+          canRequestFocus: false,
+          onTapUp: (_) {
+            onClose?.call();
+          },
+          child: Ink(
+            width: 32,
+            height: 32,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: context.colors.onBackground.withValues(alpha: 0.6),
+            ),
+            child: Center(
+              child: Icon(
+                KasyIcons.close,
+                color: context.colors.background,
+                size: 21,
+              ),
             ),
           ),
         ),