feat(main): Tabs (#11)

* feat(main): Tabs

* [automated commit] lint format and import sort

---------

Co-authored-by: github-actions <github-actions@github.com>

example/lib/home.dart

@@ -16,6 +16,7 @@ import 'package:zeta_example/pages/components/navigation_bar_example.dart';
 import 'package:zeta_example/pages/components/radio_example.dart';
 import 'package:zeta_example/pages/components/switch_example.dart';
 import 'package:zeta_example/pages/components/snackbar_example.dart';
+import 'package:zeta_example/pages/components/tabs_example.dart';
 import 'package:zeta_example/pages/theme/color_example.dart';
 import 'package:zeta_example/pages/components/password_input_example.dart';
 import 'package:zeta_example/pages/components/progress_example.dart';
@@ -49,6 +50,7 @@ final List<Component> components = [
   Component(DropdownExample.name, (context) => const DropdownExample()),
   Component(ProgressExample.name, (context) => const ProgressExample()),
   Component(SnackBarExample.name, (context) => const SnackBarExample()),
+  Component(TabsExample.name, (context) => const TabsExample()),
   Component(DialPadExample.name, (context) => const DialPadExample()),
   Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
   Component(SwitchExample.name, (context) => const SwitchExample()),

example/lib/pages/components/tabs_example.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class TabsExample extends StatefulWidget {
+  const TabsExample({super.key});
+
+  static const String name = 'Tabs';
+
+  @override
+  State<TabsExample> createState() => _TabsExampleState();
+}
+
+class _TabsExampleState extends State<TabsExample> {
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: TabsExample.name,
+      child: Column(
+        children: [
+          DefaultTabController(
+            length: 2,
+            child: ZetaTabBar(
+              context: context,
+              tabs: [
+                ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
+                ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
+              ],
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(top: ZetaSpacing.l),
+            child: DefaultTabController(
+              length: 5,
+              child: ZetaTabBar(
+                context: context,
+                isScrollable: true,
+                tabs: [
+                  ZetaTab(text: "Tab Item"),
+                  ZetaTab(text: "Tab Item"),
+                  ZetaTab(text: "Tab Item"),
+                  ZetaTab(text: "Tab Item"),
+                  ZetaTab(text: "Tab Item"),
+                ],
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(top: ZetaSpacing.l),
+            child: DefaultTabController(
+              length: 5,
+              child: ZetaTabBar(
+                context: context,
+                isScrollable: true,
+                enabled: false,
+                tabs: [
+                  ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),
+                  ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),
+                  ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),
+                  ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),
+                  ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

example/widgetbook/main.dart

@@ -22,6 +22,7 @@ import 'pages/components/progress_widgetbook.dart';
 import 'pages/components/radio_widgetbook.dart';
 import 'pages/components/switch_widgetbook.dart';
 import 'pages/components/snack_bar_widgetbook.dart';
+import 'pages/components/tabs_widgetbook.dart';
 import 'pages/theme/color_widgetbook.dart';
 import 'pages/theme/radius_widgetbook.dart';
 import 'pages/theme/spacing_widgetbook.dart';
@@ -97,6 +98,7 @@ class HotReload extends StatelessWidget {
               name: 'Snack Bar',
               builder: (context) => snackBarUseCase(context),
             ),
+            WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),
         WidgetbookCategory(

example/widgetbook/pages/components/tabs_widgetbook.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget tabsUseCase(BuildContext context) {
+  return WidgetbookTestWidget(
+    widget: SingleChildScrollView(
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.only(top: ZetaSpacing.l),
+            child: DefaultTabController(
+              length: 2,
+              child: ZetaTabBar(
+                context: context,
+                enabled: context.knobs.boolean(
+                  label: "Enabled",
+                  initialValue: true,
+                ),
+                tabs: [
+                  ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
+                  ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
+                ],
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(top: ZetaSpacing.l),
+            child: DefaultTabController(
+              length: 5,
+              child: ZetaTabBar(
+                context: context,
+                enabled: context.knobs.boolean(label: "Enabled"),
+                isScrollable: true,
+                tabs: [
+                  ZetaTab(text: "Tab Item"),
+                  ZetaTab(text: "Tab Item"),
+                  ZetaTab(text: "Tab Item"),
+                  ZetaTab(text: "Tab Item"),
+                  ZetaTab(text: "Tab Item"),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    ),
+  );
+}

lib/src/components/tabs/tab.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import '../../../zeta_flutter.dart';
+
+/// Defines how the bounds of the selected tab indicator are computed. Intended to be used with [ZetaTabBar].
+class ZetaTab extends Tab {
+  /// Creates a Zeta Design tab bar.
+  ZetaTab({
+    Widget? icon,
+    String? text,
+    super.key,
+  }) : super(
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              if (icon != null) ...[
+                const SizedBox(width: ZetaSpacing.s),
+                icon,
+              ],
+              if (text != null)
+                Padding(
+                  padding: icon != null ? const EdgeInsets.only(left: ZetaSpacing.x2) : EdgeInsets.zero,
+                  child: Text(text),
+                ),
+              if (icon != null) const SizedBox(width: ZetaSpacing.s),
+            ],
+          ),
+        );
+}

lib/src/components/tabs/tab_bar.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import '../../../zeta_flutter.dart';
+
+/// A Zeta Design primary tab bar.
+class ZetaTabBar extends TabBar {
+  /// Creates a Zeta Design primary tab bar.
+  ZetaTabBar({
+    required BuildContext context,
+    required List<ZetaTab> super.tabs,
+    TabAlignment super.tabAlignment = TabAlignment.center,
+    bool enabled = true,
+    super.isScrollable,
+    super.enableFeedback,
+    super.dragStartBehavior,
+    super.padding,
+    super.onTap,
+    super.key,
+  }) : super(
+          indicatorSize: isScrollable ? TabBarIndicatorSize.label : TabBarIndicatorSize.tab,
+          labelPadding: isScrollable ? null : EdgeInsets.zero,
+          indicator: UnderlineTabIndicator(
+            borderSide: BorderSide(
+              color: Zeta.of(context).colors.primary,
+              width: enabled ? 4 : 0,
+            ),
+            borderRadius: ZetaRadius.none,
+          ),
+          labelStyle: ZetaTextStyles.labelLarge.copyWith(
+            color: enabled ? Zeta.of(context).colors.textDefault : Zeta.of(context).colors.textDisabled,
+          ),
+          unselectedLabelStyle: ZetaTextStyles.labelLarge.copyWith(
+            color: enabled ? Zeta.of(context).colors.textSubtle : Zeta.of(context).colors.textDisabled,
+          ),
+        );
+}

lib/zeta_flutter.dart

@@ -32,6 +32,8 @@ export 'src/components/progress/progress_circle.dart';
 export 'src/components/radio/radio.dart';
 export 'src/components/snack_bar/snack_bar.dart';
 export 'src/components/switch/zeta_switch.dart';
+export 'src/components/tabs/tab.dart';
+export 'src/components/tabs/tab_bar.dart';
 export 'src/theme/color_extensions.dart';
 export 'src/theme/color_scheme.dart';
 export 'src/theme/color_swatch.dart';