kasy-cli 1.32.0 → 1.34.0

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

@@ -91,7 +91,13 @@ class HomeComponentsPage extends StatelessWidget {
                                         Flexible(
                                           child: Text(
                                             row.name,
-                                            style: context.textTheme.titleMedium,
+                                            // Lighter weight (w500) to match the
+                                            // app's row/list scale instead of the
+                                            // heavier heading weight.
+                                            style: context.textTheme.titleMedium
+                                                ?.copyWith(
+                                              fontWeight: FontWeight.w500,
+                                            ),
                                           ),
                                         ),
                                         if (_kReadyComponents.contains(

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

@@ -397,6 +397,10 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
             label: 'With Label & Description',
             builder: _buildTextAreaWithLabelDescription,
           ),
+          ComponentPreviewVariant(
+            label: 'Variants',
+            builder: _buildTextAreaVariants,
+          ),
           ComponentPreviewVariant(
             label: 'States',
             builder: _buildTextAreaStates,
@@ -2785,6 +2789,34 @@ Widget _buildTextAreaWithLabelDescription(BuildContext context) {
   return const _TextAreaWithLabelDescriptionContent();
 }
 
+Widget _buildTextAreaVariants(BuildContext context) {
+  return const Column(
+    mainAxisSize: MainAxisSize.min,
+    crossAxisAlignment: CrossAxisAlignment.stretch,
+    children: [
+      KasyTextArea(
+        label: 'Primary Variant',
+        hint: 'Primary style text area',
+        description: 'Default variant with primary styling',
+      ),
+      SizedBox(height: KasySpacing.lg),
+      KasyTextArea(
+        label: 'Secondary Variant',
+        hint: 'Secondary style text area',
+        description: 'Secondary variant for surfaces',
+        variant: KasyTextFieldVariant.secondary,
+      ),
+      SizedBox(height: KasySpacing.lg),
+      KasyTextArea(
+        label: 'Flat Variant',
+        hint: 'Flat style text area',
+        description: 'Primary fill, hairline border, no shadow',
+        variant: KasyTextFieldVariant.flat,
+      ),
+    ],
+  );
+}
+
 Widget _buildTextAreaStates(BuildContext context) {
   return const Column(
     mainAxisSize: MainAxisSize.min,

package/templates/firebase/lib/features/local_reminders/ui/reminder_page.dart

@@ -1,11 +1,15 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/components/kasy_app_bar.dart';
+import 'package:kasy_kit/components/kasy_card.dart';
+import 'package:kasy_kit/components/kasy_chip.dart';
+import 'package:kasy_kit/components/kasy_date_picker.dart';
+import 'package:kasy_kit/components/kasy_tabs.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_scroll_behavior.dart';
 import 'package:kasy_kit/features/local_reminders/providers/reminder_notifier.dart';
 import 'package:kasy_kit/features/local_reminders/repositories/reminder_preferences.dart';
+import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 
 class ReminderPage extends ConsumerWidget {
@@ -44,163 +48,133 @@ class _ReminderForm extends ConsumerWidget {
 
   const _ReminderForm({required this.state});
 
+  // Tab order mirrors the type selector left-to-right.
+  static const List<ReminderType> _types = <ReminderType>[
+    ReminderType.daily,
+    ReminderType.weekly,
+    ReminderType.specificDate,
+  ];
+
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final tr = Translations.of(context).reminderPage;
     final notifier = ref.read(reminderProvider.notifier);
 
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: [
-        SwitchListTile(
-          title: Text(tr.toggleLabel, style: context.textTheme.bodyLarge),
-          value: state.enabled,
-          onChanged: notifier.setEnabled,
-        ),
-        if (state.enabled) ...[
-          const Divider(),
-          const SizedBox(height: KasySpacing.sm),
-          Text(
-            tr.typeLabel,
-            style: context.textTheme.labelLarge?.copyWith(
-              color: context.colors.muted,
-            ),
-          ),
-          const SizedBox(height: KasySpacing.sm),
-          _TypeSelector(current: state.type, onChanged: notifier.setType),
-          const SizedBox(height: KasySpacing.lg),
-          Text(
-            tr.timeLabel,
-            style: context.textTheme.labelLarge?.copyWith(
-              color: context.colors.muted,
-            ),
-          ),
-          const SizedBox(height: KasySpacing.sm),
-          _TimeTile(
-            hour: state.hour,
-            minute: state.minute,
-            onChanged: (h, m) => notifier.setTime(h, m),
+    return Center(
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 600),
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(
+            KasySpacing.pageHorizontalGutter,
+            KasySpacing.belowChromeContentGap,
+            KasySpacing.pageHorizontalGutter,
+            KasySpacing.xl,
           ),
-          if (state.type == ReminderType.weekly) ...[
-            const SizedBox(height: KasySpacing.lg),
-            Text(
-              tr.dayLabel,
-              style: context.textTheme.labelLarge?.copyWith(
-                color: context.colors.muted,
-              ),
-            ),
-            const SizedBox(height: KasySpacing.sm),
-            _DaySelector(
-              current: state.dayOfWeek,
-              onChanged: notifier.setDayOfWeek,
-            ),
-          ],
-          if (state.type == ReminderType.specificDate) ...[
-            const SizedBox(height: KasySpacing.lg),
-            Text(
-              tr.dateLabel,
-              style: context.textTheme.labelLarge?.copyWith(
-                color: context.colors.muted,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              KasyCard(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: KasySpacing.md,
+                  vertical: KasySpacing.xs,
+                ),
+                child: SettingsSwitchTile(
+                  icon: KasyIcons.notification,
+                  title: tr.toggleLabel,
+                  value: state.enabled,
+                  onChanged: notifier.setEnabled,
+                ),
               ),
-            ),
-            const SizedBox(height: KasySpacing.sm),
-            _DateTile(date: state.date, onChanged: notifier.setDate),
-          ],
-        ],
-      ],
-    );
-  }
-}
-
-class _TypeSelector extends StatelessWidget {
-  final ReminderType current;
-  final ValueChanged<ReminderType> onChanged;
-
-  const _TypeSelector({required this.current, required this.onChanged});
-
-  @override
-  Widget build(BuildContext context) {
-    final tr = Translations.of(context).reminderPage;
-    return SegmentedButton<ReminderType>(
-      segments: [
-        ButtonSegment(value: ReminderType.daily, label: Text(tr.daily)),
-        ButtonSegment(value: ReminderType.weekly, label: Text(tr.weekly)),
-        ButtonSegment(
-          value: ReminderType.specificDate,
-          label: Text(tr.specificDate),
+              if (state.enabled) ...[
+                const SizedBox(height: KasySpacing.xl),
+                _FieldLabel(tr.typeLabel),
+                const SizedBox(height: KasySpacing.sm),
+                // Default hug mode scrolls horizontally when the labels don't
+                // fit (long localized strings) instead of overflowing the row.
+                KasyTabs(
+                  tabs: [tr.daily, tr.weekly, tr.specificDate],
+                  selectedIndex: _types.indexOf(state.type),
+                  onTabSelected: (i) => notifier.setType(_types[i]),
+                ),
+                // daily / weekly schedule by a wall-clock time (hour + minute);
+                // specificDate carries its own time inside the chosen date.
+                if (state.type == ReminderType.daily ||
+                    state.type == ReminderType.weekly) ...[
+                  const SizedBox(height: KasySpacing.lg),
+                  _FieldLabel(tr.timeLabel),
+                  const SizedBox(height: KasySpacing.sm),
+                  _TimeTile(
+                    hour: state.hour,
+                    minute: state.minute,
+                    onChanged: (h, m) => notifier.setTime(h, m),
+                  ),
+                ],
+                if (state.type == ReminderType.weekly) ...[
+                  const SizedBox(height: KasySpacing.lg),
+                  _FieldLabel(tr.dayLabel),
+                  const SizedBox(height: KasySpacing.sm),
+                  _DaySelector(
+                    current: state.dayOfWeek,
+                    onChanged: notifier.setDayOfWeek,
+                  ),
+                ],
+                if (state.type == ReminderType.specificDate) ...[
+                  const SizedBox(height: KasySpacing.lg),
+                  _FieldLabel(tr.dateLabel),
+                  const SizedBox(height: KasySpacing.sm),
+                  KasyDatePicker(
+                    value: state.date,
+                    minDate: DateTime.now(),
+                    onChanged: (picked) {
+                      // Keep the previously chosen time when the day changes.
+                      final DateTime? base = state.date;
+                      notifier.setDate(
+                        DateTime(
+                          picked.year,
+                          picked.month,
+                          picked.day,
+                          base?.hour ?? 9,
+                          base?.minute ?? 0,
+                        ),
+                      );
+                    },
+                  ),
+                  const SizedBox(height: KasySpacing.lg),
+                  _FieldLabel(tr.timeLabel),
+                  const SizedBox(height: KasySpacing.sm),
+                  _TimeTile(
+                    hour: state.date?.hour ?? 9,
+                    minute: state.date?.minute ?? 0,
+                    onChanged: (h, m) {
+                      // Keep the previously chosen day when the time changes.
+                      final DateTime base = state.date ?? DateTime.now();
+                      notifier.setDate(
+                        DateTime(base.year, base.month, base.day, h, m),
+                      );
+                    },
+                  ),
+                ],
+              ],
+            ],
+          ),
         ),
-      ],
-      selected: {current},
-      onSelectionChanged: (s) => onChanged(s.first),
-      style: ButtonStyle(
-        textStyle: WidgetStateProperty.all(context.textTheme.labelSmall),
       ),
     );
   }
 }
 
-class _TimeTile extends StatelessWidget {
-  final int hour;
-  final int minute;
-  final void Function(int hour, int minute) onChanged;
+/// Quiet group eyebrow above each field — the design-system section label
+/// (small, gently tracked, muted), matching the Settings / sidebar pattern.
+class _FieldLabel extends StatelessWidget {
+  final String label;
 
-  const _TimeTile({
-    required this.hour,
-    required this.minute,
-    required this.onChanged,
-  });
-
-  String _pad(int v) => v.toString().padLeft(2, '0');
+  const _FieldLabel(this.label);
 
   @override
   Widget build(BuildContext context) {
-    Future<void> pickTime() async {
-      final picked = await showTimePicker(
-        context: context,
-        initialTime: TimeOfDay(hour: hour, minute: minute),
-      );
-      if (picked != null) {
-        onChanged(picked.hour, picked.minute);
-      }
-    }
-
-    return KasyFocusRing(
-      onActivate: pickTime,
-      borderRadius: BorderRadius.circular(KasySpacing.sm),
-      child: InkWell(
-        canRequestFocus: false,
-        onTap: pickTime,
-        borderRadius: BorderRadius.circular(KasySpacing.sm),
-        child: Container(
-          padding: const EdgeInsets.symmetric(
-            horizontal: KasySpacing.md,
-            vertical: KasySpacing.smd,
-          ),
-          decoration: BoxDecoration(
-            color: context.colors.surface,
-            borderRadius: BorderRadius.circular(KasySpacing.sm),
-          ),
-          child: Row(
-            children: [
-              Icon(KasyIcons.time, color: context.colors.primary),
-              const SizedBox(width: KasySpacing.sm),
-              Text(
-                '${_pad(hour)}:${_pad(minute)}',
-                style: context.textTheme.headlineMedium?.copyWith(
-                  color: context.colors.onSurface,
-                  fontWeight: FontWeight.bold,
-                ),
-              ),
-              const Spacer(),
-              Icon(
-                KasyIcons.arrowForwardIos,
-                size: KasyIconSize.xs,
-                color: context.colors.muted,
-              ),
-            ],
-          ),
-        ),
-      ),
+    return Text(
+      label,
+      style: KasyTextTheme.sectionLabel.copyWith(color: context.colors.muted),
     );
   }
 }
@@ -217,12 +191,12 @@ class _DaySelector extends StatelessWidget {
     final days = ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'];
     return Wrap(
       spacing: KasySpacing.xs,
+      runSpacing: KasySpacing.xs,
       children: List.generate(7, (i) {
         final dayIndex = i + 1;
-        final selected = current == dayIndex;
-        return ChoiceChip(
-          label: Text(days[i]),
-          selected: selected,
+        return KasyChip(
+          label: days[i],
+          selected: current == dayIndex,
           onSelected: (_) => onChanged(dayIndex),
         );
       }),
@@ -230,82 +204,64 @@ class _DaySelector extends StatelessWidget {
   }
 }
 
-class _DateTile extends StatelessWidget {
-  final DateTime? date;
-  final ValueChanged<DateTime> onChanged;
+/// A tappable field that opens the time picker. Built on [KasyCard] so it
+/// inherits the design-system surface, press depth and keyboard focus ring.
+class _TimeTile extends StatelessWidget {
+  final int hour;
+  final int minute;
+  final void Function(int hour, int minute) onChanged;
 
-  const _DateTile({required this.date, required this.onChanged});
+  const _TimeTile({
+    required this.hour,
+    required this.minute,
+    required this.onChanged,
+  });
+
+  String _pad(int v) => v.toString().padLeft(2, '0');
 
   @override
   Widget build(BuildContext context) {
-    final label = date != null
-        ? '${date!.day.toString().padLeft(2, '0')}/${date!.month.toString().padLeft(2, '0')}/${date!.year}  ${date!.hour.toString().padLeft(2, '0')}:${date!.minute.toString().padLeft(2, '0')}'
-        : Translations.of(context).reminderPage.selectDate;
-
-    Future<void> pickDateTime() async {
-      final now = DateTime.now();
-      final pickedDate = await showDatePicker(
-        context: context,
-        initialDate: date ?? now,
-        firstDate: now,
-        lastDate: now.add(const Duration(days: 365)),
-      );
-      if (pickedDate == null || !context.mounted) return;
-      final pickedTime = await showTimePicker(
+    Future<void> pickTime() async {
+      final picked = await showTimePicker(
         context: context,
-        initialTime: TimeOfDay(
-          hour: date?.hour ?? 9,
-          minute: date?.minute ?? 0,
-        ),
-      );
-      if (pickedTime == null) return;
-      onChanged(
-        DateTime(
-          pickedDate.year,
-          pickedDate.month,
-          pickedDate.day,
-          pickedTime.hour,
-          pickedTime.minute,
-        ),
+        initialTime: TimeOfDay(hour: hour, minute: minute),
       );
+      if (picked != null) {
+        onChanged(picked.hour, picked.minute);
+      }
     }
 
-    return KasyFocusRing(
-      onActivate: pickDateTime,
-      borderRadius: BorderRadius.circular(KasySpacing.sm),
-      child: InkWell(
-        canRequestFocus: false,
-        onTap: pickDateTime,
-        borderRadius: BorderRadius.circular(KasySpacing.sm),
-        child: Container(
-          padding: const EdgeInsets.symmetric(
-            horizontal: KasySpacing.md,
-            vertical: KasySpacing.smd,
+    return KasyCard(
+      onTap: pickTime,
+      borderRadius: KasyRadius.mdBorderRadius,
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.smd,
+      ),
+      child: Row(
+        children: [
+          Icon(
+            KasyIcons.time,
+            size: KasyIconSize.lg,
+            color: context.colors.primary,
           ),
-          decoration: BoxDecoration(
-            color: context.colors.surface,
-            borderRadius: BorderRadius.circular(KasySpacing.sm),
+          const SizedBox(width: KasySpacing.sm),
+          Text(
+            '${_pad(hour)}:${_pad(minute)}',
+            style: context.textTheme.bodyLarge?.copyWith(
+              color: context.colors.onSurface,
+              fontWeight: FontWeight.w600,
+            ),
           ),
-          child: Row(
-            children: [
-              Icon(KasyIcons.calendar, color: context.colors.primary),
-              const SizedBox(width: KasySpacing.sm),
-              Text(
-                label,
-                style: context.textTheme.bodyLarge?.copyWith(
-                  color: context.colors.onSurface,
-                ),
-              ),
-              const Spacer(),
-              Icon(
-                KasyIcons.arrowForwardIos,
-                size: KasyIconSize.xs,
-                color: context.colors.muted,
-              ),
-            ],
+          const Spacer(),
+          Icon(
+            KasyIcons.arrowForwardIos,
+            size: KasyIconSize.xs,
+            color: context.colors.muted,
           ),
-        ),
+        ],
       ),
     );
   }
 }
+

package/templates/firebase/lib/features/notifications/ui/components/notification_settings_sheet.dart

@@ -121,8 +121,8 @@ class _NotificationSettingsSheetState
                   title: tr.push_title,
                   value: _isEnabled,
                   iconBackgroundColor: _isEnabled
-                      ? const Color(0xFFFF6B35)
-                      : const Color(0xFF78909C),
+                      ? const Color(0xFFFF6B35) // design-check: ignore — category accent
+                      : const Color(0xFF78909C), // design-check: ignore — category accent
                   onChanged: _toggling ? (_) {} : _onToggle,
                 ),
                 // subtitle below

package/templates/firebase/lib/features/notifications/ui/components/notification_tile.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_animate/flutter_animate.dart';
+import 'package:kasy_kit/components/kasy_card.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/features/notifications/providers/models/notification.dart'
@@ -31,15 +32,27 @@ class NotificationTileComponent extends StatelessWidget {
       ],
       delay: index < 6 ? Duration(milliseconds: 60 * index) : Duration.zero,
       onComplete: (controller) => controller.stop(),
-      child: KasyHover(
-        onTap: () => onTap?.call(notification),
-        borderRadius: KasyRadius.smBorderRadius,
-        focusable: true,
+      // Card surface (elevated, radius 16, hairline border + soft shadow) to
+      // match the Settings card; the hover/press feedback and keyboard focus
+      // ring live inside on the surface, exactly like a Settings row.
+      child: KasyCard(
         margin: const EdgeInsets.only(top: KasySpacing.sm),
-        child: NotificationTile.from(
-          key: ValueKey('notification_${notification.id}'),
-          context,
-          notification,
+        borderRadius: KasyRadius.lgBorderRadius,
+        padding: EdgeInsets.zero,
+        child: KasyHover(
+          onTap: () => onTap?.call(notification),
+          borderRadius: KasyRadius.lgBorderRadius,
+          focusable: true,
+          focusGapColor: context.colors.surface,
+          padding: const EdgeInsets.symmetric(
+            horizontal: KasySpacing.md,
+            vertical: KasySpacing.smd,
+          ),
+          child: NotificationTile.from(
+            key: ValueKey('notification_${notification.id}'),
+            context,
+            notification,
+          ),
         ),
       ),
     );

package/templates/firebase/lib/features/notifications/ui/components/push_notification_switcher.dart

@@ -72,8 +72,8 @@ class _PushNotificationSwitcherState
             title: tr.push_title,
             value: _isEnabled,
             iconBackgroundColor: _isEnabled
-                ? const Color(0xFFFF6B35)
-                : const Color(0xFF78909C),
+                ? const Color(0xFFFF6B35) // design-check: ignore — category accent
+                : const Color(0xFF78909C), // design-check: ignore — category accent
             onChanged: _loading ? (_) {} : _onChanged,
           ),
           Padding(

package/templates/firebase/lib/features/notifications/ui/notifications_page.dart

@@ -257,12 +257,9 @@ class _GroupLabel extends StatelessWidget {
       ),
       child: Text(
         label.toUpperCase(),
-        style: context.textTheme.labelSmall?.copyWith(
-          fontSize: 11,
-          color: context.colors.muted,
-          letterSpacing: 1.4,
-          fontWeight: FontWeight.w700,
-        ),
+        // Design-system section-eyebrow role (same as Settings' section labels),
+        // instead of a bespoke 11/w700 style.
+        style: KasyTextTheme.sectionLabel.copyWith(color: context.colors.muted),
       ),
     );
   }