kasy-cli 1.17.0 → 1.19.0

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

@@ -33,7 +33,7 @@ enum KasyTabsVariant {
 
 /// Sizing mode for [KasyTabs].
 enum KasyTabsMode {
-  /// Wraps content (intrinsic width tabs).
+  /// Wraps content (intrinsic width tabs). Scrolls horizontally if needed.
   hug,
 
   /// Each tab stretches to fill the available width equally.
@@ -99,6 +99,15 @@ class _KasyTabsState extends State<KasyTabs> {
   // One GlobalKey per tab to measure position/size after layout.
   late List<GlobalKey> _keys;
 
+  // Key for the inner indicator Stack — used as the coordinate reference
+  // for measurements, ensuring correctness even when wrapped in a ScrollView.
+  final GlobalKey _stackKey = GlobalKey();
+
+  // Controls horizontal scrolling in hug mode so we can snap to the
+  // beginning/end when the first/last tab is selected (clears container
+  // padding and the pill overflow that extends 4px past tab edges).
+  final ScrollController _scrollController = ScrollController();
+
   // Indicator geometry (left offset, width) resolved from measured keys.
   double _indicatorLeft = 0;
   double _indicatorWidth = 0;
@@ -116,6 +125,12 @@ class _KasyTabsState extends State<KasyTabs> {
     WidgetsBinding.instance.addPostFrameCallback((_) => _measure());
   }
 
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
   @override
   void didUpdateWidget(KasyTabs old) {
     super.didUpdateWidget(old);
@@ -140,8 +155,10 @@ class _KasyTabsState extends State<KasyTabs> {
       widget.items.length - 1,
     );
 
+    // Measure relative to the inner Stack, not the outermost widget.
+    // This stays correct even when the component is inside a ScrollView.
     final RenderBox? containerBox =
-        context.findRenderObject() as RenderBox?;
+        _stackKey.currentContext?.findRenderObject() as RenderBox?;
     if (containerBox == null) return;
 
     final GlobalKey key = _keys[clampedIndex];
@@ -166,6 +183,34 @@ class _KasyTabsState extends State<KasyTabs> {
         _measured = true;
       });
     }
+
+    // In hug mode, scroll the selected tab into view (handles overflow).
+    if (widget.mode == KasyTabsMode.hug) {
+      _ensureSelectedVisible(clampedIndex);
+    }
+  }
+
+  /// Scrolls the [SingleChildScrollView] so the selected tab is fully visible.
+  ///
+  /// First/last tab snap to the scroll extremes so the container's outer
+  /// padding (and the pill that extends 4px beyond tab edges) is never clipped.
+  void _ensureSelectedVisible(int index) {
+    const Duration duration = Duration(milliseconds: 250);
+    const Curve curve = Curves.easeInOut;
+    final int lastIndex = widget.items.length - 1;
+
+    if (_scrollController.hasClients &&
+        (index == 0 || index == lastIndex)) {
+      final double target = index == 0
+          ? _scrollController.position.minScrollExtent
+          : _scrollController.position.maxScrollExtent;
+      _scrollController.animateTo(target, duration: duration, curve: curve);
+      return;
+    }
+
+    final BuildContext? ctx = _keys[index].currentContext;
+    if (ctx == null) return;
+    Scrollable.ensureVisible(ctx, duration: duration, curve: curve);
   }
 
   @override
@@ -182,67 +227,99 @@ class _KasyTabsState extends State<KasyTabs> {
   Widget _buildPrimary(BuildContext context) {
     final KasyColors c = context.colors;
     final bool isDark = context.isDark;
-
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        color: c.avatarFallbackFill,
-        borderRadius: BorderRadius.circular(KasyRadius.full),
-      ),
-      child: Padding(
-        padding: const EdgeInsets.all(4),
-        child: Stack(
-          children: [
-            // Animated pill background.
-            if (_measured)
-              AnimatedPositioned(
-                duration: const Duration(milliseconds: 250),
-                curve: Curves.easeInOut,
-                left: _indicatorLeft,
-                top: 0,
-                bottom: 0,
-                width: _indicatorWidth,
-                child: DecoratedBox(
-                  decoration: BoxDecoration(
-                    color: c.surface,
-                    borderRadius: BorderRadius.circular(KasyRadius.full),
-                    boxShadow: [
-                      BoxShadow(
-                        color: Colors.black.withValues(
-                          alpha: isDark ? 0.18 : 0.08,
-                        ),
-                        blurRadius: 8,
-                        offset: const Offset(0, 2),
-                      ),
-                      BoxShadow(
-                        color: Colors.black.withValues(
-                          alpha: isDark ? 0.10 : 0.04,
-                        ),
-                        spreadRadius: 1,
+    final bool isFill = widget.mode == KasyTabsMode.fill;
+    final BorderRadius pillRadius = BorderRadius.circular(KasyRadius.full);
+
+    final Widget tabsContent = Padding(
+      // 8px horizontal, 4px vertical — per Figma spec.
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      child: Stack(
+        key: _stackKey,
+        // Allow pill to extend 4px beyond each tab edge (Figma: inset 0 -4px).
+        clipBehavior: Clip.none,
+        children: [
+          // Animated pill background.
+          if (_measured)
+            AnimatedPositioned(
+              duration: const Duration(milliseconds: 250),
+              curve: Curves.easeInOut,
+              // Extends 4px on each side beyond the measured tab.
+              left: _indicatorLeft - 4,
+              top: 0,
+              bottom: 0,
+              width: _indicatorWidth + 8,
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  color: c.surface,
+                  borderRadius: BorderRadius.circular(KasyRadius.full),
+                  boxShadow: [
+                    BoxShadow(
+                      color: Colors.black.withValues(
+                        alpha: isDark ? 0.14 : 0.06,
                       ),
-                    ],
-                  ),
+                      blurRadius: 8,
+                      offset: const Offset(0, 2),
+                    ),
+                  ],
                 ),
               ),
-            // Tab labels (on top of the pill).
-            Row(
-              mainAxisSize: widget.mode == KasyTabsMode.fill
-                  ? MainAxisSize.max
-                  : MainAxisSize.min,
-              children: List.generate(widget.items.length, (i) {
-                final KasyTabItem item = widget.items[i];
-                final bool selected = i == widget.selectedIndex;
-                return _PrimaryTab(
-                  key: _keys[i],
-                  item: item,
-                  selected: selected,
-                  expand: widget.mode == KasyTabsMode.fill,
-                  onTap: item.enabled ? () => widget.onTabSelected(i) : null,
-                );
-              }),
             ),
-          ],
+          // Tab labels (on top of the pill).
+          Row(
+            mainAxisSize: isFill ? MainAxisSize.max : MainAxisSize.min,
+            children: [
+              for (int i = 0; i < widget.items.length; i++) ...[
+                // 2px gap between adjacent tabs — per Figma spec.
+                if (i > 0) const SizedBox(width: 2),
+                _PrimaryTab(
+                  key: _keys[i],
+                  item: widget.items[i],
+                  selected: i == widget.selectedIndex,
+                  expand: isFill,
+                  onTap: widget.items[i].enabled
+                      ? () => widget.onTabSelected(i)
+                      : null,
+                ),
+              ],
+            ],
+          ),
+        ],
+      ),
+    );
+
+    if (!isFill) {
+      // Hug mode + horizontal overflow: keep the rounded container fixed at
+      // the parent's width and scroll only the tab strip INSIDE it. Putting
+      // the DecoratedBox inside the SingleChildScrollView (the previous
+      // structure) made the entire pill background scroll along with the
+      // tabs, so once the user scrolled the rounded corners were pushed off-
+      // screen and the visible portion looked like a flat-sided rectangle.
+      // Now the corners stay visible at the viewport edges no matter where
+      // the strip is scrolled, and ClipRRect masks any tab content that
+      // would otherwise leak past the rounded edges.
+      return DecoratedBox(
+        decoration: BoxDecoration(
+          color: c.avatarFallbackFill,
+          borderRadius: pillRadius,
         ),
+        child: ClipRRect(
+          borderRadius: pillRadius,
+          child: SingleChildScrollView(
+            controller: _scrollController,
+            scrollDirection: Axis.horizontal,
+            physics: const ClampingScrollPhysics(),
+            child: tabsContent,
+          ),
+        ),
+      );
+    }
+
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: c.avatarFallbackFill,
+        borderRadius: pillRadius,
       ),
+      child: tabsContent,
     );
   }
 
@@ -250,8 +327,10 @@ class _KasyTabsState extends State<KasyTabs> {
 
   Widget _buildSecondary(BuildContext context) {
     final KasyColors c = context.colors;
+    final bool isFill = widget.mode == KasyTabsMode.fill;
 
-    return Stack(
+    final Widget inner = Stack(
+      key: _stackKey,
       clipBehavior: Clip.none,
       children: [
         // Full-width bottom divider.
@@ -284,9 +363,7 @@ class _KasyTabsState extends State<KasyTabs> {
           ),
         // Tab labels.
         Row(
-          mainAxisSize: widget.mode == KasyTabsMode.fill
-              ? MainAxisSize.max
-              : MainAxisSize.min,
+          mainAxisSize: isFill ? MainAxisSize.max : MainAxisSize.min,
           children: List.generate(widget.items.length, (i) {
             final KasyTabItem item = widget.items[i];
             final bool selected = i == widget.selectedIndex;
@@ -294,13 +371,25 @@ class _KasyTabsState extends State<KasyTabs> {
               key: _keys[i],
               item: item,
               selected: selected,
-              expand: widget.mode == KasyTabsMode.fill,
+              expand: isFill,
               onTap: item.enabled ? () => widget.onTabSelected(i) : null,
             );
           }),
         ),
       ],
     );
+
+    // Same as primary: hug mode sizes to content via ScrollView.
+    if (!isFill) {
+      return SingleChildScrollView(
+        controller: _scrollController,
+        scrollDirection: Axis.horizontal,
+        physics: const ClampingScrollPhysics(),
+        child: inner,
+      );
+    }
+
+    return inner;
   }
 }
 
@@ -325,39 +414,66 @@ class _PrimaryTab extends StatelessWidget {
   Widget _tabContent(BuildContext context) {
     final KasyColors c = context.colors;
     final bool disabled = !item.enabled;
+    // Fill mode with icons uses a vertical (Column) layout per Figma spec:
+    // icon stacked above label, 12px all-sides padding, 12px font size.
+    final bool verticalLayout = expand && item.icon != null;
+
+    final Widget iconWidget = item.icon != null
+        ? Opacity(
+            opacity: disabled ? 0.4 : 1.0,
+            child: Icon(
+              item.icon,
+              size: 16,
+              color: selected ? c.onSurface : c.muted,
+            ),
+          )
+        : const SizedBox.shrink();
+
+    final Widget labelWidget = Opacity(
+      opacity: disabled ? 0.4 : 1.0,
+      child: Text(
+        item.label,
+        textAlign: TextAlign.center,
+        // Use labelLarge as defined in the Kasy theme (14px/w600).
+        // No fontWeight override — the theme token is the source of truth.
+        style: context.textTheme.labelLarge?.copyWith(
+          color: selected ? c.onSurface : c.muted,
+          // Fill+icon layout uses 12px (text-xs) — per Figma spec.
+          fontSize: verticalLayout ? 12 : null,
+        ),
+      ),
+    );
 
     return GestureDetector(
       onTap: onTap,
       behavior: HitTestBehavior.opaque,
       child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            if (item.icon != null) ...[
-              Opacity(
-                opacity: disabled ? 0.4 : 1.0,
-                child: Icon(
-                  item.icon,
-                  size: 16,
-                  color: selected ? c.onSurface : c.muted,
-                ),
+        padding: verticalLayout
+            // Fill+icon: 12px all sides — per Figma spec.
+            ? const EdgeInsets.all(12)
+            // Default: 6px vertical, 12px horizontal — per Figma spec.
+            : const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
+        child: verticalLayout
+            ? Column(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  iconWidget,
+                  const SizedBox(height: 6),
+                  labelWidget,
+                ],
+              )
+            : Row(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  if (item.icon != null) ...[
+                    iconWidget,
+                    const SizedBox(width: 6),
+                  ],
+                  labelWidget,
+                ],
               ),
-              const SizedBox(width: 6),
-            ],
-            Opacity(
-              opacity: disabled ? 0.4 : 1.0,
-              child: Text(
-                item.label,
-                style: context.textTheme.labelLarge?.copyWith(
-                  color: selected ? c.onSurface : c.muted,
-                  fontWeight: selected ? FontWeight.w500 : FontWeight.w400,
-                ),
-              ),
-            ),
-          ],
-        ),
       ),
     );
   }
@@ -391,7 +507,14 @@ class _SecondaryTab extends StatelessWidget {
       onTap: onTap,
       behavior: HitTestBehavior.opaque,
       child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+        // top:4 bottom:6 horizontal:12 — per Figma spec.
+        // Extra bottom padding visually balances the 2px underline indicator.
+        padding: const EdgeInsets.only(
+          top: 4,
+          bottom: 6,
+          left: 12,
+          right: 12,
+        ),
         child: Row(
           mainAxisSize: MainAxisSize.min,
           mainAxisAlignment: MainAxisAlignment.center,
@@ -411,9 +534,9 @@ class _SecondaryTab extends StatelessWidget {
               opacity: disabled ? 0.4 : 1.0,
               child: Text(
                 item.label,
+                // Use labelLarge as defined in the Kasy theme (14px/w600).
                 style: context.textTheme.labelLarge?.copyWith(
                   color: selected ? c.onSurface : c.muted,
-                  fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
                 ),
               ),
             ),

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

@@ -135,9 +135,14 @@ class _KasyTextAreaState extends State<KasyTextArea> {
     const double disabledLabelOpacity = 0.46;
     const double disabledTextOpacity = 0.56;
     const double disabledDescriptionOpacity = 0.34;
-    final BoxShadow fieldShadow = KasyShadows.inputField(
-      context,
-      enabled: !isDisabled,
+    // Contained shadow — no Y offset, negative spread so the shadow hugs the
+    // border instead of leaking a halo below the field. Matches KasyTextField.
+    final BoxShadow fieldShadow = BoxShadow(
+      color: const Color(0xFF000000).withValues(
+        alpha: context.isDark ? 0.28 : 0.11,
+      ),
+      blurRadius: 3,
+      spreadRadius: -1,
     );
 
     const BorderRadius fieldRadius = BorderRadius.all(
@@ -345,7 +350,7 @@ class _KasyTextAreaState extends State<KasyTextArea> {
         DecoratedBox(
           decoration: BoxDecoration(
             borderRadius: fieldRadius,
-            boxShadow: kIsWeb ? null : [fieldShadow],
+            boxShadow: [fieldShadow],
           ),
           child: innerField,
         ),

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

@@ -56,6 +56,30 @@ class KasyTextField extends StatefulWidget {
   /// Optional widget rendered to the right of [label] (e.g. a "Forgot password?" link).
   final Widget? labelTrailing;
 
+  /// Override for the field's vertical/horizontal padding. When null, the
+  /// design-system default is used (`KasySpacing.md` horizontal, `10`
+  /// vertical on mobile / `webSingleLineVerticalPadding` on web). Pass a
+  /// smaller value to make the field render shorter.
+  final EdgeInsetsGeometry? contentPadding;
+
+  /// Override for the field's drop shadow. When null, the design-system
+  /// default is used (single soft shadow on primary mobile variant, nothing
+  /// on secondary/embedded/web). Pass an empty list to render no shadow.
+  final List<BoxShadow>? boxShadow;
+
+  /// When true (default), the field shows the design-system blue focus border
+  /// while focused. Set to false to keep the resting border in every state —
+  /// useful for read-only triggers or compact contexts where the focus
+  /// affordance would feel noisy.
+  final bool focusBorder;
+
+  /// Forwards to [TextField.enableInteractiveSelection]. When false, the
+  /// field renders no caret, suppresses text-selection gestures, and stops
+  /// showing the I-beam cursor on web/desktop — handy for read-only triggers
+  /// (like [KasyDatePicker]) that should look like an input but feel like a
+  /// button.
+  final bool enableInteractiveSelection;
+
   const KasyTextField({
     super.key,
     this.controller,
@@ -89,6 +113,10 @@ class KasyTextField extends StatefulWidget {
     this.prefix,
     this.suffix,
     this.labelTrailing,
+    this.contentPadding,
+    this.boxShadow,
+    this.focusBorder = true,
+    this.enableInteractiveSelection = true,
   });
 
   @override
@@ -210,12 +238,9 @@ class _KasyTextFieldState extends State<KasyTextField> {
         widget.variant == KasyTextFieldVariant.secondary;
     final bool isEmbeddedVariant =
         widget.variant == KasyTextFieldVariant.embedded;
-    final bool useWebSingleLinePadding =
-        !isSecondaryVariant &&
-        !isEmbeddedVariant &&
-        kIsWeb &&
-        widget.minLines == null &&
-        widget.maxLines == 1;
+    // (No more web-specific padding — the field now uses the same vertical
+    // padding on every platform so primary/web TextFields render at the same
+    // height as mobile and as the KasyDatePicker trigger.)
     const double disabledTextOpacity = 0.56;
     const double disabledLabelOpacity = 0.46;
     const double disabledDescriptionOpacity = 0.34;
@@ -277,11 +302,17 @@ class _KasyTextFieldState extends State<KasyTextField> {
                 ),
         );
     final BorderRadius fieldRadius = BorderRadius.circular(KasyRadius.md);
+    // Contained shadow (no Y offset, negative spread). Renders on every
+    // platform — removed the previous `!kIsWeb` guard so web matches mobile
+    // and the KasyDatePicker trigger.
     final bool shouldShowShadow =
-        !isSecondaryVariant && !isEmbeddedVariant && !kIsWeb;
-    final BoxShadow resolvedShadow = KasyShadows.inputField(
-      context,
-      enabled: !isDisabled,
+        !isSecondaryVariant && !isEmbeddedVariant;
+    final BoxShadow resolvedShadow = BoxShadow(
+      color: const Color(0xFF000000).withValues(
+        alpha: context.isDark ? 0.28 : 0.11,
+      ),
+      blurRadius: 3,
+      spreadRadius: -1,
     );
     final TargetPlatform platform = Theme.of(context).platform;
     final bool isApplePlatform =
@@ -317,15 +348,21 @@ class _KasyTextFieldState extends State<KasyTextField> {
               width: restingBorderWidth,
             ),
           );
-    final InputBorder resolvedFocusedBorder = isEmbeddedVariant
-        ? embeddedBorder
-        : OutlineInputBorder(
-            borderRadius: fieldRadius,
-            borderSide: BorderSide(
-              color: resolvedFocusedBorderColor,
-              width: focusedBorderWidth,
-            ),
-          );
+    // When focusBorder is disabled, the focused state collapses to the
+    // resting border so the field never grows that bright outline. Error
+    // states still take priority via resolvedEnabledBorder picking the error
+    // color, so invalid fields keep the red highlight.
+    final InputBorder resolvedFocusedBorder = !widget.focusBorder
+        ? resolvedEnabledBorder
+        : isEmbeddedVariant
+            ? embeddedBorder
+            : OutlineInputBorder(
+                borderRadius: fieldRadius,
+                borderSide: BorderSide(
+                  color: resolvedFocusedBorderColor,
+                  width: focusedBorderWidth,
+                ),
+              );
     final Color surfaceColor = isEmbeddedVariant
         ? Colors.transparent
         : isSecondaryVariant
@@ -334,13 +371,20 @@ class _KasyTextFieldState extends State<KasyTextField> {
     final Color fieldFillColor = isDisabled
         ? surfaceColor.withValues(alpha: context.isDark ? 0.9 : 0.94)
         : surfaceColor;
+    // Affix icon tint matches the kit's helper-icon tone (0.62) when the
+    // field is enabled, and fades down with the same disabled curve used by
+    // the rest of the field so prefix/suffix don't stay "alive" while
+    // everything else dims.
+    final double affixAlpha = isDisabled
+        ? 0.62 * disabledTextOpacity
+        : 0.62;
     final Widget? resolvedPrefix = widget.prefix == null
         ? null
         : Center(
             child: IconTheme.merge(
               data: IconThemeData(
                 size: KasyTextField.iconGlyphSize,
-                color: context.colors.onSurface.withValues(alpha: 0.62),
+                color: context.colors.onSurface.withValues(alpha: affixAlpha),
               ),
               child: widget.prefix!,
             ),
@@ -351,7 +395,7 @@ class _KasyTextFieldState extends State<KasyTextField> {
             child: IconTheme.merge(
               data: IconThemeData(
                 size: KasyTextField.iconGlyphSize,
-                color: context.colors.onSurface.withValues(alpha: 0.62),
+                color: context.colors.onSurface.withValues(alpha: affixAlpha),
               ),
               child: widget.suffix!,
             ),
@@ -410,12 +454,11 @@ class _KasyTextFieldState extends State<KasyTextField> {
               width: KasyTextField.iconSlotExtent,
               height: KasyTextField.iconSlotExtent,
             ),
-      contentPadding: EdgeInsets.symmetric(
-        horizontal: isEmbeddedVariant ? 0 : KasySpacing.md,
-        vertical: useWebSingleLinePadding
-            ? KasyTextField.webSingleLineVerticalPadding
-            : KasySpacing.smd,
-      ),
+      contentPadding: widget.contentPadding ??
+          EdgeInsets.symmetric(
+            horizontal: isEmbeddedVariant ? 0 : KasySpacing.md,
+            vertical: 13,
+          ),
       fillColor: fieldFillColor,
       filled: !isEmbeddedVariant,
       // On web: keep fill unchanged on hover (hoverColor replaces fillColor — don't let
@@ -434,16 +477,29 @@ class _KasyTextFieldState extends State<KasyTextField> {
         borderRadius: fieldRadius,
         borderSide: BorderSide(color: context.colors.error, width: 1.3),
       ),
-      focusedErrorBorder: OutlineInputBorder(
-        borderRadius: fieldRadius,
-        borderSide: BorderSide(
-          color: context.colors.error,
-          width: focusedBorderWidth,
-        ),
-      ),
+      // Mirrors the focusBorder opt-out: when disabled, the focused-error
+      // state reuses the resting error border (no thicker outline on focus).
+      focusedErrorBorder: !widget.focusBorder
+          ? OutlineInputBorder(
+              borderRadius: fieldRadius,
+              borderSide: BorderSide(
+                color: context.colors.error,
+                width: 1.3,
+              ),
+            )
+          : OutlineInputBorder(
+              borderRadius: fieldRadius,
+              borderSide: BorderSide(
+                color: context.colors.error,
+                width: focusedBorderWidth,
+              ),
+            ),
       hintStyle: hintBaseStyle.copyWith(
+        // Match the disabled description fade so the placeholder dims along
+        // with the rest of the field (the previous 0.42 read as "kind of
+        // greyed out" rather than disabled).
         color: (hintBaseStyle.color ?? context.colors.muted).withValues(
-          alpha: isDisabled ? 0.42 : 1,
+          alpha: isDisabled ? disabledDescriptionOpacity : 1,
         ),
       ),
     );
@@ -471,11 +527,15 @@ class _KasyTextFieldState extends State<KasyTextField> {
       buildCounter: hasCounter ? _hideInputCounter : null,
       style: fieldTextStyle,
       decoration: decoration,
+      enableInteractiveSelection: widget.enableInteractiveSelection,
     );
+    // TESTE: sombra desabilitada para investigar diferença visual com DatePicker
+    final List<BoxShadow>? effectiveBoxShadow = widget.boxShadow ??
+        (shouldShowShadow ? <BoxShadow>[resolvedShadow] : null);
     final Widget decoratedField = DecoratedBox(
       decoration: BoxDecoration(
         borderRadius: fieldRadius,
-        boxShadow: shouldShowShadow ? <BoxShadow>[resolvedShadow] : null,
+        boxShadow: effectiveBoxShadow,
       ),
       child: Semantics(
         textField: true,

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

@@ -1,4 +1,3 @@
-import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
@@ -422,7 +421,7 @@ class _OTPCell extends StatelessWidget {
         ? _neutralFlatOtpFill(context)
         : (cellFillColor ?? context.colors.surface);
     final bool suppressShadow =
-        enabled && (neutralFlatCells || suppressCellShadow || kIsWeb);
+        enabled && (neutralFlatCells || suppressCellShadow);
     final List<BoxShadow> boxShadow = suppressShadow
         ? <BoxShadow>[]
         : <BoxShadow>[adjustedShadow];