kasy-cli 1.2.1

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

@@ -0,0 +1,233 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/components/kasy_bottom_sheet.dart';
+import 'package:kasy_kit/components/kasy_button.dart';
+import 'package:kasy_kit/components/kasy_text_field_otp.dart';
+import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+/// Built-in layouts for [showKasyOtpVerificationBottomSheet].
+enum KasyOtpVerificationSheetPreset {
+  /// Six digits, grouped 3–3, SMS footer + resend (demo phone line).
+  phoneVerification,
+
+  /// Four digits, flat neutral cells, minimal footer — PIN-style flow.
+  pinDigits,
+}
+
+/// Opens the OTP / PIN verification [KasyBottomSheet] (keyboard-aware,
+/// neutral-flat cells, no placeholder dashes).
+Future<T?> showKasyOtpVerificationBottomSheet<T>({
+  required BuildContext context,
+  KasyOtpVerificationSheetPreset preset =
+      KasyOtpVerificationSheetPreset.phoneVerification,
+}) {
+  return showKasyBottomSheet<T>(
+    context: context,
+    isScrollControlled: true,
+    builder: (BuildContext sheetCtx) => KasyOtpVerificationBottomSheet(
+      sheetContext: sheetCtx,
+      preset: preset,
+    ),
+  );
+}
+
+/// Sheet body for OTP or PIN entry — use via [showKasyOtpVerificationBottomSheet]
+/// or embed in your own modal.
+class KasyOtpVerificationBottomSheet extends StatefulWidget {
+  final BuildContext sheetContext;
+  final KasyOtpVerificationSheetPreset preset;
+
+  const KasyOtpVerificationBottomSheet({
+    super.key,
+    required this.sheetContext,
+    this.preset = KasyOtpVerificationSheetPreset.phoneVerification,
+  });
+
+  @override
+  State<KasyOtpVerificationBottomSheet> createState() =>
+      _KasyOtpVerificationBottomSheetState();
+}
+
+class _KasyOtpVerificationBottomSheetState
+    extends State<KasyOtpVerificationBottomSheet> {
+  String _code = '';
+  bool _isVerifying = false;
+  bool _isVerified = false;
+
+  bool get _phoneMode =>
+      widget.preset == KasyOtpVerificationSheetPreset.phoneVerification;
+
+  int get _otpLength => _phoneMode ? 6 : 4;
+
+  int? get _separatorAfterIndex => _phoneMode ? 2 : null;
+
+  bool get _isComplete => _code.length == _otpLength;
+
+  Future<void> _verify() async {
+    if (_isVerifying) return;
+    if (!_isComplete) {
+      await KasyHaptics.selection(context);
+      return;
+    }
+    setState(() {
+      _isVerifying = true;
+      _isVerified = false;
+    });
+    await Future<void>.delayed(const Duration(milliseconds: 900));
+    if (!mounted) return;
+    setState(() {
+      _isVerifying = false;
+      _isVerified = true;
+    });
+    await KasyHaptics.selection(context);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final BuildContext sheetContext = widget.sheetContext;
+    final String buttonLabel = _isVerified
+        ? (_phoneMode ? 'Verified' : 'Done')
+        : _isVerifying
+        ? (_phoneMode ? 'Verifying...' : 'Checking...')
+        : (_phoneMode ? 'Verify Code' : 'Continue');
+    final String title = _phoneMode
+        ? 'Verify your phone number'
+        : 'Enter your PIN';
+    final String message = _phoneMode
+        ? 'We sent a verification code to'
+        : 'Confirm with your 4-digit PIN.';
+    return SingleChildScrollView(
+      keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
+      child: KasyBottomSheet(
+        icon: _isVerified ? KasyIcons.checkCircle : KasyIcons.check,
+        title: title,
+        message: message,
+        addKeyboardInset: true,
+        body: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (_phoneMode) ...[
+              Text(
+                '+1 234 567 8900',
+                style: sheetContext.textTheme.titleLarge?.copyWith(
+                  fontWeight: FontWeight.w800,
+                  color: sheetContext.colors.onSurface,
+                ),
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: KasySpacing.xl),
+            ] else ...[
+              const SizedBox(height: KasySpacing.sm),
+            ],
+            Center(
+              child: KasyTextFieldOTP(
+                length: _otpLength,
+                separatorAfterIndex: _separatorAfterIndex,
+                neutralFlatCells: true,
+                onChanged: (String value) {
+                  setState(() {
+                    _code = value;
+                    _isVerified = false;
+                  });
+                },
+                onCompleted: (_) => KasyHaptics.selection(context),
+              ),
+            ),
+            SizedBox(height: _phoneMode ? KasySpacing.xl : KasySpacing.lg),
+            if (_phoneMode) ...[
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text(
+                    "Didn't receive the code? ",
+                    style: sheetContext.textTheme.bodyMedium?.copyWith(
+                      color: sheetContext.colors.muted,
+                    ),
+                  ),
+                  _SheetResendCodeLink(
+                    onTap: () => KasyHaptics.selection(context),
+                  ),
+                ],
+              ),
+              const SizedBox(height: KasySpacing.xl),
+              Text(
+                'By continuing, you agree to receive SMS messages for verification. '
+                'Message and data rates may apply.',
+                style: sheetContext.textTheme.bodySmall?.copyWith(
+                  color: sheetContext.colors.muted,
+                  height: 1.45,
+                ),
+                textAlign: TextAlign.center,
+              ),
+            ] else ...[
+              Text(
+                'Never share your PIN with anyone.',
+                style: sheetContext.textTheme.bodySmall?.copyWith(
+                  color: sheetContext.colors.muted,
+                  height: 1.45,
+                ),
+                textAlign: TextAlign.center,
+              ),
+            ],
+          ],
+        ),
+        actions: [
+          KasyButton(
+            label: buttonLabel,
+            variant: _isComplete || _isVerified
+                ? KasyButtonVariant.primary
+                : KasyButtonVariant.soft,
+            isLoading: _isVerifying,
+            expand: true,
+            onPressed: _verify,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _SheetResendCodeLink extends StatefulWidget {
+  final VoidCallback onTap;
+
+  const _SheetResendCodeLink({required this.onTap});
+
+  @override
+  State<_SheetResendCodeLink> createState() => _SheetResendCodeLinkState();
+}
+
+class _SheetResendCodeLinkState extends State<_SheetResendCodeLink> {
+  bool _pressed = false;
+
+  Future<void> _handleTap() async {
+    setState(() => _pressed = true);
+    await KasyHaptics.selection(context);
+    await Future<void>.delayed(const Duration(milliseconds: 130));
+    if (mounted) setState(() => _pressed = false);
+    widget.onTap();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: _handleTap,
+      onTapCancel: () => setState(() => _pressed = false),
+      child: AnimatedScale(
+        scale: _pressed ? 0.93 : 1.0,
+        duration: const Duration(milliseconds: 120),
+        curve: Curves.easeOutCubic,
+        child: AnimatedOpacity(
+          opacity: _pressed ? 0.55 : 1.0,
+          duration: const Duration(milliseconds: 120),
+          child: Text(
+            'Resend code',
+            style: context.textTheme.bodyMedium?.copyWith(
+              color: context.colors.onBackground,
+              fontWeight: FontWeight.w700,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,225 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/radius.dart';
+
+// ─── Animation mode ───────────────────────────────────────────────────────────
+
+/// Controls how skeleton bones animate while loading.
+enum KasySkeletonAnimation {
+  /// Highlight band sweeps left-to-right across each bone.
+  shimmer,
+
+  /// All bones fade in/out together.
+  pulse,
+
+  /// No animation — static base colour.
+  none,
+}
+
+// ─── Inherited scope ──────────────────────────────────────────────────────────
+
+class _KasySkeletonScope extends InheritedWidget {
+  const _KasySkeletonScope({
+    required this.animation,
+    required this.mode,
+    required super.child,
+  });
+
+  final Animation<double> animation;
+  final KasySkeletonAnimation mode;
+
+  static _KasySkeletonScope? maybeOf(BuildContext context) =>
+      context.dependOnInheritedWidgetOfExactType<_KasySkeletonScope>();
+
+  @override
+  bool updateShouldNotify(_KasySkeletonScope old) =>
+      mode != old.mode || animation != old.animation;
+}
+
+// ─── Group ────────────────────────────────────────────────────────────────────
+
+/// Provides a shared [AnimationController] to all [KasySkeleton] bones in its
+/// subtree so every bone animates in perfect sync.
+///
+/// Wrap the loading placeholder layout with [KasySkeletonGroup] and swap it
+/// for the real content once data arrives.
+///
+/// ```dart
+/// isLoading
+///   ? KasySkeletonGroup(
+///       child: Column(children: [
+///         KasySkeleton(width: 120, height: 14),
+///         KasySkeleton.circle(size: 40),
+///       ]),
+///     )
+///   : MyRealContent()
+/// ```
+class KasySkeletonGroup extends StatefulWidget {
+  const KasySkeletonGroup({
+    super.key,
+    required this.child,
+    this.animation = KasySkeletonAnimation.shimmer,
+  });
+
+  final Widget child;
+
+  /// How the bones animate. Defaults to [KasySkeletonAnimation.shimmer].
+  final KasySkeletonAnimation animation;
+
+  @override
+  State<KasySkeletonGroup> createState() => _KasySkeletonGroupState();
+}
+
+class _KasySkeletonGroupState extends State<KasySkeletonGroup>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 1600),
+    );
+    _syncController();
+  }
+
+  @override
+  void didUpdateWidget(KasySkeletonGroup old) {
+    super.didUpdateWidget(old);
+    if (widget.animation != old.animation) {
+      _syncController();
+    }
+  }
+
+  void _syncController() {
+    if (widget.animation == KasySkeletonAnimation.none) {
+      _controller.stop();
+      _controller.value = 0;
+    } else {
+      if (!_controller.isAnimating) {
+        _controller.repeat();
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return _KasySkeletonScope(
+      animation: _controller,
+      mode: widget.animation,
+      child: widget.child,
+    );
+  }
+}
+
+// ─── Bone ─────────────────────────────────────────────────────────────────────
+
+/// A single skeleton bone — a placeholder rectangle or circle that animates
+/// using the nearest [KasySkeletonGroup]'s shared controller.
+///
+/// For a circular bone (avatar, icon placeholder) use [KasySkeleton.circle].
+class KasySkeleton extends StatelessWidget {
+  /// Rectangular bone.
+  const KasySkeleton({
+    super.key,
+    this.width,
+    required this.height,
+    this.borderRadius,
+  })  : _isCircle = false,
+        _circleSize = 0;
+
+  /// Circular bone of the given [size] (diameter).
+  const KasySkeleton.circle({
+    super.key,
+    required double size,
+  })  : width = size,
+        height = size,
+        borderRadius = null,
+        _isCircle = true,
+        _circleSize = size;
+
+  /// Width of the bone. Pass `double.infinity` to fill available horizontal space.
+  final double? width;
+
+  /// Height of the bone.
+  final double height;
+
+  /// Corner radius for rectangular bones. Defaults to [KasyRadius.smBorderRadius].
+  final BorderRadius? borderRadius;
+
+  final bool _isCircle;
+  final double _circleSize;
+
+  BorderRadius get _effectiveBorderRadius {
+    if (_isCircle) return BorderRadius.circular(_circleSize / 2);
+    return borderRadius ?? KasyRadius.smBorderRadius;
+  }
+
+  // Palette ──────────────────────────────────────────────────────────────────
+
+  static Color _base(bool dark) =>
+      dark ? const Color(0xFF2C2C2E) : const Color(0xFFE5E5EA);
+
+  static Color _highlight(bool dark) =>
+      dark ? const Color(0xFF48484A) : const Color(0xFFF2F2F7);
+
+  // Build ────────────────────────────────────────────────────────────────────
+
+  @override
+  Widget build(BuildContext context) {
+    final scope = _KasySkeletonScope.maybeOf(context);
+    final mode = scope?.mode ?? KasySkeletonAnimation.shimmer;
+    final animation = scope?.animation;
+
+    final bool dark = Theme.of(context).brightness == Brightness.dark;
+    final Color base = _base(dark);
+    final Color highlight = _highlight(dark);
+
+    if (mode == KasySkeletonAnimation.none || animation == null) {
+      return _bone(color: base);
+    }
+
+    return AnimatedBuilder(
+      animation: animation,
+      builder: (context, child) {
+        final double t = animation.value;
+
+        if (mode == KasySkeletonAnimation.shimmer) {
+          // Highlight band sweeps from off-screen-left to off-screen-right.
+          // pos goes −2 → 2 (in alignment units; box spans −1 → 1).
+          final double pos = -2 + t * 4;
+          final gradient = LinearGradient(
+            begin: Alignment(pos - 0.8, 0),
+            end: Alignment(pos + 0.8, 0),
+            colors: [base, highlight, base],
+          );
+          return _bone(gradient: gradient);
+        } else {
+          // Pulse: sine wave between base and highlight.
+          final double factor = (math.sin(t * 2 * math.pi) + 1) / 2;
+          return _bone(color: Color.lerp(base, highlight, factor) ?? base);
+        }
+      },
+    );
+  }
+
+  Widget _bone({Color? color, Gradient? gradient}) {
+    return Container(
+      width: width,
+      height: height,
+      decoration: BoxDecoration(
+        color: gradient == null ? color : null,
+        gradient: gradient,
+        borderRadius: _effectiveBorderRadius,
+      ),
+    );
+  }
+}