kasy-cli 1.37.1 → 1.39.0

package/templates/firebase/lib/features/authentication/ui/widgets/auth_card_scaffold.dart

@@ -25,7 +25,7 @@ class AuthCardScaffold extends StatelessWidget {
     required this.subtitle,
     required this.children,
     this.showLogo = true,
-    this.logoHeight = 96,
+    this.logoHeight = 132,
     this.maxContentWidth = 420,
   });
 
@@ -74,7 +74,7 @@ class AuthCardScaffold extends StatelessWidget {
                         curve: Curves.easeOut,
                       ),
                 ),
-                const SizedBox(height: KasySpacing.lg),
+                const SizedBox(height: KasySpacing.sm),
               ],
               Text(
                 title,
@@ -111,9 +111,11 @@ class AuthCardScaffold extends StatelessWidget {
                   child: isMobile
                       ? content
                       : KasyCard(
-                          padding: const EdgeInsets.symmetric(
-                            horizontal: KasySpacing.lg,
-                            vertical: KasySpacing.xl,
+                          padding: const EdgeInsets.fromLTRB(
+                            KasySpacing.lg,
+                            KasySpacing.md,
+                            KasySpacing.lg,
+                            KasySpacing.xl,
                           ),
                           child: content,
                         ),

package/templates/firebase/lib/features/authentication/ui/widgets/social_auth_tile.dart

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.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_hover.dart';
+
+/// Outlined social sign-in button (Google / Apple / Facebook), shared by the
+/// sign-in and sign-up screens.
+///
+/// Each tile fills its slot in the social row (the parent wraps it in an
+/// [Expanded]) and centers the provider glyph. It uses [KasyHover] so it has a
+/// real hover highlight on web/desktop and a press fill on every platform — no
+/// Material ripple, matching the rest of the kit's interactive controls. While a
+/// request is in flight ([onPressed] null) it dims and stops responding to
+/// pointer and keyboard.
+class SocialAuthButton extends StatelessWidget {
+  const SocialAuthButton({
+    super.key,
+    required this.label,
+    required this.iconAsset,
+    required this.onPressed,
+  });
+
+  /// Accessibility label (the provider name) announced to screen readers.
+  final String label;
+
+  /// Path to the provider's official brand SVG bundled under `assets/icons/`
+  /// (e.g. `assets/icons/google.svg`). Rendered at full brand colour and at a
+  /// shared [KasyIconSize.lg] box so every provider stays the same size. For
+  /// Apple, the caller picks the black/white variant for the current theme.
+  final String iconAsset;
+
+  /// Tap handler. When null the button is disabled (dimmed, inert).
+  final VoidCallback? onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    final bool enabled = onPressed != null;
+    final BorderRadius radius = BorderRadius.circular(KasyRadius.sm);
+
+    // No background fill: the KasyHover overlay sits behind the transparent
+    // interior to provide the hover/press tint, and on the surface auth card a
+    // fill would be invisible anyway. The hairline border gives the outlined
+    // shape, consistent with KasyButton's outlined variant.
+    final Widget surface = Container(
+      height: 44,
+      decoration: BoxDecoration(
+        borderRadius: radius,
+        border: Border.all(
+          color: context.colors.outline.withValues(alpha: 0.38),
+        ),
+      ),
+      child: Center(
+        // Brand logos have different aspect ratios (Apple is tall, Google is
+        // square); SvgPicture defaults to BoxFit.contain, which keeps each one
+        // inside the shared box without distortion so the row stays balanced.
+        child: SvgPicture.asset(
+          iconAsset,
+          width: KasyIconSize.lg,
+          height: KasyIconSize.lg,
+        ),
+      ),
+    );
+
+    if (!enabled) {
+      return Opacity(opacity: 0.5, child: surface);
+    }
+
+    return KasyHover(
+      onTap: () {
+        KasyHaptics.medium(context);
+        onPressed!();
+      },
+      // KasyHover fires a light selection haptic by default; a social sign-in is
+      // a significant action, so opt out and fire the heavier "medium" above.
+      hapticEnabled: false,
+      focusable: true,
+      borderRadius: radius,
+      semanticLabel: label,
+      child: surface,
+    );
+  }
+}

package/templates/firebase/lib/features/feedbacks/ui/widgets/feature_card.dart

@@ -59,15 +59,15 @@ class _FeatureCardState extends State<FeatureCard> {
               children: [
                 Text(
                   widget.title,
-                  style: context.textTheme.titleMedium?.copyWith(
-                    fontWeight: FontWeight.w700,
+                  style: context.kasyTextTheme.listRowTitle.copyWith(
+                    color: context.colors.onSurface,
+                    fontWeight: FontWeight.w600,
                   ),
                 ),
                 const SizedBox(height: 2),
                 Text(
                   widget.description,
-                  style: context.textTheme.bodySmall?.copyWith(
-                    fontWeight: FontWeight.w400,
+                  style: context.textTheme.bodyMedium?.copyWith(
                     color: context.colors.muted,
                   ),
                 ),

package/templates/firebase/lib/features/home/home_components_page.dart

@@ -6,6 +6,7 @@ import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/core/widgets/kasy_scroll_behavior.dart';
 import 'package:kasy_kit/features/home/home_components_preview_registry.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
 
 /// UI-kit catalog, reachable from the home dashboard.
 ///
@@ -28,139 +29,276 @@ class HomeComponentsPage extends StatelessWidget {
             title: 'Components',
             onBack: () => Navigator.maybePop(context),
           ),
+          const Expanded(child: HomeComponentsCatalog()),
+        ],
+      ),
+    );
+  }
+}
+
+/// The UI-kit catalog list on its own (no app bar / scaffold), so it can be the
+/// body of [HomeComponentsPage] AND a section inside the admin console (which
+/// supplies its own chrome). Fills the space it is given.
+class HomeComponentsCatalog extends StatefulWidget {
+  const HomeComponentsCatalog({super.key});
+
+  @override
+  State<HomeComponentsCatalog> createState() => _HomeComponentsCatalogState();
+}
+
+class _HomeComponentsCatalogState extends State<HomeComponentsCatalog> {
+  final TextEditingController _searchCtrl = TextEditingController();
+  String _query = '';
+
+  @override
+  void dispose() {
+    _searchCtrl.dispose();
+    super.dispose();
+  }
+
+  /// Reset the filter when leaving for a component, so coming back shows the
+  /// full catalog instead of the stale search term.
+  void _clearSearch() {
+    if (!mounted) return;
+    if (_query.isEmpty && _searchCtrl.text.isEmpty) return;
+    _searchCtrl.clear();
+    setState(() => _query = '');
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final String q = _query.trim().toLowerCase();
+    final List<_CatalogRow> rows = q.isEmpty
+        ? _kCatalog
+        : _kCatalog
+            .where((r) => r.name.toLowerCase().contains(q))
+            .toList(growable: false);
+
+    return Padding(
+      padding: EdgeInsets.fromLTRB(
+        KasySpacing.pageHorizontalGutter,
+        KasySpacing.belowChromeContentGap,
+        KasySpacing.pageHorizontalGutter,
+        MediaQuery.paddingOf(context).bottom + KasySpacing.belowChromeContentGap,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          _ComponentsSearchField(
+            controller: _searchCtrl,
+            onChanged: (v) => setState(() => _query = v),
+          ),
+          const SizedBox(height: KasySpacing.smd),
           Expanded(
-            child: Padding(
-              padding: EdgeInsets.fromLTRB(
-                KasySpacing.pageHorizontalGutter,
-                KasySpacing.belowChromeContentGap,
-                KasySpacing.pageHorizontalGutter,
-                MediaQuery.paddingOf(context).bottom +
-                    KasySpacing.belowChromeContentGap,
-              ),
-              child: _componentsCatalogInset(
-                context,
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: KasySpacing.xs,
-                  ),
-                  child: ScrollConfiguration(
-                    behavior: const KasyKitScrollBehavior(),
-                    child: ListView.separated(
-                      padding: EdgeInsets.zero,
-                      itemCount: _kCatalog.length + 1,
-                      separatorBuilder: (context, index) => Divider(
-                        height: 1,
-                        thickness: 1,
-                        indent: KasySpacing.md,
-                        endIndent: KasySpacing.md,
-                        color: context.colors.outline.withValues(alpha: 0.33),
+            child: _componentsCatalogInset(
+              context,
+              child: rows.isEmpty
+                  ? const _ComponentsEmptyResults()
+                  : Padding(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: KasySpacing.xs,
                       ),
-                      itemBuilder: (context, index) {
-                        if (index >= _kCatalog.length) {
-                          return const SizedBox(height: KasySpacing.sm);
-                        }
-                        final _CatalogRow row = _kCatalog[index];
-                        return KasyHover(
-                          hapticEnabled: false,
-                          onTap: () {
-                            KasyHaptics.selection(context);
-                            if (row.name == 'Design System') {
-                              context.push('/design-system');
-                              return;
-                            }
-                            // Skip rows without a preview yet (registry returns
-                            // null); otherwise open /components/:name, which the
-                            // router resolves back to this component's preview.
-                            if (getComponentPreviewDefinition(row.name) == null) {
-                              return;
-                            }
-                            context.push(
-                              '/components/${Uri.encodeComponent(row.name)}',
-                            );
-                          },
-                          child: Padding(
-                            padding: const EdgeInsets.symmetric(
-                              horizontal: KasySpacing.smd,
-                              vertical: 16,
-                            ),
-                            child: Row(
-                                children: [
-                                  Expanded(
-                                    child: Row(
-                                      children: [
-                                        Flexible(
-                                          child: Text(
-                                            row.name,
-                                            // Lighter weight (w500) to match the
-                                            // app's row/list scale instead of the
-                                            // heavier heading weight.
-                                            style: context.kasyTextTheme.rowTitle
-                                                .copyWith(
-                                              color:
-                                                  context.colors.onSurface,
-                                            ),
-                                          ),
-                                        ),
-                                        if (_kReadyComponents.contains(
-                                          row.name,
-                                        )) ...[
-                                          const SizedBox(width: KasySpacing.sm),
-                                          Text(
-                                            'Pronto',
-                                            style: context.textTheme.bodySmall
-                                                ?.copyWith(
-                                                  color: context.colors.success,
-                                                  fontWeight: FontWeight.w600,
-                                                ),
-                                          ),
-                                        ],
-                                        if (_kWebReadyComponents.contains(
-                                          row.name,
-                                        )) ...[
-                                          const SizedBox(width: KasySpacing.xs),
-                                          Text(
-                                            'Web',
-                                            style: context.textTheme.bodySmall
-                                                ?.copyWith(
-                                                  color: context.colors.primary,
-                                                  fontWeight: FontWeight.w600,
-                                                ),
-                                          ),
-                                        ],
-                                        if (_kUrgentComponents.contains(
-                                          row.name,
-                                        )) ...[
-                                          const SizedBox(width: KasySpacing.sm),
-                                          Text(
-                                            'Prioridade: Urgente',
-                                            style: context.textTheme.bodySmall
-                                                ?.copyWith(
-                                                  color: context.colors.warning,
-                                                  fontWeight: FontWeight.w700,
-                                                ),
-                                          ),
-                                        ],
-                                      ],
-                                    ),
-                                  ),
-                                  Icon(
-                                    KasyIcons.chevronRight,
-                                    color: context.colors.muted,
-                                    size: 22,
-                                  ),
-                                ],
+                      child: ScrollConfiguration(
+                        behavior: const KasyKitScrollBehavior(),
+                        child: ListView.separated(
+                          padding: EdgeInsets.zero,
+                          itemCount: rows.length + 1,
+                          separatorBuilder: (context, index) => Divider(
+                            height: 1,
+                            thickness: 1,
+                            indent: KasySpacing.md,
+                            endIndent: KasySpacing.md,
+                            color: context.colors.outline.withValues(
+                              alpha: 0.33,
                             ),
                           ),
-                        );
+                          itemBuilder: (context, index) {
+                            if (index >= rows.length) {
+                              return const SizedBox(height: KasySpacing.sm);
+                            }
+                            return _catalogRow(context, rows[index]);
+                          },
+                        ),
+                      ),
+                    ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
 
-                      },
+  Widget _catalogRow(BuildContext context, _CatalogRow row) {
+    return KasyHover(
+      hapticEnabled: false,
+      onTap: () {
+        KasyHaptics.selection(context);
+        if (row.name == 'Design System') {
+          context.push('/design-system').whenComplete(_clearSearch);
+          return;
+        }
+        // Skip rows without a preview yet (registry returns null); otherwise
+        // open /components/:name, which the router resolves back to this
+        // component's preview.
+        if (getComponentPreviewDefinition(row.name) == null) {
+          return;
+        }
+        context
+            .push('/components/${Uri.encodeComponent(row.name)}')
+            .whenComplete(_clearSearch);
+      },
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: KasySpacing.smd,
+          vertical: 16,
+        ),
+        child: Row(
+          children: [
+            Expanded(
+              child: Row(
+                children: [
+                  Flexible(
+                    child: Text(
+                      row.name,
+                      // Lighter weight (w500) to match the app's row/list scale
+                      // instead of the heavier heading weight.
+                      style: context.kasyTextTheme.rowTitle.copyWith(
+                        color: context.colors.onSurface,
+                      ),
                     ),
                   ),
-                ),
+                  if (_kReadyComponents.contains(row.name)) ...[
+                    const SizedBox(width: KasySpacing.sm),
+                    Text(
+                      'Pronto',
+                      style: context.textTheme.bodySmall?.copyWith(
+                        color: context.colors.success,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ],
+                  if (_kWebReadyComponents.contains(row.name)) ...[
+                    const SizedBox(width: KasySpacing.xs),
+                    Text(
+                      'Web',
+                      style: context.textTheme.bodySmall?.copyWith(
+                        color: context.colors.primary,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ],
+                  if (_kUrgentComponents.contains(row.name)) ...[
+                    const SizedBox(width: KasySpacing.sm),
+                    Text(
+                      'Prioridade: Urgente',
+                      style: context.textTheme.bodySmall?.copyWith(
+                        color: context.colors.warning,
+                        fontWeight: FontWeight.w700,
+                      ),
+                    ),
+                  ],
+                ],
               ),
             ),
+            Icon(
+              KasyIcons.chevronRight,
+              color: context.colors.muted,
+              size: 22,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Compact search field above the catalog — filters the list by component name.
+class _ComponentsSearchField extends StatelessWidget {
+  final TextEditingController controller;
+  final ValueChanged<String> onChanged;
+  const _ComponentsSearchField({
+    required this.controller,
+    required this.onChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 40,
+      child: TextField(
+        controller: controller,
+        onChanged: onChanged,
+        style: context.textTheme.bodyMedium,
+        decoration: InputDecoration(
+          hintText: t.home.dashboard.search_hint,
+          hintStyle: context.textTheme.bodyMedium?.copyWith(
+            color: context.colors.muted,
           ),
-        ],
+          prefixIcon: Icon(
+            Icons.search_rounded,
+            size: 18,
+            color: context.colors.muted,
+          ),
+          prefixIconConstraints: const BoxConstraints(
+            minWidth: 40,
+            minHeight: 40,
+          ),
+          isDense: true,
+          contentPadding: const EdgeInsets.symmetric(
+            horizontal: 12,
+            vertical: 10,
+          ),
+          filled: true,
+          fillColor: context.colors.surface,
+          enabledBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            borderSide: BorderSide(
+              color: context.colors.outline.withValues(alpha: 0.5),
+            ),
+          ),
+          focusedBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            borderSide: BorderSide(color: context.colors.primary, width: 1.4),
+          ),
+          border: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            borderSide: BorderSide(
+              color: context.colors.outline.withValues(alpha: 0.5),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Shown inside the catalog surface when a search matches nothing.
+class _ComponentsEmptyResults extends StatelessWidget {
+  const _ComponentsEmptyResults();
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(KasySpacing.lg),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              Icons.search_off_rounded,
+              size: 30,
+              color: context.colors.muted,
+            ),
+            const SizedBox(height: KasySpacing.sm),
+            Text(
+              t.home.dashboard.search_empty,
+              textAlign: TextAlign.center,
+              style: context.textTheme.bodySmall?.copyWith(
+                color: context.colors.muted,
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }
@@ -185,6 +323,7 @@ const Set<String> _kReadyComponents = <String>{
   'DatePicker',
   'Design System',
   'Dialog',
+  'DropDown',
   'Hover',
   'Tabs',
   'TextArea',
@@ -195,7 +334,6 @@ const Set<String> _kReadyComponents = <String>{
   'SwipeAction',
   'TextFieldOTP',
   'Toast',
-  'Web Header',
 };
 
 /// Components that have been adapted for web (cursor, hover, shadow, border).
@@ -212,6 +350,7 @@ const Set<String> _kWebReadyComponents = <String>{
   'DatePicker',
   'Design System',
   'Dialog',
+  'DropDown',
   'Hover',
   'Sidebar',
   'Skeleton',
@@ -221,7 +360,6 @@ const Set<String> _kWebReadyComponents = <String>{
   'TextField',
   'TextFieldOTP',
   'Toast',
-  'Web Header',
 };
 
 const Set<String> _kUrgentComponents = <String>{
@@ -244,6 +382,7 @@ const List<_CatalogRow> _kCatalog = [
   _CatalogRow('Checkbox'),
   _CatalogRow('DatePicker'),
   _CatalogRow('Dialog'),
+  _CatalogRow('DropDown'),
   _CatalogRow('Hover'),
   _CatalogRow('Sidebar'),
   _CatalogRow('Skeleton'),
@@ -253,7 +392,6 @@ const List<_CatalogRow> _kCatalog = [
   _CatalogRow('TextField'),
   _CatalogRow('TextFieldOTP'),
   _CatalogRow('Toast'),
-  _CatalogRow('Web Header'),
   // Prioridade: Urgente (_kUrgentComponents), A–Z
   _CatalogRow('Radio Group'),
   _CatalogRow('Switch'),