kasy-cli 1.2.1

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

@@ -0,0 +1,549 @@
+import 'dart:ui' show lerpDouble;
+
+import 'package:flutter/foundation.dart' show kIsWeb;
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+/// Logical sizes for [KasyAvatar] (diameter in logical pixels).
+enum KasyAvatarSize {
+  small(40),
+  medium(54),
+  large(70);
+
+  const KasyAvatarSize(this.diameter);
+  final double diameter;
+}
+
+/// Accent palette for text / icon fallbacks.
+enum KasyAvatarTone { blue, neutral, green, orange, red }
+
+/// Surface treatment for fallback content (initials / icon).
+enum KasyAvatarFallbackSurface { default_, soft }
+
+/// Clip shape for photo avatars.
+enum KasyAvatarShape { circle, roundedSquare }
+
+/// Online / presence indicator (drawn at bottom-trailing).
+enum KasyAvatarStatus { online }
+
+/// Design-system avatar: image, initials, icon, gradient, or custom child.
+///
+/// Decorative radial fills: optional [KasyAvatarOrbGradients] (barrel presets).
+class KasyAvatar extends StatelessWidget {
+  final KasyAvatarSize size;
+
+  /// When set, overrides [KasyAvatarSize.diameter] (e.g. grouped stacks).
+  final double? diameter;
+  final ImageProvider? image;
+  final String? initials;
+  final IconData? icon;
+  final Widget? customChild;
+  final KasyAvatarTone tone;
+  final KasyAvatarFallbackSurface fallbackSurface;
+  final KasyAvatarShape shape;
+  final bool showShadow;
+  final bool showStoryRing;
+  final Gradient? storyRingGradient;
+  final KasyAvatarStatus? status;
+  final Gradient? backgroundGradient;
+  final VoidCallback? onTap;
+  final String? semanticLabel;
+
+  const KasyAvatar({
+    super.key,
+    this.size = KasyAvatarSize.medium,
+    this.diameter,
+    this.image,
+    this.initials,
+    this.icon,
+    this.customChild,
+    this.tone = KasyAvatarTone.blue,
+    this.fallbackSurface = KasyAvatarFallbackSurface.default_,
+    this.shape = KasyAvatarShape.circle,
+    this.showShadow = true,
+    this.showStoryRing = false,
+    this.storyRingGradient,
+    this.status,
+    this.backgroundGradient,
+    this.onTap,
+    this.semanticLabel,
+  });
+
+  /// Gradient fill only (e.g. size showcase / decorative).
+  factory KasyAvatar.gradientFill({
+    Key? key,
+    required KasyAvatarSize size,
+    required Gradient gradient,
+    double? diameter,
+    bool showShadow = true,
+    VoidCallback? onTap,
+    String? semanticLabel,
+  }) {
+    return KasyAvatar(
+      key: key,
+      size: size,
+      diameter: diameter,
+      backgroundGradient: gradient,
+      showShadow: showShadow,
+      onTap: onTap,
+      semanticLabel: semanticLabel,
+    );
+  }
+
+  double get _d => diameter ?? size.diameter;
+
+  @override
+  Widget build(BuildContext context) {
+    final Widget core = SizedBox(
+      width: _d,
+      height: _d,
+      child: _buildCore(context),
+    );
+    final Widget disk = showStoryRing && shape == KasyAvatarShape.circle
+        ? _storyRingWrap(context, core)
+        : _clip(context, core);
+    Widget body = disk;
+    if (showShadow) {
+      body = DecoratedBox(
+        decoration: BoxDecoration(
+          shape: shape == KasyAvatarShape.circle
+              ? BoxShape.circle
+              : BoxShape.rectangle,
+          borderRadius: shape == KasyAvatarShape.roundedSquare
+              ? BorderRadius.circular(_d * 0.32)
+              : null,
+          boxShadow: [KasyShadows.component(context)],
+        ),
+        child: disk,
+      );
+    }
+    if (status != null) {
+      body = _statusWrap(context, body);
+    }
+    if (onTap == null) {
+      return _maybeSemantics(body);
+    }
+    return _KasyAvatarPressable(
+      onPressed: onTap!,
+      semanticLabel: semanticLabel ?? 'Avatar',
+      minSide: _d < 44 ? 44.0 : _d,
+      child: body,
+    );
+  }
+
+  Widget _maybeSemantics(Widget child) {
+    if (semanticLabel == null) {
+      return child;
+    }
+    return Semantics(label: semanticLabel, child: child);
+  }
+
+  Widget _buildCore(BuildContext context) {
+    if (customChild != null) {
+      return SizedBox(
+        width: _d,
+        height: _d,
+        child: Center(child: customChild),
+      );
+    }
+    if (image != null) {
+      return Image(
+        image: image!,
+        width: _d,
+        height: _d,
+        fit: BoxFit.cover,
+        // Evita o blur de decodificação progressiva de JPEG:
+        // enquanto a imagem carrega, mostra o fallback; quando o primeiro
+        // frame está pronto, faz crossfade suave.
+        frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+          if (wasSynchronouslyLoaded) return child;
+          return SizedBox(
+            width: _d,
+            height: _d,
+            child: Stack(
+              fit: StackFit.expand,
+              children: [
+                _fallbackContent(context, useIcon: icon != null),
+                AnimatedOpacity(
+                  opacity: frame == null ? 0.0 : 1.0,
+                  duration: const Duration(milliseconds: 250),
+                  curve: Curves.easeIn,
+                  child: child,
+                ),
+              ],
+            ),
+          );
+        },
+        errorBuilder: (context, error, stack) =>
+            _fallbackContent(context, useIcon: true),
+      );
+    }
+    if (backgroundGradient != null) {
+      final String? initialsRaw = initials?.trim();
+      return Stack(
+        fit: StackFit.expand,
+        children: [
+          DecoratedBox(
+            decoration: BoxDecoration(
+              shape: shape == KasyAvatarShape.circle
+                  ? BoxShape.circle
+                  : BoxShape.rectangle,
+              borderRadius: shape == KasyAvatarShape.roundedSquare
+                  ? BorderRadius.circular(_d * 0.32)
+                  : null,
+              gradient: backgroundGradient,
+            ),
+          ),
+          if (initialsRaw != null && initialsRaw.isNotEmpty)
+            Center(
+              child: Text(
+                _twoInitials(initialsRaw),
+                style: context.textTheme.titleSmall?.copyWith(
+                  color: Colors.white,
+                  fontWeight: FontWeight.w700,
+                  fontSize: _d * 0.34,
+                  height: 1,
+                ),
+              ),
+            ),
+        ],
+      );
+    }
+    final String? t = initials?.trim();
+    if (t != null && t.isNotEmpty) {
+      return _fallbackContent(context, label: _twoInitials(t));
+    }
+    return _fallbackContent(context, useIcon: true);
+  }
+
+  String _twoInitials(String raw) {
+    final List<String> parts = raw
+        .split(RegExp(r'\s+'))
+        .where((String e) => e.isNotEmpty)
+        .toList();
+    if (parts.isEmpty) {
+      return '';
+    }
+    if (parts.length == 1) {
+      final String w = parts.first;
+      return w.length >= 2 ? w.substring(0, 2).toUpperCase() : w.toUpperCase();
+    }
+    return (parts[0][0] + parts[1][0]).toUpperCase();
+  }
+
+  Widget _fallbackContent(
+    BuildContext context, {
+    String? label,
+    bool useIcon = false,
+  }) {
+    final _KasyAvatarColors c = _colorsForTone(context, tone, fallbackSurface);
+    final Color bg = c.background;
+    final Color fg = c.foreground;
+    if (useIcon) {
+      final IconData glyph = icon ?? KasyIcons.person;
+      return ColoredBox(
+        color: bg,
+        child: Center(
+          child: Icon(glyph, size: _d * 0.48, color: fg),
+        ),
+      );
+    }
+    return ColoredBox(
+      color: bg,
+      child: Center(
+        child: Text(
+          label ?? '',
+          style: context.textTheme.titleSmall?.copyWith(
+            color: fg,
+            fontWeight: FontWeight.w600,
+            fontSize: _d * 0.32,
+            height: 1,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _clip(BuildContext context, Widget child) {
+    if (shape == KasyAvatarShape.circle) {
+      return ClipOval(child: child);
+    }
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(_d * 0.32),
+      child: child,
+    );
+  }
+
+  Widget _storyRingWrap(BuildContext context, Widget core) {
+    final Gradient ring =
+        storyRingGradient ??
+        const LinearGradient(
+          colors: [Color(0xFFFF6B9D), Color(0xFFFF9F43), Color(0xFFFFE066)],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        );
+    final Color innerDisc = context.colors.surface;
+    return Container(
+      padding: const EdgeInsets.all(2.5),
+      decoration: BoxDecoration(shape: BoxShape.circle, gradient: ring),
+      child: Container(
+        padding: const EdgeInsets.all(2),
+        decoration: BoxDecoration(color: innerDisc, shape: BoxShape.circle),
+        child: ClipOval(
+          child: SizedBox(width: _d, height: _d, child: core),
+        ),
+      ),
+    );
+  }
+
+  Widget _statusWrap(BuildContext context, Widget inner) {
+    final double badge = (_d * 0.26).clamp(11.0, 16.0);
+    return Stack(
+      clipBehavior: Clip.none,
+      children: [
+        inner,
+        Positioned(
+          right: -1,
+          bottom: -1,
+          child: Container(
+            width: badge,
+            height: badge,
+            decoration: BoxDecoration(
+              color: const Color(0xFF81C784),
+              shape: BoxShape.circle,
+              border: Border.all(color: context.colors.surface, width: 2),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// Horizontal stacked avatars with [KasyColors.surface] separation ring and optional +N.
+class KasyAvatarGroup extends StatelessWidget {
+  final List<Widget> avatars;
+  final int maxVisible;
+  final int extraCount;
+  final double overlapFactor;
+  final bool showShadow;
+  final double itemDiameter;
+
+  const KasyAvatarGroup({
+    super.key,
+    required this.avatars,
+    this.maxVisible = 4,
+    this.extraCount = 0,
+    this.overlapFactor = 0.34,
+    this.showShadow = true,
+    this.itemDiameter = 48,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final int n = avatars.length.clamp(0, maxVisible);
+    final double d = itemDiameter;
+    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,
+      height: d + 4,
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          for (int i = 0; i < n; i++)
+            Positioned(
+              left: i * step,
+              top: 0,
+              child: _ringWrap(context, d, avatars[i], showShadow),
+            ),
+          if (showCounter > 0)
+            Positioned(
+              left: n * step,
+              top: 0,
+              child: _ringWrap(
+                context,
+                d,
+                ColoredBox(
+                  color: context.colors.avatarFallbackFill,
+                  child: Center(
+                    child: Text(
+                      '+$extraCount',
+                      style: context.textTheme.labelLarge?.copyWith(
+                        color: context.colors.primary,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ),
+                ),
+                showShadow,
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _ringWrap(BuildContext context, double d, Widget child, bool shadow) {
+    final Widget bordered = Container(
+      width: d,
+      height: d,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        border: Border.all(color: context.colors.surface, width: 2.5),
+        boxShadow: shadow ? [KasyShadows.component(context)] : null,
+      ),
+      child: ClipOval(
+        child: SizedBox(width: d, height: d, child: child),
+      ),
+    );
+    return bordered;
+  }
+}
+
+class _KasyAvatarColors {
+  final Color background;
+  final Color foreground;
+
+  const _KasyAvatarColors({required this.background, required this.foreground});
+}
+
+_KasyAvatarColors _colorsForTone(
+  BuildContext context,
+  KasyAvatarTone tone,
+  KasyAvatarFallbackSurface fallbackSurface,
+) {
+  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,
+    };
+  }
+
+  if (fallbackSurface == KasyAvatarFallbackSurface.default_) {
+    return _KasyAvatarColors(
+      background: k.avatarFallbackFill,
+      foreground: accent(),
+    );
+  }
+
+  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),
+    ),
+  };
+}
+
+class _KasyAvatarPressable extends StatefulWidget {
+  final Widget child;
+  final VoidCallback onPressed;
+  final String semanticLabel;
+  final double minSide;
+
+  const _KasyAvatarPressable({
+    required this.child,
+    required this.onPressed,
+    required this.semanticLabel,
+    required this.minSide,
+  });
+
+  @override
+  State<_KasyAvatarPressable> createState() => _KasyAvatarPressableState();
+}
+
+class _KasyAvatarPressableState extends State<_KasyAvatarPressable>
+    with SingleTickerProviderStateMixin {
+  static const double _pressIn = 0.94;
+  static const double _releasePeak = 1.03;
+  late final AnimationController _c;
+
+  @override
+  void initState() {
+    super.initState();
+    _c = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 380),
+    )..addListener(() => setState(() {}));
+  }
+
+  @override
+  void dispose() {
+    _c.dispose();
+    super.dispose();
+  }
+
+  double get _s {
+    final double t = _c.value.clamp(0.0, 1.0);
+    if (t <= 0.28) {
+      return lerpDouble(1.0, _pressIn, t / 0.28)!;
+    }
+    if (t <= 0.55) {
+      return lerpDouble(_pressIn, _releasePeak, (t - 0.28) / 0.27)!;
+    }
+    return lerpDouble(_releasePeak, 1.0, (t - 0.55) / 0.45)!;
+  }
+
+  void _tap() {
+    widget.onPressed();
+    _c.forward(from: 0).whenComplete(() {
+      if (mounted) {
+        _c.reset();
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final Widget inner = Semantics(
+      button: true,
+      label: widget.semanticLabel,
+      child: GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: _tap,
+        child: ConstrainedBox(
+          constraints: BoxConstraints(
+            minWidth: widget.minSide,
+            minHeight: widget.minSide,
+          ),
+          child: Center(
+            child: Transform.scale(scale: _s, child: widget.child),
+          ),
+        ),
+      ),
+    );
+    if (!kIsWeb) return inner;
+    return MouseRegion(cursor: SystemMouseCursors.click, child: inner);
+  }
+}

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

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+
+/// Optional radial orb 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],
+  );
+
+  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],
+  );
+
+  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],
+  );
+
+  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],
+  );
+
+  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],
+  );
+
+  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],
+  );
+
+  /// 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],
+  );
+}
+
+/// Fixed Unsplash URLs for demos/catalog (network + permissions in prod).
+abstract final class KasyAvatarDemoPhotos {
+  static const String manGlasses =
+      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&auto=format';
+  static const String womanSmile =
+      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&auto=format';
+  static const String womanCurly =
+      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&auto=format';
+  static const String manBeard =
+      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&auto=format';
+}