kasy-cli 1.17.0 → 1.18.0

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

@@ -0,0 +1,834 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Data helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+const List<String> _kMonthNames = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+];
+
+const List<String> _kWeekdayAbbreviations = [
+  'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat',
+];
+
+/// Returns the number of days in [month] of [year].
+int _daysInMonth(int year, int month) => DateTime(year, month + 1, 0).day;
+
+/// Formats [date] as "mm / dd / yyyy".
+String _formatDate(DateTime date) =>
+    '${date.month.toString().padLeft(2, '0')} / '
+    '${date.day.toString().padLeft(2, '0')} / '
+    '${date.year}';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _DayData — internal model for a single calendar cell
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _DayData {
+  const _DayData({
+    required this.date,
+    required this.isCurrentMonth,
+    this.isToday = false,
+    this.isDisabled = false,
+  });
+
+  final DateTime date;
+  final bool isCurrentMonth;
+  final bool isToday;
+  final bool isDisabled;
+}
+
+/// Builds the 42-cell (6 × 7) grid for [viewMonth].
+///
+/// Cells before day 1 are filled from the previous month;
+/// remaining cells after the last day are from the next month.
+List<_DayData> _buildDayGrid(
+  DateTime viewMonth, {
+  DateTime? minDate,
+  DateTime? maxDate,
+}) {
+  final DateTime today = DateTime.now();
+  final int daysInCurrent = _daysInMonth(viewMonth.year, viewMonth.month);
+
+  // Grid starts on Sunday (index 0).
+  // Dart weekday: 1=Mon … 7=Sun → sunday offset = weekday % 7.
+  final DateTime firstOfMonth = DateTime(viewMonth.year, viewMonth.month);
+  final int offset = firstOfMonth.weekday % 7;
+
+  // Previous-month fill.
+  final int prevYear =
+      viewMonth.month == 1 ? viewMonth.year - 1 : viewMonth.year;
+  final int prevMonth = viewMonth.month == 1 ? 12 : viewMonth.month - 1;
+  final int daysInPrev = _daysInMonth(prevYear, prevMonth);
+
+  final List<_DayData> grid = [];
+
+  // Prev-month trailing days.
+  for (int i = 0; i < offset; i++) {
+    final int d = daysInPrev - offset + 1 + i;
+    final DateTime date = DateTime(prevYear, prevMonth, d);
+    grid.add(_DayData(
+      date: date,
+      isCurrentMonth: false,
+      isDisabled: _isDayDisabled(date, minDate, maxDate),
+    ));
+  }
+
+  // Current-month days.
+  for (int d = 1; d <= daysInCurrent; d++) {
+    final DateTime date = DateTime(viewMonth.year, viewMonth.month, d);
+    final bool isToday = date.year == today.year &&
+        date.month == today.month &&
+        date.day == today.day;
+    grid.add(_DayData(
+      date: date,
+      isCurrentMonth: true,
+      isToday: isToday,
+      isDisabled: _isDayDisabled(date, minDate, maxDate),
+    ));
+  }
+
+  // Next-month leading days.
+  final int nextYear =
+      viewMonth.month == 12 ? viewMonth.year + 1 : viewMonth.year;
+  final int nextMonth = viewMonth.month == 12 ? 1 : viewMonth.month + 1;
+  int nextDay = 1;
+  while (grid.length < 42) {
+    final DateTime date = DateTime(nextYear, nextMonth, nextDay++);
+    grid.add(_DayData(
+      date: date,
+      isCurrentMonth: false,
+      isDisabled: _isDayDisabled(date, minDate, maxDate),
+    ));
+  }
+
+  return grid;
+}
+
+bool _isDayDisabled(DateTime date, DateTime? min, DateTime? max) {
+  final DateTime d = DateTime(date.year, date.month, date.day);
+  if (min != null) {
+    final DateTime mn = DateTime(min.year, min.month, min.day);
+    if (d.isBefore(mn)) return true;
+  }
+  if (max != null) {
+    final DateTime mx = DateTime(max.year, max.month, max.day);
+    if (d.isAfter(mx)) return true;
+  }
+  return false;
+}
+
+bool _isSameDay(DateTime a, DateTime b) =>
+    a.year == b.year && a.month == b.month && a.day == b.day;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Design constants (from Figma variable defs)
+// ─────────────────────────────────────────────────────────────────────────────
+
+// DateField: 3 drop-shadow layers — offset(0,2)blur:4, offset(0,1)blur:2, offset(0,0)blur:1
+const List<BoxShadow> _kFieldShadows = [
+  BoxShadow(
+    color: Color(0x0A000000), // field/shadow  rgba(0,0,0,0.04)
+    blurRadius: 4,
+    offset: Offset(0, 2),
+  ),
+  BoxShadow(
+    color: Color(0x0F000000), // field/shadow-2 rgba(0,0,0,0.06)
+    blurRadius: 2,
+    offset: Offset(0, 1),
+  ),
+  BoxShadow(
+    color: Color(0x0F000000), // field/shadow-2 rgba(0,0,0,0.06)
+    blurRadius: 1,
+  ),
+];
+
+// Calendar overlay: shadow-overlay from Figma variable defs.
+const List<BoxShadow> _kCalendarShadows = [
+  BoxShadow(
+    color: Color(0x14000000), // rgba(0,0,0,0.08)
+    blurRadius: 28,
+    offset: Offset(0, 14),
+  ),
+  BoxShadow(
+    color: Color(0x08000000), // rgba(0,0,0,0.03)
+    blurRadius: 12,
+    offset: Offset(0, -6),
+  ),
+  BoxShadow(
+    color: Color(0x0F000000), // rgba(0,0,0,0.06)
+    blurRadius: 8,
+    offset: Offset(0, 2),
+  ),
+];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// KasyDatePicker
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// Date picker combining a text-field trigger with a floating calendar overlay.
+///
+/// Tapping the field opens a calendar below the trigger. Selecting a day
+/// calls [onChanged] and closes the calendar.
+///
+/// Usage:
+/// ```dart
+/// KasyDatePicker(
+///   label: 'Date',
+///   value: _date,
+///   onChanged: (d) => setState(() => _date = d),
+/// )
+/// ```
+class KasyDatePicker extends StatefulWidget {
+  const KasyDatePicker({
+    super.key,
+    this.label,
+    this.value,
+    this.onChanged,
+    this.minDate,
+    this.maxDate,
+    this.enabled = true,
+    this.placeholder = 'mm / dd / yyyy',
+  });
+
+  /// Label displayed above the field. Omit to hide.
+  final String? label;
+
+  /// Currently selected date. Pass null for no selection.
+  final DateTime? value;
+
+  /// Called when the user picks a date.
+  final ValueChanged<DateTime>? onChanged;
+
+  /// Earliest selectable date (inclusive).
+  final DateTime? minDate;
+
+  /// Latest selectable date (inclusive).
+  final DateTime? maxDate;
+
+  final bool enabled;
+
+  /// Placeholder text shown when no date is selected.
+  final String placeholder;
+
+  @override
+  State<KasyDatePicker> createState() => _KasyDatePickerState();
+}
+
+class _KasyDatePickerState extends State<KasyDatePicker>
+    with SingleTickerProviderStateMixin {
+  final LayerLink _layerLink = LayerLink();
+  final OverlayPortalController _portalController = OverlayPortalController();
+
+  // Unique ID so TapRegion knows "field + calendar" form one group.
+  final Object _tapGroupId = Object();
+
+  // Month currently displayed in the calendar (always first of the month).
+  late DateTime _viewMonth;
+
+  bool _isOpen = false;
+
+  late final AnimationController _animCtrl;
+  late final Animation<double> _fadeAnim;
+  late final Animation<double> _scaleAnim;
+
+  @override
+  void initState() {
+    super.initState();
+    _viewMonth = _monthOf(widget.value ?? DateTime.now());
+    _animCtrl = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 180),
+    );
+    _fadeAnim = CurvedAnimation(
+      parent: _animCtrl,
+      curve: Curves.easeOut,
+      reverseCurve: Curves.easeIn,
+    );
+    _scaleAnim = Tween<double>(begin: 0.95, end: 1.0).animate(
+      CurvedAnimation(parent: _animCtrl, curve: Curves.easeOut),
+    );
+  }
+
+  @override
+  void didUpdateWidget(KasyDatePicker old) {
+    super.didUpdateWidget(old);
+    if (old.value != widget.value && widget.value != null) {
+      _viewMonth = _monthOf(widget.value!);
+    }
+  }
+
+  @override
+  void dispose() {
+    _animCtrl.dispose();
+    super.dispose();
+  }
+
+  DateTime _monthOf(DateTime d) => DateTime(d.year, d.month);
+
+  // ── Calendar toggle ────────────────────────────────────────────────────────
+
+  void _toggleCalendar() {
+    if (!widget.enabled) return;
+    if (_isOpen) {
+      _close();
+    } else {
+      _open();
+    }
+  }
+
+  void _open() {
+    _portalController.show();
+    _animCtrl.forward();
+    setState(() => _isOpen = true);
+  }
+
+  void _close() {
+    _animCtrl.reverse().then((_) {
+      if (mounted) _portalController.hide();
+    });
+    setState(() => _isOpen = false);
+  }
+
+  void _selectDate(DateTime date) {
+    widget.onChanged?.call(date);
+    _close();
+  }
+
+  void _previousMonth() {
+    setState(() {
+      _viewMonth = DateTime(
+        _viewMonth.month == 1 ? _viewMonth.year - 1 : _viewMonth.year,
+        _viewMonth.month == 1 ? 12 : _viewMonth.month - 1,
+      );
+    });
+  }
+
+  void _nextMonth() {
+    setState(() {
+      _viewMonth = DateTime(
+        _viewMonth.month == 12 ? _viewMonth.year + 1 : _viewMonth.year,
+        _viewMonth.month == 12 ? 1 : _viewMonth.month + 1,
+      );
+    });
+  }
+
+  // ── Build ──────────────────────────────────────────────────────────────────
+
+  @override
+  Widget build(BuildContext context) {
+    return TapRegion(
+      groupId: _tapGroupId,
+      child: OverlayPortal(
+        controller: _portalController,
+        overlayChildBuilder: _buildOverlay,
+        child: CompositedTransformTarget(
+          link: _layerLink,
+          child: GestureDetector(
+            onTap: _toggleCalendar,
+            child: _buildField(context),
+          ),
+        ),
+      ),
+    );
+  }
+
+  // ── DateField trigger ──────────────────────────────────────────────────────
+
+  Widget _buildField(BuildContext context) {
+    final KasyColors c = context.colors;
+    final DateTime? date = widget.value;
+    final bool hasDate = date != null;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (widget.label != null) ...[
+          Text(
+            widget.label!,
+            style: context.textTheme.labelLarge?.copyWith(
+              color: c.onSurface,
+              fontWeight: FontWeight.w500,
+              fontSize: 14,
+            ),
+          ),
+          // 4px gap between label and field — per Figma spec.
+          const SizedBox(height: 4),
+        ],
+        AnimatedContainer(
+          duration: const Duration(milliseconds: 150),
+          // Field height: 36px — per Figma spec (dimensions/spacing/9).
+          height: 36,
+          decoration: BoxDecoration(
+            color: c.surface,
+            // 12px radius — per Figma spec (field/radius: 12).
+            borderRadius: BorderRadius.circular(KasyRadius.md),
+            // Border is always 1px transparent — the focus ring uses
+            // box-shadow spread (not border-width) so layout never shifts.
+            border: Border.all(color: Colors.transparent),
+            // Open: solid 2px primary ring only (no field shadows while
+            // focused — matches Figma focus-ring-field token).
+            // Closed: three-layer depth shadow only (no ring).
+            boxShadow: _isOpen
+                ? [
+                    BoxShadow(
+                      color: c.primary,
+                      spreadRadius: 2,
+                    ),
+                  ]
+                : _kFieldShadows,
+          ),
+          child: Row(
+            children: [
+              // 12px left padding — per Figma spec (dimensions/spacing/3).
+              const SizedBox(width: 12),
+              Expanded(
+                child: Text(
+                  hasDate ? _formatDate(date) : widget.placeholder,
+                  style: context.textTheme.labelLarge?.copyWith(
+                    color: hasDate ? c.onSurface : c.muted,
+                    fontWeight:
+                        hasDate ? FontWeight.w500 : FontWeight.w400,
+                    fontSize: 14,
+                  ),
+                ),
+              ),
+              // Calendar icon suffix — 12px padding per Figma spec.
+              SizedBox(
+                width: 40,
+                height: 36,
+                child: Center(
+                  child: Opacity(
+                    opacity: widget.enabled ? 1.0 : 0.4,
+                    child: Icon(
+                      KasyIcons.calendar,
+                      size: 16,
+                      color: c.muted,
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  // ── Calendar overlay ───────────────────────────────────────────────────────
+
+  Widget _buildOverlay(BuildContext context) {
+    return TapRegion(
+      groupId: _tapGroupId,
+      onTapOutside: (_) => _close(),
+      child: CompositedTransformFollower(
+        link: _layerLink,
+        targetAnchor: Alignment.bottomLeft,
+        // 8px gap between field bottom and calendar top — per Figma spec.
+        offset: const Offset(0, 8),
+        child: Align(
+          alignment: Alignment.topLeft,
+          child: FadeTransition(
+            opacity: _fadeAnim,
+            child: ScaleTransition(
+              scale: _scaleAnim,
+              alignment: Alignment.topCenter,
+              child: _CalendarPanel(
+                viewMonth: _viewMonth,
+                selectedDate: widget.value,
+                onDateSelected: _selectDate,
+                onPreviousMonth: _previousMonth,
+                onNextMonth: _nextMonth,
+                minDate: widget.minDate,
+                maxDate: widget.maxDate,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _CalendarPanel
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _CalendarPanel extends StatelessWidget {
+  const _CalendarPanel({
+    required this.viewMonth,
+    required this.selectedDate,
+    required this.onDateSelected,
+    required this.onPreviousMonth,
+    required this.onNextMonth,
+    this.minDate,
+    this.maxDate,
+  });
+
+  final DateTime viewMonth;
+  final DateTime? selectedDate;
+  final ValueChanged<DateTime> onDateSelected;
+  final VoidCallback onPreviousMonth;
+  final VoidCallback onNextMonth;
+  final DateTime? minDate;
+  final DateTime? maxDate;
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+    final List<_DayData> days = _buildDayGrid(
+      viewMonth,
+      minDate: minDate,
+      maxDate: maxDate,
+    );
+
+    return Material(
+      color: Colors.transparent,
+      child: Container(
+        // Width matches the DateField — 288px per Figma spec.
+        width: 288,
+        decoration: BoxDecoration(
+          color: c.surface,
+          // 24px radius — per Figma spec (dimensions/radius/rounded-3xl: 24).
+          borderRadius: BorderRadius.circular(KasyRadius.xl),
+          boxShadow: _kCalendarShadows,
+        ),
+        child: Padding(
+          // 16px all sides — per Figma spec (dimensions/spacing/4: 16).
+          padding: const EdgeInsets.all(KasySpacing.md),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              // Navigation row (month/year + prev/next arrows).
+              _CalendarNavRow(
+                viewMonth: viewMonth,
+                onPrevious: onPreviousMonth,
+                onNext: onNextMonth,
+              ),
+              // Weekday abbreviation headers.
+              const _WeekdayHeaderRow(),
+              // Day grid: 6 rows × 7 columns, 2px gap between rows.
+              for (int row = 0; row < 6; row++) ...[
+                if (row > 0) const SizedBox(height: 2),
+                _DayRow(
+                  days: days.sublist(row * 7, row * 7 + 7),
+                  selectedDate: selectedDate,
+                  onDateSelected: onDateSelected,
+                ),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _CalendarNavRow — Month/year header with prev/next navigation
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _CalendarNavRow extends StatelessWidget {
+  const _CalendarNavRow({
+    required this.viewMonth,
+    required this.onPrevious,
+    required this.onNext,
+  });
+
+  final DateTime viewMonth;
+  final VoidCallback onPrevious;
+  final VoidCallback onNext;
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+
+    return SizedBox(
+      // Navigation row height: 56px (16px padding top+bottom) — Figma spec.
+      height: 56,
+      child: Row(
+        children: [
+          // Month + Year text.
+          Expanded(
+            child: Row(
+              children: [
+                Text(
+                  _kMonthNames[viewMonth.month - 1],
+                  style: context.textTheme.labelLarge?.copyWith(
+                    color: c.onSurface,
+                    fontWeight: FontWeight.w500,
+                    fontSize: 14,
+                  ),
+                ),
+                const SizedBox(width: 6),
+                Text(
+                  viewMonth.year.toString(),
+                  style: context.textTheme.labelLarge?.copyWith(
+                    color: c.onSurface,
+                    fontWeight: FontWeight.w500,
+                    fontSize: 14,
+                  ),
+                ),
+                const SizedBox(width: 4),
+                // Expand chevron (right arrow, 12px) — indicates year picker.
+                Icon(
+                  KasyIcons.chevronRight,
+                  size: 12,
+                  color: c.muted,
+                ),
+              ],
+            ),
+          ),
+          // Previous-month arrow button.
+          _NavArrowButton(
+            icon: KasyIcons.arrowBackIos,
+            onTap: onPrevious,
+          ),
+          const SizedBox(width: 4),
+          // Next-month arrow button.
+          _NavArrowButton(
+            icon: KasyIcons.arrowForwardIos,
+            onTap: onNext,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _NavArrowButton — 24×24 rounded navigation arrow
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _NavArrowButton extends StatefulWidget {
+  const _NavArrowButton({required this.icon, required this.onTap});
+
+  final IconData icon;
+  final VoidCallback onTap;
+
+  @override
+  State<_NavArrowButton> createState() => _NavArrowButtonState();
+}
+
+class _NavArrowButtonState extends State<_NavArrowButton> {
+  bool _hovered = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+
+    return GestureDetector(
+      onTap: widget.onTap,
+      onTapDown: (_) => setState(() => _hovered = true),
+      onTapUp: (_) => setState(() => _hovered = false),
+      onTapCancel: () => setState(() => _hovered = false),
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 100),
+        // Button size: 24×24 — per Figma spec.
+        width: 24,
+        height: 24,
+        // 4px padding → 6px radius — per Figma (rounded-md: 6).
+        decoration: BoxDecoration(
+          color: _hovered ? c.avatarFallbackFill : Colors.transparent,
+          borderRadius: BorderRadius.circular(6),
+        ),
+        child: Center(
+          child: Icon(
+            widget.icon,
+            size: 16,
+            color: c.onSurface,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _WeekdayHeaderRow — Sun Mon Tue Wed Thu Fri Sat
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _WeekdayHeaderRow extends StatelessWidget {
+  const _WeekdayHeaderRow();
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+
+    return Row(
+      children: _kWeekdayAbbreviations.map((abbr) {
+        return Expanded(
+          child: SizedBox(
+            height: 36,
+            child: Center(
+              child: Text(
+                abbr,
+                style: context.textTheme.labelMedium?.copyWith(
+                  // 12px/w500 — per Figma spec (Body xs medium: text-xs).
+                  color: c.muted,
+                  fontSize: 12,
+                  fontWeight: FontWeight.w500,
+                ),
+              ),
+            ),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _DayRow — one week row (7 day cells)
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _DayRow extends StatelessWidget {
+  const _DayRow({
+    required this.days,
+    required this.selectedDate,
+    required this.onDateSelected,
+  });
+
+  final List<_DayData> days;
+  final DateTime? selectedDate;
+  final ValueChanged<DateTime> onDateSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: days.map((day) {
+        final bool isSelected =
+            selectedDate != null && _isSameDay(day.date, selectedDate!);
+        return Expanded(
+          child: _DayCell(
+            data: day,
+            isSelected: isSelected,
+            onTap: (day.isDisabled || !day.isCurrentMonth && day.isDisabled)
+                ? null
+                : () => onDateSelected(day.date),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _DayCell — individual calendar day
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _DayCell extends StatefulWidget {
+  const _DayCell({
+    required this.data,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  final _DayData data;
+  final bool isSelected;
+  final VoidCallback? onTap;
+
+  @override
+  State<_DayCell> createState() => _DayCellState();
+}
+
+class _DayCellState extends State<_DayCell> {
+  bool _pressed = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+    final _DayData day = widget.data;
+
+    // ── Color determination ────────────────────────────────────────────────
+
+    final Color textColor;
+    final Color? bgColor;
+
+    if (widget.isSelected) {
+      textColor = const Color(0xFFFCFCFC); // accent/accent-foreground
+      bgColor = c.primary;
+    } else if (day.isToday) {
+      textColor = c.primary; // accent/accent-soft-foreground
+      bgColor = _pressed ? c.avatarFallbackFill : null;
+    } else if (!day.isCurrentMonth) {
+      textColor = c.muted; // out-of-month
+      bgColor = _pressed ? c.avatarFallbackFill : null;
+    } else if (day.isDisabled) {
+      textColor = c.muted;
+      bgColor = null;
+    } else {
+      textColor = c.onSurface; // default
+      bgColor = _pressed ? c.avatarFallbackFill : null;
+    }
+
+    // ── Today indicator dot ────────────────────────────────────────────────
+    // 3px dot, positioned 4px from bottom — Figma spec.
+    // Hidden when the day is selected (blue circle already communicates
+    // selection clearly — dot would be redundant).
+    final bool showDot = day.isToday && !widget.isSelected;
+    final Color dotColor = widget.isSelected
+        ? const Color(0xFFFCFCFC)
+        : c.muted;
+
+    // ── Opacity ────────────────────────────────────────────────────────────
+    // Out-of-month and disabled cells use 50% opacity — Figma spec.
+    final double opacity =
+        (!day.isCurrentMonth || day.isDisabled) ? 0.5 : 1.0;
+
+    final Widget cell = AnimatedContainer(
+      duration: const Duration(milliseconds: 100),
+      // Cell size: 36×36 — Figma spec (dimensions/spacing/9: 36).
+      width: 36,
+      height: 36,
+      decoration: BoxDecoration(
+        color: bgColor,
+        // 24px radius → pill/circle — Figma spec (rounded-3xl: 24).
+        borderRadius: BorderRadius.circular(KasyRadius.xl),
+      ),
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          // Day number.
+          Text(
+            day.date.day.toString(),
+            style: context.textTheme.labelLarge?.copyWith(
+              color: textColor,
+              fontWeight: FontWeight.w500,
+              fontSize: 14,
+            ),
+          ),
+          // Today indicator dot — 3px circle at bottom center.
+          if (showDot)
+            Positioned(
+              bottom: 4,
+              child: Container(
+                width: 3,
+                height: 3,
+                decoration: BoxDecoration(
+                  color: dotColor,
+                  borderRadius: BorderRadius.circular(12),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+
+    if (widget.onTap == null) {
+      return Opacity(opacity: opacity, child: Center(child: cell));
+    }
+
+    return GestureDetector(
+      onTap: widget.onTap,
+      onTapDown: (_) => setState(() => _pressed = true),
+      onTapUp: (_) => setState(() => _pressed = false),
+      onTapCancel: () => setState(() => _pressed = false),
+      child: Opacity(opacity: opacity, child: Center(child: cell)),
+    );
+  }
+}