kasy-cli 1.16.0 → 1.18.0

package/templates/firebase/lib/features/home/home_components_preview_registry.dart

@@ -231,6 +231,28 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
           ),
         ],
       );
+    case 'DatePicker':
+      return const ComponentPreviewDefinition(
+        title: 'DatePicker',
+        variants: [
+          ComponentPreviewVariant(
+            label: 'Without label',
+            builder: _buildDatePickerBasic,
+          ),
+          ComponentPreviewVariant(
+            label: 'With label',
+            builder: _buildDatePickerWithLabel,
+          ),
+          ComponentPreviewVariant(
+            label: 'With min & max',
+            builder: _buildDatePickerMinMax,
+          ),
+          ComponentPreviewVariant(
+            label: 'Disabled',
+            builder: _buildDatePickerDisabled,
+          ),
+        ],
+      );
     case 'Dialog':
       return const ComponentPreviewDefinition(
         title: 'Dialog',
@@ -654,6 +676,72 @@ class _SidebarPreviewState extends State<_SidebarPreview> {
 }
 
 
+// ─────────────────────────────────────────────────────────────────────────────
+// DatePicker — interactive demos
+// ─────────────────────────────────────────────────────────────────────────────
+
+Widget _buildDatePickerBasic(BuildContext context) =>
+    const _DatePickerPreview(variant: _DatePickerVariant.basic);
+
+Widget _buildDatePickerWithLabel(BuildContext context) =>
+    const _DatePickerPreview(variant: _DatePickerVariant.withLabel);
+
+Widget _buildDatePickerMinMax(BuildContext context) =>
+    const _DatePickerPreview(variant: _DatePickerVariant.minMax);
+
+Widget _buildDatePickerDisabled(BuildContext context) =>
+    const _DatePickerPreview(variant: _DatePickerVariant.disabled);
+
+enum _DatePickerVariant { basic, withLabel, minMax, disabled }
+
+class _DatePickerPreview extends StatefulWidget {
+  const _DatePickerPreview({required this.variant});
+
+  final _DatePickerVariant variant;
+
+  @override
+  State<_DatePickerPreview> createState() => _DatePickerPreviewState();
+}
+
+class _DatePickerPreviewState extends State<_DatePickerPreview> {
+  DateTime? _date;
+
+  @override
+  Widget build(BuildContext context) {
+    final DateTime today = DateTime.now();
+    final DateTime minDate = today.subtract(const Duration(days: 30));
+    final DateTime maxDate = today.add(const Duration(days: 60));
+
+    return Padding(
+      padding: const EdgeInsets.all(KasySpacing.md),
+      child: switch (widget.variant) {
+        _DatePickerVariant.basic => KasyDatePicker(
+            value: _date,
+            onChanged: (d) => setState(() => _date = d),
+          ),
+        _DatePickerVariant.withLabel => KasyDatePicker(
+            label: 'Date of birth',
+            value: _date,
+            onChanged: (d) => setState(() => _date = d),
+          ),
+        _DatePickerVariant.minMax => KasyDatePicker(
+            label: 'Appointment date',
+            value: _date,
+            minDate: minDate,
+            maxDate: maxDate,
+            onChanged: (d) => setState(() => _date = d),
+          ),
+        _DatePickerVariant.disabled => KasyDatePicker(
+            label: 'Locked date',
+            value: today,
+            enabled: false,
+            onChanged: (d) => setState(() => _date = d),
+          ),
+      },
+    );
+  }
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Tabs — interactive demos
 // ─────────────────────────────────────────────────────────────────────────────
@@ -667,6 +755,83 @@ Widget _buildTabsSecondaryVariant(BuildContext context) =>
 Widget _buildTabsFillModeVariant(BuildContext context) =>
     const _TabsFillModePreview();
 
+// ── Shared tab content helpers ────────────────────────────────────────────
+
+/// Fades [child] in when [tabIndex] == [currentIndex], out otherwise.
+///
+/// Used inside an [IndexedStack] so the content area never changes height —
+/// the stack always sizes to the tallest child and only the active one is
+/// visible.
+Widget _tabFade(int tabIndex, int currentIndex, Widget child) {
+  return AnimatedOpacity(
+    opacity: tabIndex == currentIndex ? 1.0 : 0.0,
+    duration: const Duration(milliseconds: 180),
+    curve: Curves.easeInOut,
+    child: child,
+  );
+}
+
+// ── Card container helper ─────────────────────────────────────────────────
+
+Widget _tabsCard(BuildContext context, Widget child) {
+  return DecoratedBox(
+    decoration: BoxDecoration(
+      color: context.colors.surface,
+      borderRadius: KasyRadius.lgBorderRadius,
+      border: Border.all(
+        color: context.colors.outline.withValues(alpha: 0.4),
+      ),
+    ),
+    child: child,
+  );
+}
+
+// ── Divider helper ────────────────────────────────────────────────────────
+
+Widget _tabsDivider(BuildContext context) => Divider(
+      height: 1,
+      thickness: 1,
+      indent: KasySpacing.md,
+      endIndent: KasySpacing.md,
+      color: context.colors.outline.withValues(alpha: 0.33),
+    );
+
+// ── Radio-style option row ────────────────────────────────────────────────
+
+/// Single-select option row that looks like a radio button using KasyCheckbox.
+class _RadioOptionTile extends StatelessWidget {
+  const _RadioOptionTile({
+    required this.label,
+    required this.description,
+    required this.selected,
+    required this.onTap,
+  });
+
+  final String label;
+  final String description;
+  final bool selected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.smd,
+      ),
+      child: KasyCheckbox(
+        value: selected,
+        onChanged: (_) => onTap(),
+        label: label,
+        description: description,
+        style: const KasyCheckboxStyle(
+          shape: KasyCheckboxShape.circle,
+        ),
+      ),
+    );
+  }
+}
+
 // ── Primary variant ────────────────────────────────────────────────────────
 
 class _TabsPrimaryPreview extends StatefulWidget {
@@ -679,40 +844,239 @@ class _TabsPrimaryPreview extends StatefulWidget {
 class _TabsPrimaryPreviewState extends State<_TabsPrimaryPreview> {
   int _index = 0;
 
-  static const List<String> _tabs = ['Overview', 'Details', 'Settings'];
+  // General tab
+  final TextEditingController _urlController = TextEditingController();
+  bool _analytics = true;
+  bool _errorReports = false;
 
-  static const List<String> _content = [
-    'Overview content — a summary of the most important information at a glance.',
-    'Details content — in-depth information about each specific aspect.',
-    'Settings content — configure preferences and options here.',
-  ];
+  // Appearance tab
+  int _theme = 0; // 0=Auto 1=Light 2=Dark
+  int _fontSize = 1; // 0=Small 1=Medium 2=Large
+
+  // Notifications tab
+  bool _pushEnabled = true;
+  bool _emailEnabled = true;
+  bool _mentions = true;
+  bool _weeklyDigest = false;
+
+  // Profile tab
+  final TextEditingController _nameController =
+      TextEditingController(text: 'Paulo Morales');
+  final TextEditingController _usernameController =
+      TextEditingController(text: 'paulomorales');
 
   @override
-  Widget build(BuildContext context) {
-    final KasyColors c = context.colors;
+  void dispose() {
+    _urlController.dispose();
+    _nameController.dispose();
+    _usernameController.dispose();
+    super.dispose();
+  }
+
+  Widget _generalTab(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Padding(
+          padding: const EdgeInsets.all(KasySpacing.md),
+          child: KasyTextField(
+            controller: _urlController,
+            variant: KasyTextFieldVariant.secondary,
+            label: 'Homepage URL',
+            hint: 'https://yoursite.com',
+          ),
+        ),
+        _tabsDivider(context),
+        KasyCheckboxTile(
+          value: _analytics,
+          onChanged: (v) => setState(() => _analytics = v),
+          label: 'Enable analytics',
+          description: 'Collect anonymous usage data to improve the app',
+        ),
+        _tabsDivider(context),
+        KasyCheckboxTile(
+          value: _errorReports,
+          onChanged: (v) => setState(() => _errorReports = v),
+          label: 'Send error reports',
+          description: 'Automatically share crash reports with the team',
+        ),
+      ],
+    );
+  }
+
+  Widget _appearanceTab(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Padding(
+          padding: const EdgeInsets.fromLTRB(
+            KasySpacing.md,
+            KasySpacing.md,
+            KasySpacing.md,
+            KasySpacing.sm,
+          ),
+          child: Text(
+            'Theme',
+            style: context.textTheme.labelMedium?.copyWith(
+              color: context.colors.onSurface,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ),
+        _RadioOptionTile(
+          label: 'Auto',
+          description: 'Follows your system appearance',
+          selected: _theme == 0,
+          onTap: () => setState(() => _theme = 0),
+        ),
+        _tabsDivider(context),
+        _RadioOptionTile(
+          label: 'Light',
+          description: 'Always use the light theme',
+          selected: _theme == 1,
+          onTap: () => setState(() => _theme = 1),
+        ),
+        _tabsDivider(context),
+        _RadioOptionTile(
+          label: 'Dark',
+          description: 'Always use the dark theme',
+          selected: _theme == 2,
+          onTap: () => setState(() => _theme = 2),
+        ),
+        _tabsDivider(context),
+        Padding(
+          padding: const EdgeInsets.fromLTRB(
+            KasySpacing.md,
+            KasySpacing.md,
+            KasySpacing.md,
+            KasySpacing.sm,
+          ),
+          child: Text(
+            'Font size',
+            style: context.textTheme.labelMedium?.copyWith(
+              color: context.colors.onSurface,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ),
+        _RadioOptionTile(
+          label: 'Small',
+          description: 'Compact text for more content on screen',
+          selected: _fontSize == 0,
+          onTap: () => setState(() => _fontSize = 0),
+        ),
+        _tabsDivider(context),
+        _RadioOptionTile(
+          label: 'Medium',
+          description: 'Balanced size for most displays',
+          selected: _fontSize == 1,
+          onTap: () => setState(() => _fontSize = 1),
+        ),
+        _tabsDivider(context),
+        _RadioOptionTile(
+          label: 'Large',
+          description: 'Larger text for better readability',
+          selected: _fontSize == 2,
+          onTap: () => setState(() => _fontSize = 2),
+        ),
+      ],
+    );
+  }
+
+  Widget _notificationsTab(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        KasyCheckboxTile(
+          value: _pushEnabled,
+          onChanged: (v) => setState(() => _pushEnabled = v),
+          label: 'Push notifications',
+          description: 'Receive alerts directly on your device',
+        ),
+        _tabsDivider(context),
+        KasyCheckboxTile(
+          value: _emailEnabled,
+          onChanged: (v) => setState(() => _emailEnabled = v),
+          label: 'Email notifications',
+          description: 'Get updates delivered to your inbox',
+        ),
+        _tabsDivider(context),
+        KasyCheckboxTile(
+          value: _mentions,
+          onChanged: (v) => setState(() => _mentions = v),
+          label: 'Mentions and replies',
+          description: 'Notify when someone mentions or replies to you',
+        ),
+        _tabsDivider(context),
+        KasyCheckboxTile(
+          value: _weeklyDigest,
+          onChanged: (v) => setState(() => _weeklyDigest = v),
+          label: 'Weekly digest',
+          description: 'A summary of activity sent every Monday',
+        ),
+      ],
+    );
+  }
+
+  Widget _profileTab(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(KasySpacing.md),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          KasyTextField(
+            controller: _nameController,
+            variant: KasyTextFieldVariant.secondary,
+            label: 'Name',
+            hint: 'Your full name',
+            textInputAction: TextInputAction.next,
+          ),
+          const SizedBox(height: KasySpacing.md),
+          KasyTextField(
+            controller: _usernameController,
+            variant: KasyTextFieldVariant.secondary,
+            label: 'Username',
+            hint: 'yourhandle',
+            textInputAction: TextInputAction.done,
+          ),
+          const SizedBox(height: KasySpacing.md),
+          KasyButton(
+            label: 'Update profile',
+            onPressed: () {},
+          ),
+        ],
+      ),
+    );
+  }
 
+  @override
+  Widget build(BuildContext context) {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       mainAxisSize: MainAxisSize.min,
       children: [
         KasyTabs(
-          tabs: _tabs,
+          tabs: const ['General', 'Appearance', 'Notifications', 'Profile'],
           selectedIndex: _index,
           onTabSelected: (i) => setState(() => _index = i),
         ),
         const SizedBox(height: KasySpacing.md),
-        AnimatedSwitcher(
-          duration: const Duration(milliseconds: 200),
-          child: KasyCard(
-            key: ValueKey(_index),
-            padding: const EdgeInsets.all(KasySpacing.md),
-            child: Text(
-              _content[_index],
-              style: context.textTheme.bodyMedium?.copyWith(
-                color: c.onSurface.withValues(alpha: 0.75),
-                height: 1.5,
-              ),
-            ),
+        // IndexedStack keeps height fixed at the tallest child (Appearance).
+        // AnimatedOpacity on each child provides the smooth crossfade.
+        _tabsCard(
+          context,
+          IndexedStack(
+            index: _index,
+            children: [
+              _tabFade(0, _index, _generalTab(context)),
+              _tabFade(1, _index, _appearanceTab(context)),
+              _tabFade(2, _index, _notificationsTab(context)),
+              _tabFade(3, _index, _profileTab(context)),
+            ],
           ),
         ),
         const SizedBox(height: KasySpacing.lg),
@@ -720,7 +1084,7 @@ class _TabsPrimaryPreviewState extends State<_TabsPrimaryPreview> {
         Text(
           'WITH DISABLED TAB',
           style: context.textTheme.labelSmall?.copyWith(
-            color: c.muted,
+            color: context.colors.muted,
             letterSpacing: 1.2,
             fontWeight: FontWeight.w700,
           ),
@@ -752,41 +1116,146 @@ class _TabsSecondaryPreview extends StatefulWidget {
 class _TabsSecondaryPreviewState extends State<_TabsSecondaryPreview> {
   int _index = 0;
 
-  static const List<String> _tabs = ['Inbox', 'Sent', 'Drafts'];
+  // General tab
+  final TextEditingController _siteController = TextEditingController();
+  bool _cacheEnabled = true;
+  bool _debugMode = false;
 
-  static const List<String> _content = [
-    'Inbox — your incoming messages appear here.',
-    'Sent — messages you have already sent.',
-    'Drafts — unfinished messages saved for later.',
-  ];
+  // Notifications tab
+  bool _pushEnabled = true;
+  bool _emailEnabled = false;
+  bool _weeklyDigest = true;
+
+  // Profile tab
+  final TextEditingController _nameController =
+      TextEditingController(text: 'Paulo Morales');
+  final TextEditingController _emailController =
+      TextEditingController(text: 'paulo@kasy.dev');
 
   @override
-  Widget build(BuildContext context) {
-    final KasyColors c = context.colors;
+  void dispose() {
+    _siteController.dispose();
+    _nameController.dispose();
+    _emailController.dispose();
+    super.dispose();
+  }
 
+  Widget _generalTab(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Padding(
+          padding: const EdgeInsets.all(KasySpacing.md),
+          child: KasyTextField(
+            controller: _siteController,
+            variant: KasyTextFieldVariant.secondary,
+            label: 'Site URL',
+            hint: 'https://yoursite.com',
+          ),
+        ),
+        _tabsDivider(context),
+        KasyCheckboxTile(
+          value: _cacheEnabled,
+          onChanged: (v) => setState(() => _cacheEnabled = v),
+          label: 'Enable caching',
+          description: 'Speed up page loads with local cache',
+        ),
+        _tabsDivider(context),
+        KasyCheckboxTile(
+          value: _debugMode,
+          onChanged: (v) => setState(() => _debugMode = v),
+          label: 'Debug mode',
+          description: 'Show detailed logs and error messages',
+        ),
+      ],
+    );
+  }
+
+  Widget _notificationsTab(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        KasyCheckboxTile(
+          value: _pushEnabled,
+          onChanged: (v) => setState(() => _pushEnabled = v),
+          label: 'Push notifications',
+          description: 'Receive alerts directly on your device',
+        ),
+        _tabsDivider(context),
+        KasyCheckboxTile(
+          value: _emailEnabled,
+          onChanged: (v) => setState(() => _emailEnabled = v),
+          label: 'Email notifications',
+          description: 'Get updates delivered to your inbox',
+        ),
+        _tabsDivider(context),
+        KasyCheckboxTile(
+          value: _weeklyDigest,
+          onChanged: (v) => setState(() => _weeklyDigest = v),
+          label: 'Weekly digest',
+          description: 'A summary of activity sent every Monday',
+        ),
+      ],
+    );
+  }
+
+  Widget _profileTab(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(KasySpacing.md),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          KasyTextField(
+            controller: _nameController,
+            variant: KasyTextFieldVariant.secondary,
+            label: 'Name',
+            hint: 'Your full name',
+            textInputAction: TextInputAction.next,
+          ),
+          const SizedBox(height: KasySpacing.md),
+          KasyTextField(
+            controller: _emailController,
+            variant: KasyTextFieldVariant.secondary,
+            label: 'Email',
+            hint: 'email@example.com',
+            contentType: KasyTextFieldContentType.email,
+            textInputAction: TextInputAction.done,
+          ),
+          const SizedBox(height: KasySpacing.md),
+          KasyButton(
+            label: 'Save changes',
+            onPressed: () {},
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       mainAxisSize: MainAxisSize.min,
       children: [
         KasyTabs(
-          tabs: _tabs,
+          tabs: const ['General', 'Notifications', 'Profile'],
           selectedIndex: _index,
           onTabSelected: (i) => setState(() => _index = i),
           variant: KasyTabsVariant.secondary,
         ),
         const SizedBox(height: KasySpacing.md),
-        AnimatedSwitcher(
-          duration: const Duration(milliseconds: 200),
-          child: KasyCard(
-            key: ValueKey(_index),
-            padding: const EdgeInsets.all(KasySpacing.md),
-            child: Text(
-              _content[_index],
-              style: context.textTheme.bodyMedium?.copyWith(
-                color: c.onSurface.withValues(alpha: 0.75),
-                height: 1.5,
-              ),
-            ),
+        _tabsCard(
+          context,
+          IndexedStack(
+            index: _index,
+            children: [
+              _tabFade(0, _index, _generalTab(context)),
+              _tabFade(1, _index, _notificationsTab(context)),
+              _tabFade(2, _index, _profileTab(context)),
+            ],
           ),
         ),
         const SizedBox(height: KasySpacing.lg),
@@ -794,7 +1263,7 @@ class _TabsSecondaryPreviewState extends State<_TabsSecondaryPreview> {
         Text(
           'WITH ICONS',
           style: context.textTheme.labelSmall?.copyWith(
-            color: c.muted,
+            color: context.colors.muted,
             letterSpacing: 1.2,
             fontWeight: FontWeight.w700,
           ),
@@ -826,14 +1295,19 @@ class _TabsFillModePreview extends StatefulWidget {
 
 class _TabsFillModePreviewState extends State<_TabsFillModePreview> {
   int _primaryIndex = 0;
-  int _secondaryIndex = 0;
+  int _iconIndex = 0;
+
+  static const List<String> _primaryContent = [
+    'Overview — see a high-level summary of your project status and recent activity.',
+    'Analytics — track metrics like sessions, retention, and conversion rates over time.',
+    'Settings — manage project configuration, integrations, and team access.',
+  ];
 
   @override
   Widget build(BuildContext context) {
-    final KasyColors c = context.colors;
-    final TextStyle labelStyle =
+    final TextStyle sectionLabel =
         context.textTheme.labelSmall?.copyWith(
-          color: c.muted,
+          color: context.colors.muted,
           letterSpacing: 1.2,
           fontWeight: FontWeight.w700,
         ) ??
@@ -843,38 +1317,52 @@ class _TabsFillModePreviewState extends State<_TabsFillModePreview> {
       crossAxisAlignment: CrossAxisAlignment.stretch,
       mainAxisSize: MainAxisSize.min,
       children: [
-        Text('PRIMARY + FILL', style: labelStyle),
+        Text('PRIMARY FILL', style: sectionLabel),
         const SizedBox(height: KasySpacing.sm),
         KasyTabs(
-          tabs: const ['Tab 1', 'Tab 2', 'Tab 3'],
+          tabs: const ['Overview', 'Analytics', 'Settings'],
           selectedIndex: _primaryIndex,
           onTabSelected: (i) => setState(() => _primaryIndex = i),
           mode: KasyTabsMode.fill,
         ),
-        const SizedBox(height: KasySpacing.lg),
-        Text('SECONDARY + FILL', style: labelStyle),
-        const SizedBox(height: KasySpacing.sm),
-        KasyTabs(
-          tabs: const ['Tab 1', 'Tab 2', 'Tab 3'],
-          selectedIndex: _secondaryIndex,
-          onTabSelected: (i) => setState(() => _secondaryIndex = i),
-          variant: KasyTabsVariant.secondary,
-          mode: KasyTabsMode.fill,
-        ),
         const SizedBox(height: KasySpacing.md),
-        AnimatedSwitcher(
-          duration: const Duration(milliseconds: 200),
-          child: KasyCard(
-            key: ValueKey('fill_$_secondaryIndex'),
+        _tabsCard(
+          context,
+          Padding(
             padding: const EdgeInsets.all(KasySpacing.md),
-            child: Text(
-              'Content for Tab ${_secondaryIndex + 1}',
-              style: context.textTheme.bodyMedium?.copyWith(
-                color: c.onSurface.withValues(alpha: 0.75),
+            child: IndexedStack(
+              index: _primaryIndex,
+              children: List.generate(
+                _primaryContent.length,
+                (i) => _tabFade(
+                  i,
+                  _primaryIndex,
+                  Text(
+                    _primaryContent[i],
+                    style: context.textTheme.bodyMedium?.copyWith(
+                      color: context.colors.onSurface.withValues(alpha: 0.75),
+                      height: 1.5,
+                    ),
+                  ),
+                ),
               ),
             ),
           ),
         ),
+        const SizedBox(height: KasySpacing.lg),
+        Text('SECONDARY FILL + ICONS', style: sectionLabel),
+        const SizedBox(height: KasySpacing.sm),
+        KasyTabs.items(
+          items: const [
+            KasyTabItem(label: 'Home', icon: KasyIcons.home),
+            KasyTabItem(label: 'Profile', icon: KasyIcons.person),
+            KasyTabItem(label: 'Settings', icon: KasyIcons.settings),
+          ],
+          selectedIndex: _iconIndex,
+          onTabSelected: (i) => setState(() => _iconIndex = i),
+          variant: KasyTabsVariant.secondary,
+          mode: KasyTabsMode.fill,
+        ),
       ],
     );
   }
@@ -1199,7 +1687,7 @@ Widget _buildAvatarGroupVariant(BuildContext context) {
   // Shared gradient avatars list
   final List<Widget> gradients = [
     KasyAvatar.gradientFill(size: KasyAvatarSize.small, diameter: d, showShadow: false, gradient: KasyAvatarGradients.blue),
-    KasyAvatar.gradientFill(size: KasyAvatarSize.small, diameter: d, showShadow: false, gradient: KasyAvatarGradients.teal),
+    KasyAvatar.gradientFill(size: KasyAvatarSize.small, diameter: d, showShadow: false, gradient: KasyAvatarGradients.sky),
     KasyAvatar.gradientFill(size: KasyAvatarSize.small, diameter: d, showShadow: false, gradient: KasyAvatarGradients.orange),
     KasyAvatar.gradientFill(size: KasyAvatarSize.small, diameter: d, showShadow: false, gradient: KasyAvatarGradients.red),
     KasyAvatar.gradientFill(size: KasyAvatarSize.small, diameter: d, showShadow: false, gradient: KasyAvatarGradients.silver),
@@ -2096,7 +2584,7 @@ Widget _buildBadgeDefault(BuildContext context) {
               child: KasyAvatar.gradientFill(
                 size: KasyAvatarSize.medium,
                 showShadow: false,
-                gradient: KasyAvatarGradients.teal,
+                gradient: KasyAvatarGradients.sky,
               ),
             ),
             const SizedBox(height: KasySpacing.sm),
@@ -4028,9 +4516,9 @@ class _BadgeColorsPreview extends StatelessWidget {
       KasyBadgeTone.warning,
       KasyBadgeTone.danger,
     ];
-    final List<Gradient> gradients = [
+    final List<KasyAvatarGradientData> gradients = [
       KasyAvatarGradients.blue,
-      KasyAvatarGradients.teal,
+      KasyAvatarGradients.sky,
       KasyAvatarGradients.purple,
       KasyAvatarGradients.orange,
       KasyAvatarGradients.red,
@@ -4153,9 +4641,9 @@ class _BadgePlacementsPreview extends StatelessWidget {
 class _BadgeDotPreview extends StatelessWidget {
   const _BadgeDotPreview();
 
-  static const List<(KasyBadgeTone, Gradient)> _items = [
+  static const List<(KasyBadgeTone, KasyAvatarGradientData)> _items = [
     (KasyBadgeTone.neutral, KasyAvatarGradients.blue),
-    (KasyBadgeTone.primary, KasyAvatarGradients.teal),
+    (KasyBadgeTone.primary, KasyAvatarGradients.sky),
     (KasyBadgeTone.success, KasyAvatarGradients.purple),
     (KasyBadgeTone.warning, KasyAvatarGradients.red),
     (KasyBadgeTone.danger, KasyAvatarGradients.orange),
@@ -4197,9 +4685,9 @@ class _BadgeVariantsPreview extends StatelessWidget {
     KasyBadgeTone.danger,
   ];
 
-  static const List<Gradient> _gradients = [
+  static const List<KasyAvatarGradientData> _gradients = [
     KasyAvatarGradients.blue,
-    KasyAvatarGradients.teal,
+    KasyAvatarGradients.sky,
     KasyAvatarGradients.purple,
     KasyAvatarGradients.red,
     KasyAvatarGradients.orange,
@@ -4332,7 +4820,7 @@ class _BadgeWithContentPreview extends StatelessWidget {
 class _BadgeContentItem extends StatelessWidget {
   final String label;
   final KasyBadge badge;
-  final Gradient gradient;
+  final KasyAvatarGradientData gradient;
 
   const _BadgeContentItem({
     required this.label,