chore: rename appbar to topappbar to match designs

example/lib/home.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:zeta_example/pages/components/accordion_example.dart';
-import 'package:zeta_example/pages/components/app_bar_example.dart';
 import 'package:zeta_example/pages/components/avatar_example.dart';
 import 'package:zeta_example/pages/components/badges_example.dart';
 import 'package:zeta_example/pages/components/banner_example.dart';
@@ -34,6 +33,7 @@ import 'package:zeta_example/pages/components/snackbar_example.dart';
 import 'package:zeta_example/pages/components/tabs_example.dart';
 import 'package:zeta_example/pages/components/pagination_example.dart';
 import 'package:zeta_example/pages/components/tooltip_example.dart';
+import 'package:zeta_example/pages/components/top_app_bar_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';
@@ -53,7 +53,7 @@ class Component {
 
 final List<Component> components = [
   Component(AccordionExample.name, (context) => const AccordionExample()),
-  Component(AppBarExample.name, (context) => const AppBarExample()),
+  Component(TopAppBarExample.name, (context) => const TopAppBarExample()),
   Component(AvatarExample.name, (context) => const AvatarExample()),
   Component(BannerExample.name, (context) => const BannerExample()),
   Component(BadgesExample.name, (context) => const BadgesExample()),

example/lib/pages/components/app_bar_example.dart → example/lib/pages/components/top_app_bar_example.dart

@@ -4,16 +4,16 @@ import 'package:flutter/material.dart';
 import 'package:zeta_example/widgets.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-class AppBarExample extends StatefulWidget {
-  const AppBarExample({super.key});
+class TopAppBarExample extends StatefulWidget {
+  const TopAppBarExample({super.key});
 
-  static const String name = 'AppBar';
+  static const String name = 'TopAppBar';
 
   @override
-  State<AppBarExample> createState() => _AppBarExampleState();
+  State<TopAppBarExample> createState() => _TopAppBarExampleState();
 }
 
-class _AppBarExampleState extends State<AppBarExample> {
+class _TopAppBarExampleState extends State<TopAppBarExample> {
   late final _searchController = AppBarSearchController();
 
   void _showHideSearch() {
@@ -23,14 +23,14 @@ class _AppBarExampleState extends State<AppBarExample> {
   @override
   Widget build(BuildContext context) {
     return ExampleScaffold(
-      name: AppBarExample.name,
+      name: TopAppBarExample.name,
       child: SingleChildScrollView(
         child: Column(
           children: [
             // Default
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
+              child: ZetaTopAppBar(
                 leading: IconButton(
                   onPressed: () {},
                   icon: Icon(Icons.menu_rounded),
@@ -64,8 +64,8 @@ class _AppBarExampleState extends State<AppBarExample> {
             // Centered
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
-                type: ZetaAppBarType.centeredTitle,
+              child: ZetaTopAppBar(
+                type: ZetaTopAppBarType.centeredTitle,
                 leading: IconButton(
                   onPressed: () {},
                   icon: Icon(Icons.menu_rounded),
@@ -83,7 +83,7 @@ class _AppBarExampleState extends State<AppBarExample> {
             // Contextual
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
+              child: ZetaTopAppBar(
                 leading: IconButton(
                   onPressed: () {},
                   icon: Icon(ZetaIcons.close_round),
@@ -115,8 +115,8 @@ class _AppBarExampleState extends State<AppBarExample> {
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
               child: Column(
                 children: [
-                  ZetaAppBar(
-                    type: ZetaAppBarType.centeredTitle,
+                  ZetaTopAppBar(
+                    type: ZetaTopAppBarType.centeredTitle,
                     leading: BackButton(),
                     title: Text("Title"),
                     actions: [
@@ -151,8 +151,8 @@ class _AppBarExampleState extends State<AppBarExample> {
             // Extended
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
-                type: ZetaAppBarType.extendedTitle,
+              child: ZetaTopAppBar(
+                type: ZetaTopAppBarType.extendedTitle,
                 leading: IconButton(
                   onPressed: () {},
                   icon: Icon(Icons.menu),

example/widgetbook/main.dart

@@ -4,7 +4,7 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import 'pages/assets/icon_widgetbook.dart';
 import 'pages/components/accordion_widgetbook.dart';
-import 'pages/components/app_bar_widgetbook.dart';
+import 'pages/components/top_app_bar_widgetbook.dart';
 import 'pages/components/avatar_widgetbook.dart';
 import 'pages/components/badges_widgetbook.dart';
 import 'pages/components/banner_widgetbook.dart';
@@ -61,10 +61,10 @@ class HotReload extends StatelessWidget {
           isInitiallyExpanded: false,
           children: [
             WidgetbookComponent(
-              name: 'App Bar',
+              name: 'Top App Bar',
               useCases: [
-                WidgetbookUseCase(name: 'Default', builder: (context) => defaultAppBarUseCase(context)),
-                WidgetbookUseCase(name: 'Search', builder: (context) => searchAppBarUseCase(context)),
+                WidgetbookUseCase(name: 'Default', builder: (context) => defaultTopAppBarUseCase(context)),
+                WidgetbookUseCase(name: 'Search', builder: (context) => searchTopAppBarUseCase(context)),
               ],
             ),
             WidgetbookComponent(

example/widgetbook/pages/components/app_bar_widgetbook.dart → example/widgetbook/pages/components/top_app_bar_widgetbook.dart

@@ -6,20 +6,19 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-Widget defaultAppBarUseCase(BuildContext context) {
+Widget defaultTopAppBarUseCase(BuildContext context) {
   return WidgetbookTestWidget(
     widget: StatefulBuilder(
       builder: (context, setState) {
         final title = context.knobs.string(label: "Title", initialValue: "Title");
-
         final type = context.knobs.list(
           label: "Type",
           options: [
-            ZetaAppBarType.defaultAppBar,
-            ZetaAppBarType.centeredTitle,
-            ZetaAppBarType.extendedTitle,
+            ZetaTopAppBarType.defaultAppBar,
+            ZetaTopAppBarType.centeredTitle,
+            ZetaTopAppBarType.extendedTitle,
           ],
-          initialOption: ZetaAppBarType.defaultAppBar,
+          initialOption: ZetaTopAppBarType.defaultAppBar,
           labelBuilder: (type) => type.name,
         );
 
@@ -48,7 +47,7 @@ Widget defaultAppBarUseCase(BuildContext context) {
           labelBuilder: (icon) => icon.key.toString(),
         );
 
-        return ZetaAppBar(
+        return ZetaTopAppBar(
           leading: IconButton(
             onPressed: () {},
             icon: leadingIcon,
@@ -77,7 +76,7 @@ Widget defaultAppBarUseCase(BuildContext context) {
   );
 }
 
-Widget searchAppBarUseCase(BuildContext context) {
+Widget searchTopAppBarUseCase(BuildContext context) {
   return WidgetbookTestWidget(
     widget: _SearchUseCase(),
   );
@@ -100,11 +99,11 @@ class _SearchUseCaseState extends State<_SearchUseCase> {
     final type = context.knobs.list(
       label: "Type",
       options: [
-        ZetaAppBarType.defaultAppBar,
-        ZetaAppBarType.centeredTitle,
-        ZetaAppBarType.extendedTitle,
+        ZetaTopAppBarType.defaultAppBar,
+        ZetaTopAppBarType.centeredTitle,
+        ZetaTopAppBarType.extendedTitle,
       ],
-      initialOption: ZetaAppBarType.defaultAppBar,
+      initialOption: ZetaTopAppBarType.defaultAppBar,
       labelBuilder: (type) => type.name,
     );
 
@@ -135,7 +134,7 @@ class _SearchUseCaseState extends State<_SearchUseCase> {
       initialValue: false,
     );
 
-    return ZetaAppBar(
+    return ZetaTopAppBar(
       leading: IconButton(
         onPressed: () {},
         icon: leadingIcon,

lib/src/components/screen_header_bar/screen_header_bar.dart

@@ -27,7 +27,7 @@ class ZetaScreenHeaderBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ZetaAppBar(
+    return ZetaTopAppBar(
       leading: IconButton(
         onPressed: () async => Navigator.maybePop(context),
         icon: Icon(rounded ? ZetaIcons.chevron_left_round : ZetaIcons.chevron_left_sharp),

lib/src/components/app_bar/app_bar.dart → lib/src/components/top_app_bar/top_app_bar.dart

@@ -3,17 +3,17 @@ import 'package:flutter/material.dart';
 import '../../../zeta_flutter.dart';
 
 /// Zeta app bar.
-class ZetaAppBar extends StatefulWidget implements PreferredSizeWidget {
+class ZetaTopAppBar extends StatefulWidget implements PreferredSizeWidget {
   /// Creates a Zeta app bar.
-  const ZetaAppBar({
+  const ZetaTopAppBar({
     this.actions,
     this.automaticallyImplyLeading = true,
     this.searchController,
     this.leading,
     this.title,
     this.titleSpacing,
     this.titleTextStyle,
-    this.type = ZetaAppBarType.defaultAppBar,
+    this.type = ZetaTopAppBarType.defaultAppBar,
     this.onSearch,
     this.searchHintText = 'Search',
     this.onSearchMicrophoneIconPressed,
@@ -51,10 +51,10 @@ class ZetaAppBar extends StatefulWidget implements PreferredSizeWidget {
   final TextStyle? titleTextStyle;
 
   /// Defines the styles of the app bar.
-  final ZetaAppBarType type;
+  final ZetaTopAppBarType type;
 
   @override
-  State<ZetaAppBar> createState() => _ZetaAppBarState();
+  State<ZetaTopAppBar> createState() => _ZetaTopAppBarState();
 
   @override
   Size get preferredSize => const Size.fromHeight(kToolbarHeight);
@@ -84,14 +84,14 @@ class ZetaAppBar extends StatefulWidget implements PreferredSizeWidget {
         ),
       )
       ..add(StringProperty('searchHintText', searchHintText))
-      ..add(EnumProperty<ZetaAppBarType>('type', type))
-      ..add(EnumProperty<ZetaAppBarType>('type', type))
+      ..add(EnumProperty<ZetaTopAppBarType>('type', type))
+      ..add(EnumProperty<ZetaTopAppBarType>('type', type))
       ..add(DoubleProperty('titleSpacing', titleSpacing))
       ..add(DiagnosticsProperty<TextStyle?>('titleTextStyle', titleTextStyle));
   }
 }
 
-class _ZetaAppBarState extends State<ZetaAppBar> {
+class _ZetaTopAppBarState extends State<ZetaTopAppBar> {
   bool _isSearchEnabled = false;
 
   @override
@@ -114,7 +114,7 @@ class _ZetaAppBarState extends State<ZetaAppBar> {
   }
 
   Widget? _getTitle() {
-    return widget.type != ZetaAppBarType.extendedTitle
+    return widget.type != ZetaTopAppBarType.extendedTitle
         ? Padding(
             padding: EdgeInsets.symmetric(horizontal: widget.titleSpacing ?? ZetaSpacing.b),
             child: widget.title,
@@ -140,7 +140,7 @@ class _ZetaAppBarState extends State<ZetaAppBar> {
           leadingWidth: ZetaSpacing.x10,
           leading: widget.leading,
           automaticallyImplyLeading: widget.automaticallyImplyLeading,
-          centerTitle: widget.type == ZetaAppBarType.centeredTitle,
+          centerTitle: widget.type == ZetaTopAppBarType.centeredTitle,
           titleSpacing: 0,
           titleTextStyle: widget.titleTextStyle == null
               ? ZetaTextStyles.bodyLarge.copyWith(
@@ -192,7 +192,7 @@ class _ZetaAppBarState extends State<ZetaAppBar> {
                   ),
                 ]
               : widget.actions,
-          flexibleSpace: widget.type == ZetaAppBarType.extendedTitle
+          flexibleSpace: widget.type == ZetaTopAppBarType.extendedTitle
               ? Padding(
                   padding: EdgeInsets.only(
                     top: widget.preferredSize.height,
@@ -214,7 +214,7 @@ class _ZetaAppBarState extends State<ZetaAppBar> {
 }
 
 /// Defines the style of the app bar.
-enum ZetaAppBarType {
+enum ZetaTopAppBarType {
   /// Title positioned on the left side.
   defaultAppBar,
 
@@ -238,7 +238,7 @@ class _SearchField extends StatefulWidget {
   final Widget? child;
   final String hintText;
   final AppBarSearchController? searchController;
-  final ZetaAppBarType type;
+  final ZetaTopAppBarType type;
 
   @override
   State<_SearchField> createState() => _SearchFieldState();
@@ -260,7 +260,7 @@ class _SearchField extends StatefulWidget {
           searchController,
         ),
       )
-      ..add(EnumProperty<ZetaAppBarType>('type', type));
+      ..add(EnumProperty<ZetaTopAppBarType>('type', type));
   }
 }
 
@@ -358,7 +358,7 @@ class _SearchFieldState extends State<_SearchField> with SingleTickerProviderSta
       children: [
         Row(
           mainAxisAlignment:
-              widget.type == ZetaAppBarType.centeredTitle ? MainAxisAlignment.center : MainAxisAlignment.start,
+              widget.type == ZetaTopAppBarType.centeredTitle ? MainAxisAlignment.center : MainAxisAlignment.start,
           children: [
             widget.child ?? const SizedBox(),
           ],

lib/zeta_flutter.dart

@@ -3,7 +3,6 @@ library zeta_flutter;
 
 export 'src/assets/icons.dart';
 export 'src/components/accordion/accordion.dart';
-export 'src/components/app_bar/app_bar.dart';
 export 'src/components/avatars/avatar.dart';
 export 'src/components/badges/badge.dart';
 export 'src/components/badges/indicator.dart';
@@ -51,6 +50,7 @@ export 'src/components/switch/zeta_switch.dart';
 export 'src/components/tabs/tab.dart';
 export 'src/components/tabs/tab_bar.dart';
 export 'src/components/tooltip/tooltip.dart';
+export 'src/components/top_app_bar/top_app_bar.dart';
 export 'src/theme/color_extensions.dart';
 export 'src/theme/color_scheme.dart';
 export 'src/theme/color_swatch.dart';