kasy-cli 1.13.0 → 1.15.0

package/templates/firebase/ios/Runner/Info.plist

@@ -18,7 +18,7 @@
 			<string>pt-BR</string>
 		</array>
 		<key>CFBundleDisplayName</key>
-		<string>AppFirebase</string>
+		<string>Kasy App</string>
 		<key>CFBundleExecutable</key>
 		<string>$(EXECUTABLE_NAME)</string>
 		<key>CFBundleIdentifier</key>
@@ -57,7 +57,7 @@
 		<key>FacebookClientToken</key>
 		<string>00000000000000000000000000000000</string>
 		<key>FacebookDisplayName</key>
-		<string>AppFirebase</string>
+		<string>Kasy App</string>
 		<key>LSRequiresIPhoneOS</key>
 		<true/>
 		<key>NSPhotoLibraryAddUsageDescription</key>

package/templates/firebase/ios/Runner/es.lproj/InfoPlist.strings

@@ -1,5 +1,5 @@
 /* Localized Info.plist strings — es resources for system picker/camera UI (iOS). */
-"CFBundleDisplayName" = "AppFirebase";
+"CFBundleDisplayName" = "Kasy App";
 "NSCameraUsageDescription" = "Necesitamos la cámara para tomar fotos y vídeos.";
 "NSPhotoLibraryAddUsageDescription" = "Necesitamos acceso para guardar fotos y vídeos en la galería.";
 "NSPhotoLibraryUsageDescription" = "Necesitamos acceso para mostrar tus fotos recientes y abrir la galería desde la cámara.";

package/templates/firebase/ios/Runner/pt-BR.lproj/InfoPlist.strings

@@ -1,5 +1,5 @@
 /* Localized Info.plist strings — presence of pt-BR resources lets iOS use Portuguese for system UI (e.g. image picker). */
-"CFBundleDisplayName" = "AppFirebase";
+"CFBundleDisplayName" = "Kasy App";
 "NSCameraUsageDescription" = "Precisamos da câmera para tirar fotos e vídeos.";
 "NSPhotoLibraryAddUsageDescription" = "Precisamos de acesso para salvar fotos e vídeos na galeria.";
 "NSPhotoLibraryUsageDescription" = "Precisamos de acesso para mostrar suas fotos recentes e abrir a galeria a partir da câmera.";

package/templates/firebase/ios/Runner/pt.lproj/InfoPlist.strings

@@ -1,5 +1,5 @@
 /* Localized Info.plist strings — presence of pt-BR resources lets iOS use Portuguese for system UI (e.g. image picker). */
-"CFBundleDisplayName" = "AppFirebase";
+"CFBundleDisplayName" = "Kasy App";
 "NSCameraUsageDescription" = "Precisamos da câmera para tirar fotos e vídeos.";
 "NSPhotoLibraryAddUsageDescription" = "Precisamos de acesso para salvar fotos e vídeos na galeria.";
 "NSPhotoLibraryUsageDescription" = "Precisamos de acesso para mostrar suas fotos recentes e abrir a galeria a partir da câmera.";

package/templates/firebase/lib/components/components.dart

@@ -22,6 +22,7 @@ export 'kasy_dialog.dart';
 export 'kasy_otp_verification_bottom_sheet.dart';
 export 'kasy_skeleton.dart';
 export 'kasy_swipe_action.dart';
+export 'kasy_tabs.dart';
 export 'kasy_text_area.dart';
 export 'kasy_text_field.dart';
 export 'kasy_text_field_otp.dart';

package/templates/firebase/lib/components/kasy_avatar.dart

@@ -28,7 +28,7 @@ enum KasyAvatarStatus { online }
 
 /// Design-system avatar: image, initials, icon, gradient, or custom child.
 ///
-/// Decorative radial fills: optional [KasyAvatarOrbGradients] (barrel presets).
+/// Decorative linear fills: optional [KasyAvatarGradients] (barrel presets).
 class KasyAvatar extends StatelessWidget {
   final KasyAvatarSize size;
 
@@ -60,7 +60,7 @@ class KasyAvatar extends StatelessWidget {
     this.tone = KasyAvatarTone.blue,
     this.fallbackSurface = KasyAvatarFallbackSurface.default_,
     this.shape = KasyAvatarShape.circle,
-    this.showShadow = true,
+    this.showShadow = false,
     this.showStoryRing = false,
     this.storyRingGradient,
     this.status,
@@ -244,7 +244,7 @@ class KasyAvatar extends StatelessWidget {
       return ColoredBox(
         color: bg,
         child: Center(
-          child: Icon(glyph, size: _d * 0.48, color: fg),
+          child: Icon(glyph, size: _d * 0.444, color: fg),
         ),
       );
     }
@@ -253,11 +253,12 @@ class KasyAvatar extends StatelessWidget {
       child: Center(
         child: Text(
           label ?? '',
-          style: context.textTheme.titleSmall?.copyWith(
+          style: TextStyle(
             color: fg,
-            fontWeight: FontWeight.w600,
-            fontSize: _d * 0.32,
+            fontWeight: FontWeight.w500,
+            fontSize: _d * 0.333,
             height: 1,
+            leadingDistribution: TextLeadingDistribution.even,
           ),
         ),
       ),
@@ -320,7 +321,10 @@ class KasyAvatar extends StatelessWidget {
   }
 }
 
-/// Horizontal stacked avatars with [KasyColors.surface] separation ring and optional +N.
+/// Horizontal stacked avatars with [KasyColors.surface] separation ring,
+/// optional +N counter, and optional add-action button.
+///
+/// Set [onAdd] to show the "+" button at the end (12 px gap, per Figma spec).
 class KasyAvatarGroup extends StatelessWidget {
   final List<Widget> avatars;
   final int maxVisible;
@@ -329,14 +333,18 @@ class KasyAvatarGroup extends StatelessWidget {
   final bool showShadow;
   final double itemDiameter;
 
+  /// When non-null a circular "+" button is shown after the group.
+  final VoidCallback? onAdd;
+
   const KasyAvatarGroup({
     super.key,
     required this.avatars,
     this.maxVisible = 4,
     this.extraCount = 0,
-    this.overlapFactor = 0.34,
-    this.showShadow = true,
+    this.overlapFactor = 0.28,
+    this.showShadow = false,
     this.itemDiameter = 48,
+    this.onAdd,
   });
 
   @override
@@ -346,9 +354,10 @@ class KasyAvatarGroup extends StatelessWidget {
     final double step = d * (1 - overlapFactor);
     final int showCounter = extraCount > 0 ? 1 : 0;
     final int totalSlots = n + showCounter;
-    final double w = totalSlots <= 0 ? 0 : step * (totalSlots - 1) + d + 4;
-    return SizedBox(
-      width: w,
+    final double stackW = totalSlots <= 0 ? 0 : step * (totalSlots - 1) + d + 4;
+
+    final Widget stack = SizedBox(
+      width: stackW,
       height: d + 4,
       child: Stack(
         clipBehavior: Clip.none,
@@ -371,9 +380,14 @@ class KasyAvatarGroup extends StatelessWidget {
                   child: Center(
                     child: Text(
                       '+$extraCount',
-                      style: context.textTheme.labelLarge?.copyWith(
-                        color: context.colors.primary,
-                        fontWeight: FontWeight.w600,
+                      style: TextStyle(
+                        color: context.isDark
+                            ? const Color(0xFFFCFCFC)
+                            : const Color(0xFF18181B),
+                        fontWeight: FontWeight.w500,
+                        fontSize: 12,
+                        height: 16 / 12,
+                        leadingDistribution: TextLeadingDistribution.even,
                       ),
                     ),
                   ),
@@ -384,22 +398,50 @@ class KasyAvatarGroup extends StatelessWidget {
         ],
       ),
     );
+
+    if (onAdd == null) return stack;
+
+    // Add-action button: circle with "+" icon, 12 px gap (Figma layout_EJ08D4).
+    final Widget addBtn = _KasyAvatarPressable(
+      onPressed: onAdd!,
+      semanticLabel: 'Add member',
+      minSide: d < 44 ? 44.0 : d,
+      child: Container(
+        width: d,
+        height: d,
+        decoration: BoxDecoration(
+          color: context.colors.avatarFallbackFill,
+          shape: BoxShape.circle,
+        ),
+        child: Center(
+          child: Icon(
+            KasyIcons.add,
+            size: d * 0.444,
+            color: context.colors.primary,
+          ),
+        ),
+      ),
+    );
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [stack, const SizedBox(width: 12), addBtn],
+    );
   }
 
   Widget _ringWrap(BuildContext context, double d, Widget child, bool shadow) {
-    final Widget bordered = Container(
+    return Container(
       width: d,
       height: d,
       decoration: BoxDecoration(
         shape: BoxShape.circle,
-        border: Border.all(color: context.colors.surface, width: 2.5),
+        border: Border.all(color: context.colors.surface, width: 2.0),
         boxShadow: shadow ? [KasyShadows.component(context)] : null,
       ),
       child: ClipOval(
         child: SizedBox(width: d, height: d, child: child),
       ),
     );
-    return bordered;
   }
 }
 
@@ -418,52 +460,41 @@ _KasyAvatarColors _colorsForTone(
   final KasyColors k = context.colors;
   final bool dark = context.isDark;
 
-  Color accent() {
-    return switch (tone) {
-      KasyAvatarTone.blue => k.primary,
-      KasyAvatarTone.neutral => k.grey3,
-      KasyAvatarTone.green => k.success,
-      KasyAvatarTone.orange => k.warning,
-      KasyAvatarTone.red => k.error,
-    };
-  }
+  // Accent color per tone (Figma: accent=#0485F7, success=#17C964,
+  // warning=#F5A524, danger=#FF383C, neutral uses neutral fg).
+  Color accentColor() => switch (tone) {
+    KasyAvatarTone.blue    => k.primary,
+    KasyAvatarTone.neutral => k.grey3,
+    KasyAvatarTone.green   => k.success,
+    KasyAvatarTone.orange  => k.warning,
+    KasyAvatarTone.red     => k.error,
+  };
 
+  // Solid surface: all types share the same #EBEBEC bg (Figma fill_J18KAR).
+  // Foreground: neutral → onSurface (#18181B light), others → accent color.
   if (fallbackSurface == KasyAvatarFallbackSurface.default_) {
+    final Color fg = tone == KasyAvatarTone.neutral
+        ? k.onSurface
+        : accentColor();
+    return _KasyAvatarColors(background: k.avatarFallbackFill, foreground: fg);
+  }
+
+  // Neutral soft = same as neutral solid (Figma: no tint for default type).
+  if (tone == KasyAvatarTone.neutral) {
     return _KasyAvatarColors(
       background: k.avatarFallbackFill,
-      foreground: accent(),
+      foreground: k.onSurface,
     );
   }
 
-  if (dark) {
-    final Color a = accent();
-    final Color bg = Color.alphaBlend(a.withValues(alpha: 0.28), k.surface);
-    final Color fg = Color.lerp(a, k.onSurface, 0.45)!;
-    return _KasyAvatarColors(background: bg, foreground: fg);
-  }
-
-  return switch (tone) {
-    KasyAvatarTone.blue => const _KasyAvatarColors(
-      background: Color(0xFFE3F2FD),
-      foreground: Color(0xFF1565C0),
-    ),
-    KasyAvatarTone.neutral => const _KasyAvatarColors(
-      background: Color(0xFFF0F0F0),
-      foreground: Color(0xFF212121),
-    ),
-    KasyAvatarTone.green => const _KasyAvatarColors(
-      background: Color(0xFFE8F5E9),
-      foreground: Color(0xFF1B5E20),
-    ),
-    KasyAvatarTone.orange => const _KasyAvatarColors(
-      background: Color(0xFFFFF3E0),
-      foreground: Color(0xFFE65100),
-    ),
-    KasyAvatarTone.red => const _KasyAvatarColors(
-      background: Color(0xFFFFEBEE),
-      foreground: Color(0xFFB71C1C),
-    ),
-  };
+  // Colored soft: rgba(accent, 0.15) blended over surface (white light / dark).
+  // Figma fill_MVOTCC: rgba(4,133,247,0.15) + #FFFFFF light
+  //                    rgba(4,133,247,0.15) + #18181B dark
+  // Foreground: pure accent color (Figma uses raw accent even in soft).
+  final Color a = accentColor();
+  final Color base = dark ? k.surface : const Color(0xFFFFFFFF);
+  final Color bg = Color.alphaBlend(a.withValues(alpha: 0.15), base);
+  return _KasyAvatarColors(background: bg, foreground: a);
 }
 
 class _KasyAvatarPressable extends StatefulWidget {

package/templates/firebase/lib/components/kasy_avatar_presets.dart

@@ -1,94 +1,136 @@
 import 'package:flutter/material.dart';
 
-/// Optional radial orb presets for [KasyAvatar] via `backgroundGradient` or
+/// Linear gradient presets for [KasyAvatar] via `backgroundGradient` or
 /// [KasyAvatar.gradientFill].
 ///
-/// Remote photo URLs ([KasyAvatarDemoPhotos]) are for demos/catalog only (needs network).
-abstract final class KasyAvatarOrbGradients {
-  static const RadialGradient sphereBlue = RadialGradient(
-    center: Alignment(-0.42, -0.48),
-    radius: 1.08,
-    colors: [
-      Color(0xFFE3F4FF),
-      Color(0xFF64B5F6),
-      Color(0xFF1E88E5),
-      Color(0xFF0A3068),
-    ],
-    stops: [0.0, 0.32, 0.68, 1.0],
+/// Matches the HeroUI Figma Kit V3 avatar palette exactly.
+/// All gradients use 141° (upper-left → lower-right), flat from 0%→27%,
+/// then transition to the second color at 100% — same as Figma specification.
+abstract final class KasyAvatarGradients {
+  // 141° CSS angle → Flutter Alignment
+  // begin = upper-left region (-sin141°, cos141°) ≈ (-0.63, -0.78)
+  // end   = lower-right region (+sin141°, -cos141°) ≈ (+0.63, +0.78)
+  static const Alignment _b = Alignment(-0.63, -0.78);
+  static const Alignment _e = Alignment(0.63, 0.78);
+
+  /// Cornflower blue → deep blue
+  static const LinearGradient blue = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF5D9BE7), Color(0xFF5D9BE7), Color(0xFF0026FF)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Cyan-blue → violet
+  static const LinearGradient sky = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF5DD0E7), Color(0xFF5DD0E7), Color(0xFF7300FF)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Aqua → deep blue
+  static const LinearGradient teal = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF5DE7E7), Color(0xFF5DE7E7), Color(0xFF001AFF)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Mint green → royal blue
+  static const LinearGradient emerald = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF5DE79D), Color(0xFF5DE79D), Color(0xFF0033FF)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Seafoam → dark forest green
+  static const LinearGradient green = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF52DEB0), Color(0xFF52DEB0), Color(0xFF0D5C45)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Turquoise → deep forest green
+  static const LinearGradient forest = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF5DD9AF), Color(0xFF5DD9AF), Color(0xFF094E39)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Golden yellow → deep red-orange
+  static const LinearGradient orange = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFFE7BD5D), Color(0xFFE7BD5D), Color(0xFFFF1E00)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Salmon → scarlet
+  static const LinearGradient red = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFFE7885D), Color(0xFFE7885D), Color(0xFFFF0004)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  static const RadialGradient sphereFuchsia = RadialGradient(
-    center: Alignment(-0.36, -0.46),
-    radius: 1.1,
-    colors: [
-      Color(0xFFFFE4EE),
-      Color(0xFFF48FB1),
-      Color(0xFFE91E63),
-      Color(0xFF880E4F),
-    ],
-    stops: [0.0, 0.35, 0.71, 1.0],
+  /// Soft purple → cobalt blue
+  static const LinearGradient indigo = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFFB45DE7), Color(0xFFB45DE7), Color(0xFF0055FF)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  static const RadialGradient sphereSunset = RadialGradient(
-    center: Alignment(-0.45, -0.38),
-    radius: 1.06,
-    colors: [
-      Color(0xFFFFF8E1),
-      Color(0xFFFFB74D),
-      Color(0xFFFF6E40),
-      Color(0xFFB71C1C),
-    ],
-    stops: [0.0, 0.33, 0.69, 1.0],
+  /// Medium purple → crimson
+  static const LinearGradient purple = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF8D5DE7), Color(0xFF8D5DE7), Color(0xFFFF0009)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  static const RadialGradient sphereTeal = RadialGradient(
-    center: Alignment(-0.4, -0.42),
-    radius: 1.07,
-    colors: [
-      Color(0xFFE0F7F4),
-      Color(0xFF4DD0E1),
-      Color(0xFF00838F),
-      Color(0xFF004D40),
-    ],
-    stops: [0.0, 0.34, 0.7, 1.0],
+  /// Orchid pink → deep magenta-red
+  static const LinearGradient rose = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFFE75DCB), Color(0xFFE75DCB), Color(0xFFFF000D)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  static const RadialGradient sphereViolet = RadialGradient(
-    center: Alignment(-0.38, -0.5),
-    radius: 1.09,
-    colors: [
-      Color(0xFFF3E5F5),
-      Color(0xFFCE93D8),
-      Color(0xFF8E24AA),
-      Color(0xFF311B92),
-    ],
-    stops: [0.0, 0.36, 0.72, 1.0],
+  /// Hot pink → coral red
+  static const LinearGradient hotPink = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFFE43673), Color(0xFFE43673), Color(0xFFFB5059)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  static const RadialGradient sphereAmber = RadialGradient(
-    center: Alignment(-0.45, -0.35),
-    radius: 1.06,
-    colors: [
-      Color(0xFFFFFDE7),
-      Color(0xFFFFCA28),
-      Color(0xFFFF8F00),
-      Color(0xFFE65100),
-    ],
-    stops: [0.0, 0.33, 0.69, 1.0],
+  /// Silver → near-black
+  static const LinearGradient silver = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF949494), Color(0xFF949494), Color(0xFF080808)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  /// Dual-tone orb pairing well with initials on top.
-  static const RadialGradient sphereGb = RadialGradient(
-    center: Alignment(-0.28, -0.52),
-    radius: 1.12,
-    colors: [
-      Color(0xFFFFCCBC),
-      Color(0xFFFF4081),
-      Color(0xFFB388FF),
-      Color(0xFF4527A0),
-    ],
-    stops: [0.0, 0.3, 0.62, 1.0],
+  /// Mid-grey → very dark grey
+  static const LinearGradient black = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF7F7F7F), Color(0xFF7F7F7F), Color(0xFF1F1F1F)],
+    stops: [0.0, 0.27, 1.0],
   );
+
+  /// All 14 presets in display order (matches Figma "Image Use" section).
+  static const List<LinearGradient> all = [
+    blue, sky, teal, emerald, green, forest,
+    orange, red, indigo, purple, rose, hotPink,
+    silver, black,
+  ];
 }
 
 /// Fixed Unsplash URLs for demos/catalog (network + permissions in prod).

package/templates/firebase/lib/components/kasy_button.dart

@@ -377,6 +377,9 @@ class KasyButton extends StatelessWidget {
     }
     final KasyColors c = context.colors;
     final Color soft = c.surfaceNeutralSoft;
+    // Variants used on non-theme-matched backgrounds (e.g. inverse on the paywall gradient)
+    // need an explicit case — the generic disabled fallback blends with surfaceNeutralSoft,
+    // which goes near-black in dark mode and kills contrast on colored surfaces.
     return switch (variant) {
       KasyButtonVariant.primary => _KasyButtonPalette(
         background: Color.alphaBlend(c.primary.withValues(alpha: 0.62), soft),
@@ -388,6 +391,11 @@ class KasyButton extends StatelessWidget {
         foreground: c.primary.withValues(alpha: 0.90),
         border: Colors.transparent,
       ),
+      KasyButtonVariant.inverse => _KasyButtonPalette(
+        background: c.onPrimary,
+        foreground: c.primary.withValues(alpha: 0.62),
+        border: Colors.transparent,
+      ),
       _ => null,
     };
   }