From c1ce121ea16369df82b2f50d3a2e5059e2fc820d Mon Sep 17 00:00:00 2001
From: Luke <lwalton@zebra.com>
Date: Mon, 18 Mar 2024 12:47:15 +0000
Subject: [PATCH 01/17] chore: update contributing

---
 CONTRIBUTING    | 27 -------------------------
 CONTRIBUTING.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 27 deletions(-)
 delete mode 100644 CONTRIBUTING
 create mode 100644 CONTRIBUTING.md

diff --git a/CONTRIBUTING b/CONTRIBUTING
deleted file mode 100644
index 2ccbf54b..00000000
--- a/CONTRIBUTING
+++ /dev/null
@@ -1,27 +0,0 @@
-# Getting Involved
-
-Thank you for your interest in this project. We'd love to see your contributions. There are just few small guidelines you need to follow.
-Please note we have a code of conduct, please follow it in all your interactions with the project.
-
-## Opening an issue
-
-If you've noticed a bug or you have a suggestion for a new feature, please go ahead and open an issue in this project. Please do include as much information as possible.
-
-Please file issues before doing substantial work; this will ensure that others don't duplicate the work and that there's a chance to discuss any design issues.
-
-## Making a code change
-
-We're always open to pull requests, but these should be small and clearly described so that we can understand what you're trying to do.
-
-When you're ready to start coding, fork the needed repository to your own GitHub account and make your changes in a new branch. Once you're happy, open a pull request and explain what the change is and why you think we should include it in our project.
-
-## Code reviews
-
-All submissions, including submissions by project members, require review. We use GitHub pull requests (PRs) for this purpose. Consult [GitHub Help](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests) for more information on using pull requests.
-
-Before a PR can be reviewed, ensure you have done the following, and fixed any issues that may arise:
-
-- Ensure branch is up to date `git rebase main`
-- Check formatting: `flutter format .`
-- Run static analyses: `flutter analyze`
-- Run unit-tests: `flutter test`
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 00000000..4b53985d
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,53 @@
+# Getting Involved
+
+Thank you for your interest in this project. We'd love to see your contributions. There are just few small guidelines you need to follow.
+Please note we have a code of conduct, please follow it in all your interactions with the project.
+
+## Opening an issue
+
+If you've noticed a bug or you have a suggestion for a new feature, please go ahead and open an issue in this project. Please do include as much information as possible.
+
+Please file issues before doing substantial work; this will ensure that others don't duplicate the work and that there's a chance to discuss any design issues.
+
+## Making a code change
+
+We're always open to pull requests, but these should be small and clearly described so that we can understand what you're trying to do.
+
+When you're ready to start coding, fork the needed repository to your own GitHub account and make your changes in a new branch. Once you're happy, open a pull request and explain what the change is and why you think we should include it in our project.
+
+If the change is a bug fix, try to create a test that aligns with the bug.
+
+### Creating a new component
+
+We want the designs to be the source of truth for this repository, so new components will only be accepted if they are with the design files.
+
+New components should use all tokens matching the design, and should not use hardcoded values for color, spacing, or radius. This ensures that changes made to these fundamental tokens are reflected throughout the library.
+
+All components should have inline [dartdoc](https://dart.dev/tools/dart-doc) documentation on public functions and variables. This is enforced by the lint rules.
+
+To demonstrate a component, we need to create 2 examples: firstly in the zeta_flutter example app and secondly in widgetbook.
+
+Example app should show basic examples to compare against the designs and is typically used by developers whilst building out components.
+
+The widgetbook is used by the wider team to review components. We should attempt to show the full functionality of a component in a single Widgetbook instance. We have some helper functions for building knobs for icons and rounded bool in [utils.dart](./example/widgetbook/utils/utils.dart).
+For more information on widgetbook, [read the docs](https://docs.widgetbook.io/).
+
+We should also create a test for each widget created.
+
+## Code reviews
+
+All submissions, including submissions by project members, require review. We use GitHub pull requests (PRs) for this purpose. Consult [GitHub Help](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests) for more information on using pull requests.
+
+Before a PR can be reviewed, ensure you have done the following, and fixed any issues that may arise:
+
+- Ensure branch is up to date `git rebase main`
+- Check formatting: `flutter format .`
+- Run static analyses: `flutter analyze`
+- Run unit-tests: `flutter test`
+
+All PRs should be titled according to [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/), as the branch will be squashed, so the PR title will become the commit message.
+Examples:
+
+- `feat(X):` for new features
+- `fix(x):` for bug fixes
+- `chore(x):` for admin / chores.

From 20d3c68721890617cefab10605a3a0a7179986fd Mon Sep 17 00:00:00 2001
From: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com>
Date: Tue, 19 Mar 2024 16:33:59 +0000
Subject: [PATCH 02/17] fix: Fix button group immutability (#1)

* Fix errors

* fix copywith function

* [automated commit] lint format and import sort

---------

Co-authored-by: Osman <AO3856@zebra.com>
Co-authored-by: github-actions <github-actions@github.com>
---
 lib/src/components/buttons/button_group.dart | 133 ++++++++++++++-----
 1 file changed, 98 insertions(+), 35 deletions(-)

diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart
index 52b8ea20..729c3a50 100644
--- a/lib/src/components/buttons/button_group.dart
+++ b/lib/src/components/buttons/button_group.dart
@@ -36,18 +36,21 @@ class ZetaButtonGroup extends StatelessWidget {
 
   /// Returns [ZetaGroupButton]s with there appropriate styling.
   List<ZetaGroupButton> getButtons() {
-    for (final element in buttons) {
-      element
-        .._isInitial = element._isFinal = false
-        .._isLarge = isLarge
-        .._rounded = rounded
-        .._isInverse = isInverse;
+    final List<ZetaGroupButton> mappedButtons = [];
+
+    for (final (index, button) in buttons.indexed) {
+      mappedButtons.add(
+        button.copyWith(
+          large: isLarge,
+          inverse: isInverse,
+          round: rounded,
+          fin: index == buttons.length - 1,
+          initial: index == 0,
+        ),
+      );
     }
 
-    buttons.first._isInitial = true;
-    buttons.last._isFinal = true;
-
-    return buttons;
+    return mappedButtons;
   }
 
   @override
@@ -63,34 +66,59 @@ class ZetaButtonGroup extends StatelessWidget {
 // TODO(UX-854): Create country variant.
 
 /// Group Button item
-// ignore: must_be_immutable
 class ZetaGroupButton extends StatefulWidget {
-  /// Constructs [ZetaGroupButton]
-  ZetaGroupButton({
+
+  /// Public Constructor for [ZetaGroupButton]
+  const ZetaGroupButton({
     super.key,
     this.label,
     this.icon,
     this.onPressed,
     this.dropdown,
+  })  : isFinal = false,
+        isInitial = false,
+        isInverse = false,
+        isLarge = true,
+        rounded = true;
+  /// Private constructor
+  const ZetaGroupButton._({
+    super.key,
+    this.label,
+    this.icon,
+    this.onPressed,
+    this.dropdown,
+    required this.isFinal,
+    required this.isInitial,
+    required this.isInverse,
+    required this.isLarge,
+    required this.rounded,
   });
 
   /// Constructs dropdown group button
-  ZetaGroupButton.dropdown({
+  const ZetaGroupButton.dropdown({
     super.key,
     required this.onPressed,
     required this.dropdown,
     this.icon,
     this.label,
-  });
+  })  : isFinal = false,
+        isInitial = false,
+        isInverse = false,
+        isLarge = true,
+        rounded = true;
 
   ///Constructs group button with icon
-  ZetaGroupButton.icon({
+  const ZetaGroupButton.icon({
     super.key,
     required this.icon,
     this.dropdown,
     this.onPressed,
     this.label,
-  });
+  })  : isFinal = false,
+        isInitial = false,
+        isInverse = false,
+        isLarge = true,
+        rounded = true;
 
   /// Label for [ZetaGroupButton].
   final String? label;
@@ -105,29 +133,43 @@ class ZetaGroupButton extends StatefulWidget {
   final Widget? dropdown;
 
   ///If [ZetaGroupButton] is large.
-  bool _isLarge = false;
+  final bool isLarge;
 
   ///If [ZetaGroupButton] is rounded.
-  bool _rounded = false;
+  final bool rounded;
 
   /// If [ZetaGroupButton] is the first button in its list.
-  bool _isInitial = false;
+  final bool isInitial;
 
   /// If [ZetaGroupButton] is the final button in its list.
-  bool _isFinal = false;
+  final bool isFinal;
 
-  bool _isInverse = false;
+  /// If [ZetaGroupButton] is inverse.
+
+  final bool isInverse;
 
   @override
   State<ZetaGroupButton> createState() => _ZetaGroupButtonState();
 
   /// Returns copy of [ZetaGroupButton] with fields.
-  ZetaGroupButton copyWith({bool? isFinal, bool? isInitial}) {
-    return ZetaGroupButton(
+  ZetaGroupButton copyWith({
+    bool? fin,
+    bool? initial,
+    bool? large,
+    bool? round,
+    bool? inverse,
+  }) {
+    return ZetaGroupButton._(
       key: key,
       label: label,
       icon: icon,
       onPressed: onPressed,
+      dropdown: dropdown,
+      isFinal: fin ?? isFinal,
+      isInitial: initial ?? isInitial,
+      isLarge: large ?? isLarge,
+      rounded: round ?? rounded,
+      isInverse: inverse ?? isInverse,
     );
   }
 
@@ -137,7 +179,12 @@ class ZetaGroupButton extends StatefulWidget {
     properties
       ..add(StringProperty('Label', label))
       ..add(DiagnosticsProperty<IconData?>('icon', icon))
-      ..add(ObjectFlagProperty<VoidCallback?>.has('onPressed', onPressed));
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onPressed', onPressed))
+      ..add(DiagnosticsProperty<bool>('isInitial', isInitial))
+      ..add(DiagnosticsProperty<bool>('isLarge', isLarge))
+      ..add(DiagnosticsProperty<bool>('rounded', rounded))
+      ..add(DiagnosticsProperty<bool>('isFinal', isFinal))
+      ..add(DiagnosticsProperty<bool>('isInverse', isInverse));
   }
 }
 
@@ -156,11 +203,19 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
     });
   }
 
+  @override
+  void didUpdateWidget(ZetaGroupButton oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.onPressed != widget.onPressed) {
+      setState(() {});
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final colors = Zeta.of(context).colors;
 
-    final borderType = widget._rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp;
+    final borderType = widget.rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp;
 
     final BorderSide borderSide = _getBorderSide(controller.value, colors, false);
 
@@ -172,7 +227,7 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
           bottom: borderSide,
           right: controller.value.contains(MaterialState.focused)
               ? BorderSide(color: colors.blue.shade50, width: 2)
-              : (widget._isFinal)
+              : (widget.isFinal)
                   ? borderSide
                   : BorderSide.none,
         ),
@@ -190,7 +245,10 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
               if (widget.icon != null) Icon(widget.icon),
               Text(widget.label!),
               if (widget.dropdown != null) // TODO(UX-1006): Dropdown
-                Icon(widget._rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp, size: 20),
+                Icon(
+                  widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp,
+                  size: 20,
+                ),
             ],
           ).paddingAll(_padding),
         ),
@@ -198,7 +256,7 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
     );
   }
 
-  double get _padding => widget._isLarge ? ZetaSpacing.x4 : ZetaSpacing.x3;
+  double get _padding => widget.isLarge ? ZetaSpacing.x4 : ZetaSpacing.x3;
 
   BorderSide _getBorderSide(
     Set<MaterialState> states,
@@ -208,7 +266,7 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
     if (states.contains(MaterialState.focused)) {
       return BorderSide(color: colors.blue.shade50, width: ZetaSpacing.x0_5);
     }
-    if (widget._isInverse) return BorderSide(color: colors.black);
+    if (widget.isInverse) return BorderSide(color: colors.black);
     if (states.contains(MaterialState.disabled)) {
       return BorderSide(color: colors.cool.shade40);
     }
@@ -218,13 +276,13 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
   }
 
   BorderRadius _getRadius(ZetaWidgetBorder borderType) {
-    if (widget._isInitial) {
+    if (widget.isInitial) {
       return borderType.radius.copyWith(
         topRight: Radius.zero,
         bottomRight: Radius.zero,
       );
     }
-    if (widget._isFinal) {
+    if (widget.isFinal) {
       return borderType.radius.copyWith(
         topLeft: Radius.zero,
         bottomLeft: Radius.zero,
@@ -241,7 +299,7 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
         ),
       ),
       backgroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
-        if (widget._isInverse) return colors.cool.shade100;
+        if (widget.isInverse) return colors.cool.shade100;
 
         if (states.contains(MaterialState.disabled)) {
           return colors.surfaceDisabled;
@@ -258,7 +316,7 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
         if (states.contains(MaterialState.disabled)) {
           return colors.textDisabled;
         }
-        if (widget._isInverse) return colors.cool.shade100.onColor;
+        if (widget.isInverse) return colors.cool.shade100.onColor;
         return colors.textDefault;
       }),
       elevation: const MaterialStatePropertyAll(0),
@@ -269,6 +327,11 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(DiagnosticsProperty<MaterialStatesController>('controller', controller));
+    properties.add(
+      DiagnosticsProperty<MaterialStatesController>(
+        'controller',
+        controller,
+      ),
+    );
   }
 }

From 985576b8d8131d6cceccc164ab3111edc3a1796e Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Tue, 19 Mar 2024 16:35:41 +0000
Subject: [PATCH 03/17] [automated commit] lint format and import sort

---
 lib/src/components/buttons/button_group.dart | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart
index 729c3a50..4a71ba17 100644
--- a/lib/src/components/buttons/button_group.dart
+++ b/lib/src/components/buttons/button_group.dart
@@ -67,7 +67,6 @@ class ZetaButtonGroup extends StatelessWidget {
 
 /// Group Button item
 class ZetaGroupButton extends StatefulWidget {
-
   /// Public Constructor for [ZetaGroupButton]
   const ZetaGroupButton({
     super.key,
@@ -80,6 +79,7 @@ class ZetaGroupButton extends StatefulWidget {
         isInverse = false,
         isLarge = true,
         rounded = true;
+
   /// Private constructor
   const ZetaGroupButton._({
     super.key,

From 98abb405c86732cbf4ced47a2de39fb7bd71fef4 Mon Sep 17 00:00:00 2001
From: Luke Walton <thelukewalton@users.noreply.github.com>
Date: Wed, 20 Mar 2024 09:45:35 +0000
Subject: [PATCH 04/17] update on-main to push to firebase (#3)

---
 .github/workflows/on-main.yml      | 19 +++++++++++++++++++
 .github/workflows/pull-request.yml |  3 ---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/on-main.yml b/.github/workflows/on-main.yml
index 615b41fb..9c8f5763 100644
--- a/.github/workflows/on-main.yml
+++ b/.github/workflows/on-main.yml
@@ -45,3 +45,22 @@ jobs:
           git add -A
           git commit -m '[automated commit] lint format and import sort'
           git push -f
+  deploy-qa-demo:
+    name: Deploy preview version of the storybook on firebase
+    needs: code-quality
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: subosito/flutter-action@v2
+      - name: Setup flutter
+        run: flutter pub get
+      - name: Build example app
+        run: |
+          cd example
+          flutter build web -t widgetbook/main.dart -o ../build --no-tree-shake-icons
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZETA_DS }}"
+          projectId: zeta-ds
+          channelId: "qa"
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 31513970..5c28f0c6 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -87,9 +87,6 @@ jobs:
         with:
           ref: ${{ github.head_ref }}
       - uses: subosito/flutter-action@v2
-        with:
-          flutter-version: "3.19.x"
-          channel: "stable"
       - name: Setup flutter
         run: flutter pub get
       - name: Build example app

From e63476adf016d60f4f2bd4eab1b80bbf21f4d8f3 Mon Sep 17 00:00:00 2001
From: Luke Walton <thelukewalton@users.noreply.github.com>
Date: Wed, 20 Mar 2024 10:44:53 +0000
Subject: [PATCH 05/17] ci: move firebase to flutter main host for qa (#4)

---
 .firebaserc                        | 9 +++++++++
 .github/workflows/on-main.yml      | 3 +--
 .github/workflows/pull-request.yml | 2 --
 firebase.json                      | 1 +
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/.firebaserc b/.firebaserc
index 91581093..6ff5098d 100644
--- a/.firebaserc
+++ b/.firebaserc
@@ -1,5 +1,14 @@
 {
   "projects": {
     "default": "zeta-ds"
+  },
+  "targets": {
+    "zeta-ds": {
+      "hosting": {
+        "flutter": [
+          "zeta-flutter-main"
+        ]
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/.github/workflows/on-main.yml b/.github/workflows/on-main.yml
index 9c8f5763..bb3b9aa4 100644
--- a/.github/workflows/on-main.yml
+++ b/.github/workflows/on-main.yml
@@ -62,5 +62,4 @@ jobs:
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"
           firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZETA_DS }}"
-          projectId: zeta-ds
-          channelId: "qa"
+          channelId: "live"
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 5c28f0c6..dab856c5 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -97,6 +97,4 @@ jobs:
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"
           firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZETA_DS }}"
-          expires: 7d
-          projectId: zeta-ds
           channelId: "pr-${{ github.event.number }}-${{ github.event.pull_request.head.ref }}"
diff --git a/firebase.json b/firebase.json
index 4a130f50..bf8f2069 100644
--- a/firebase.json
+++ b/firebase.json
@@ -1,6 +1,7 @@
 {
     "hosting": {
         "public": "build",
+        "target": "flutter",
         "rewrites": [
             {
                 "source": "**",

From 4d618c1b31bf4af67804744d7d506c5b44296994 Mon Sep 17 00:00:00 2001
From: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com>
Date: Fri, 22 Mar 2024 09:33:17 +0000
Subject: [PATCH 06/17] feat: Add List Item (#5)

* feat: Add List Item

* [automated commit] lint format and import sort

---------

Co-authored-by: Simeon Dimitrov <simeon.dimitrov.work@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>
---
 example/lib/home.dart                         |   2 +
 .../pages/components/list_item_example.dart   | 115 ++++++++++
 example/widgetbook/main.dart                  |   2 +
 .../components/list_item_widgetbook.dart      |  45 ++++
 lib/src/components/list_item/list_item.dart   | 208 ++++++++++++++++++
 lib/zeta_flutter.dart                         |   1 +
 6 files changed, 373 insertions(+)
 create mode 100644 example/lib/pages/components/list_item_example.dart
 create mode 100644 example/widgetbook/pages/components/list_item_widgetbook.dart
 create mode 100644 lib/src/components/list_item/list_item.dart

diff --git a/example/lib/home.dart b/example/lib/home.dart
index 02538b11..85fb9327 100644
--- a/example/lib/home.dart
+++ b/example/lib/home.dart
@@ -10,6 +10,7 @@ import 'package:zeta_example/pages/components/button_example.dart';
 import 'package:zeta_example/pages/components/checkbox_example.dart';
 import 'package:zeta_example/pages/components/chip_example.dart';
 import 'package:zeta_example/pages/components/dialpad_example.dart';
+import 'package:zeta_example/pages/components/list_item_example.dart';
 import 'package:zeta_example/pages/components/navigation_bar_example.dart';
 import 'package:zeta_example/pages/theme/color_example.dart';
 import 'package:zeta_example/pages/components/password_input_example.dart';
@@ -38,6 +39,7 @@ final List<Component> components = [
   Component(ButtonExample.name, (context) => const ButtonExample()),
   Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
   Component(ChipExample.name, (context) => const ChipExample()),
+  Component(ListItemExample.name, (context) => const ListItemExample()),
   Component(NavigationBarExample.name, (context) => const NavigationBarExample()),
   Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
   Component(ProgressExample.name, (context) => const ProgressExample()),
diff --git a/example/lib/pages/components/list_item_example.dart b/example/lib/pages/components/list_item_example.dart
new file mode 100644
index 00000000..9cc60696
--- /dev/null
+++ b/example/lib/pages/components/list_item_example.dart
@@ -0,0 +1,115 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class ListItemExample extends StatefulWidget {
+  static const String name = 'ListItem';
+
+  const ListItemExample({super.key});
+
+  @override
+  State<ListItemExample> createState() => _ListItemExampleState();
+}
+
+class _ListItemExampleState extends State<ListItemExample> {
+  bool _isCheckBoxEnabled = false;
+  bool _isSelected = true;
+
+  _onDefaultListItemTap() {
+    setState(() => _isCheckBoxEnabled = !_isCheckBoxEnabled);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final zetaColors = Zeta.of(context).colors;
+
+    return ExampleScaffold(
+      name: ListItemExample.name,
+      child: Container(
+        color: zetaColors.surfaceSecondary,
+        child: SingleChildScrollView(
+          child: Column(
+            children: [
+              // List Item with descriptor
+              Padding(
+                padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                child: ZetaListItem(
+                  dense: true,
+                  leading: Container(
+                    width: 48,
+                    height: 48,
+                    decoration: BoxDecoration(borderRadius: ZetaRadius.rounded),
+                    child: Placeholder(),
+                  ),
+                  subtitle: Text("Descriptor"),
+                  title: Text("List Item"),
+                  trailing: ZetaCheckbox(
+                    value: _isCheckBoxEnabled,
+                    onChanged: (_) => _onDefaultListItemTap(),
+                  ),
+                  onTap: _onDefaultListItemTap,
+                ),
+              ),
+
+              // Enabled
+              Padding(
+                padding: const EdgeInsets.only(top: ZetaSpacing.l),
+                child: Text(
+                  "Enabled",
+                  style: ZetaTextStyles.titleLarge,
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: ZetaSpacing.m),
+                child: ZetaListItem(title: Text("List Item")),
+              ),
+
+              // Selected
+              Padding(
+                padding: const EdgeInsets.only(top: ZetaSpacing.l),
+                child: Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: Text(
+                    "Selected",
+                    style: ZetaTextStyles.titleLarge,
+                  ),
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: ZetaSpacing.m),
+                child: ZetaListItem(
+                  title: Text("List Item"),
+                  selected: _isSelected,
+                  trailing: _isSelected
+                      ? Icon(
+                          ZetaIcons.check_mark_sharp,
+                          color: zetaColors.primary,
+                        )
+                      : null,
+                  onTap: () => setState(() => _isSelected = !_isSelected),
+                ),
+              ),
+
+              // Disabled
+              Padding(
+                padding: const EdgeInsets.only(top: ZetaSpacing.l),
+                child: Text(
+                  "Disabled",
+                  style: ZetaTextStyles.titleLarge,
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: ZetaSpacing.m),
+                child: ZetaListItem(
+                  title: Text("List Item"),
+                  enabled: false,
+                  onTap: () {},
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index c6d2620d..cee55d3b 100644
--- a/example/widgetbook/main.dart
+++ b/example/widgetbook/main.dart
@@ -14,6 +14,7 @@ import 'pages/components/checkbox_widgetbook.dart';
 import 'pages/components/chip_widgetbook.dart';
 import 'pages/components/dial_pad_widgetbook.dart';
 import 'pages/components/in_page_banner_widgetbook.dart';
+import 'pages/components/list_item_widgetbook.dart';
 import 'pages/components/navigation_bar_widgetbook.dart';
 import 'pages/components/password_input_widgetbook.dart';
 import 'pages/components/progress_widgetbook.dart';
@@ -76,6 +77,7 @@ class HotReload extends StatelessWidget {
             WidgetbookUseCase(name: 'Password Input', builder: (context) => passwordInputUseCase(context)),
             WidgetbookUseCase(name: 'Content', builder: (context) => bottomSheetContentUseCase(context)),
             WidgetbookUseCase(name: 'Dial Pad', builder: (context) => dialPadUseCase(context)),
+            WidgetbookUseCase(name: 'List Item', builder: (context) => listItemUseCase(context)),
             WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context)),
             WidgetbookComponent(
               name: 'Progress',
diff --git a/example/widgetbook/pages/components/list_item_widgetbook.dart b/example/widgetbook/pages/components/list_item_widgetbook.dart
new file mode 100644
index 00000000..e545cf7c
--- /dev/null
+++ b/example/widgetbook/pages/components/list_item_widgetbook.dart
@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget listItemUseCase(BuildContext context) {
+  return WidgetbookTestWidget(
+    widget: StatefulBuilder(
+      builder: (context, setState) {
+        final subtitle = context.knobs.stringOrNull(label: 'Descriptor', initialValue: null);
+
+        final trailing = context.knobs.boolean(label: 'Trailing', initialValue: false)
+            ? Checkbox(value: false, onChanged: (_) {})
+            : null;
+
+        final leading = context.knobs.boolean(label: 'Leading', initialValue: false)
+            ? Container(
+                width: 48,
+                height: 48,
+                decoration: BoxDecoration(borderRadius: ZetaRadius.rounded),
+                child: Placeholder(),
+              )
+            : null;
+
+        return ZetaListItem(
+          dense: context.knobs.boolean(label: 'Dense', initialValue: false),
+          enabled: context.knobs.boolean(label: 'Enabled', initialValue: true),
+          enabledDivider: context.knobs.boolean(
+            label: 'Enabled Divider',
+            initialValue: true,
+          ),
+          selected: context.knobs.boolean(label: 'Selected', initialValue: true),
+          leading: leading,
+          title: Text(
+            context.knobs.string(label: 'Title', initialValue: 'List Item'),
+          ),
+          subtitle: subtitle != null ? Text(subtitle) : null,
+          trailing: trailing,
+          onTap: () {},
+        );
+      },
+    ),
+  );
+}
diff --git a/lib/src/components/list_item/list_item.dart b/lib/src/components/list_item/list_item.dart
new file mode 100644
index 00000000..80cbdb1a
--- /dev/null
+++ b/lib/src/components/list_item/list_item.dart
@@ -0,0 +1,208 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import '../../../zeta_flutter.dart';
+
+/// A single row that typically contains some text as well as a leading or trailing widgets.
+class ZetaListItem extends StatelessWidget {
+  /// Creates a [ZetaListItem].
+  const ZetaListItem({
+    required this.title,
+    this.dense = false,
+    this.enabled = true,
+    this.enabledDivider = true,
+    this.leading,
+    this.onTap,
+    this.selected = false,
+    this.subtitle,
+    this.trailing,
+    super.key,
+  });
+
+  /// Dense list items have less space between widgets and use smaller [TextStyle]
+  final bool dense;
+
+  /// Whether this [ZetaListItem] is interactive.
+  /// If false the [onTap] callback is inoperative.
+  final bool enabled;
+
+  /// Whether to apply divider. Normally at the bottom of the [ZetaListItem].
+  final bool enabledDivider;
+
+  /// A Widget to display before the title;
+  final Widget? leading;
+
+  /// Called when user taps on the [ZetaListItem].
+  final VoidCallback? onTap;
+
+  /// Applies selected styles. If selected is true trailing mu
+  final bool selected;
+
+  /// Additional content displayed over the title.
+  /// Typically a [Text] widget.
+  final Widget? subtitle;
+
+  /// The primary content of the [ZetaListItem].
+  final Widget title;
+
+  /// A widget to display after the title.
+  final Widget? trailing;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty<bool>('dense', dense))
+      ..add(DiagnosticsProperty<bool>('enabled', enabled))
+      ..add(DiagnosticsProperty<bool>('enabledDivider', enabledDivider))
+      ..add(DiagnosticsProperty<Widget>('leading', leading))
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onTap', onTap))
+      ..add(DiagnosticsProperty<bool>('selected', selected))
+      ..add(DiagnosticsProperty<Widget>('subtitle', subtitle))
+      ..add(DiagnosticsProperty<Widget>('title', title))
+      ..add(DiagnosticsProperty<Widget>('trailing', trailing));
+  }
+
+  TextStyle get _titleTextStyle => dense ? ZetaTextStyles.titleSmall : ZetaTextStyles.titleMedium;
+
+  @override
+  Widget build(BuildContext context) {
+    final zetaColors = Zeta.of(context).colors;
+
+    return _ListItemContainer(
+      enabled: enabled,
+      selected: selected,
+      onTap: onTap,
+      dense: dense,
+      enabledDivider: enabledDivider,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Flexible(
+            child: Row(
+              children: [
+                if (leading != null)
+                  Padding(
+                    padding: EdgeInsets.only(
+                      right: dense ? ZetaSpacing.x2 : ZetaSpacing.x4,
+                    ),
+                    child: leading,
+                  ),
+                Flexible(
+                  child: Padding(
+                    padding: EdgeInsets.symmetric(
+                      vertical: dense ? 0.0 : ZetaSpacing.x4,
+                    ),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        if (subtitle != null)
+                          DefaultTextStyle(
+                            style: ZetaTextStyles.titleSmall.copyWith(
+                              color: zetaColors.textSubtle,
+                            ),
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                            child: subtitle ?? const SizedBox(),
+                          ),
+                        DefaultTextStyle(
+                          style: _titleTextStyle.copyWith(
+                            color: enabled ? zetaColors.textDefault : zetaColors.textSubtle,
+                          ),
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                          child: title,
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+          if (trailing != null)
+            Padding(
+              padding: EdgeInsets.only(
+                left: dense ? ZetaSpacing.x2 : ZetaSpacing.x4,
+              ),
+              child: trailing,
+            ),
+          if (trailing == null && selected && enabled)
+            Padding(
+              padding: EdgeInsets.only(
+                left: dense ? ZetaSpacing.x2 : ZetaSpacing.x4,
+              ),
+              child: Icon(
+                ZetaIcons.check_mark_round,
+                color: zetaColors.blue.shade60,
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _ListItemContainer extends StatelessWidget {
+  const _ListItemContainer({
+    required this.child,
+    required this.dense,
+    required this.enabled,
+    required this.enabledDivider,
+    required this.onTap,
+    required this.selected,
+  });
+
+  final Widget child;
+  final bool dense;
+  final bool enabled;
+  final bool enabledDivider;
+  final VoidCallback? onTap;
+  final bool selected;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty<Widget>('child', child))
+      ..add(DiagnosticsProperty<bool>('enabled', enabled))
+      ..add(DiagnosticsProperty<bool>('selected', selected))
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onTap', onTap))
+      ..add(DiagnosticsProperty<bool>('dense', dense))
+      ..add(DiagnosticsProperty<bool>('enabledDivider', enabledDivider));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final zetaColors = Zeta.of(context).colors;
+
+    return AbsorbPointer(
+      absorbing: !enabled,
+      child: Material(
+        color: enabled
+            ? selected
+                ? zetaColors.blue.shade10
+                : zetaColors.white
+            : zetaColors.surfaceDisabled,
+        child: InkWell(
+          onTap: enabled ? onTap : null,
+          child: Container(
+            padding: EdgeInsets.symmetric(
+              horizontal: dense ? ZetaSpacing.x4 : ZetaSpacing.x8,
+              vertical: dense ? ZetaSpacing.x2 : ZetaSpacing.x4,
+            ),
+            decoration: BoxDecoration(
+              border: enabled && enabledDivider
+                  ? Border(
+                      bottom: BorderSide(
+                        color: selected ? zetaColors.blue.shade40 : zetaColors.borderDefault,
+                      ),
+                    )
+                  : null,
+            ),
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart
index 75d941d8..964e8d14 100644
--- a/lib/zeta_flutter.dart
+++ b/lib/zeta_flutter.dart
@@ -23,6 +23,7 @@ export 'src/components/buttons/icon_button.dart';
 export 'src/components/checkbox/checkbox.dart';
 export 'src/components/chips/chip.dart';
 export 'src/components/dial_pad/dial_pad.dart';
+export 'src/components/list_item/list_item.dart';
 export 'src/components/navigation bar/navigation_bar.dart';
 export 'src/components/password/password_input.dart';
 export 'src/components/progress/progress_bar.dart';

From 2a94e04597e540f074b418377b09b912e294e7d0 Mon Sep 17 00:00:00 2001
From: sd-athlon <163880004+sd-athlon@users.noreply.github.com>
Date: Tue, 26 Mar 2024 13:45:55 +0200
Subject: [PATCH 07/17] fix(main): ListItem disabled color (#8)

* fix(main): ListItem disabled color

* [automated commit] lint format and import sort

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 lib/src/components/list_item/list_item.dart | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/src/components/list_item/list_item.dart b/lib/src/components/list_item/list_item.dart
index 80cbdb1a..f73ebac6 100644
--- a/lib/src/components/list_item/list_item.dart
+++ b/lib/src/components/list_item/list_item.dart
@@ -98,7 +98,7 @@ class ZetaListItem extends StatelessWidget {
                         if (subtitle != null)
                           DefaultTextStyle(
                             style: ZetaTextStyles.titleSmall.copyWith(
-                              color: zetaColors.textSubtle,
+                              color: enabled ? zetaColors.textSubtle : zetaColors.textDisabled,
                             ),
                             maxLines: 1,
                             overflow: TextOverflow.ellipsis,
@@ -106,7 +106,7 @@ class ZetaListItem extends StatelessWidget {
                           ),
                         DefaultTextStyle(
                           style: _titleTextStyle.copyWith(
-                            color: enabled ? zetaColors.textDefault : zetaColors.textSubtle,
+                            color: enabled ? zetaColors.textDefault : zetaColors.textDisabled,
                           ),
                           maxLines: 1,
                           overflow: TextOverflow.ellipsis,

From 597a56820715af1db00907a7926202facd68a5af Mon Sep 17 00:00:00 2001
From: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com>
Date: Tue, 26 Mar 2024 13:27:23 +0000
Subject: [PATCH 08/17] feat : Dropdown menu (#7)

* Create dropdown

* Add sizes

* create stoyrybook and add size

* Fix errrs and respond to comments

* Fix issues

* [automated commit] lint format and import sort

* Alter isLarge

* Fix spacing

* [automated commit] lint format and import sort

* Alter leading styles

* [automated commit] lint format and import sort

---------

Co-authored-by: Osman <AO3856@zebra.com>
Co-authored-by: github-actions <github-actions@github.com>
---
 example/lib/home.dart                         |   2 +
 .../pages/components/dropdown_example.dart    |  56 +++
 example/widgetbook/main.dart                  |   2 +
 .../pages/components/dropdown_widgetbook.dart |  70 +++
 .../components/breadcrumbs/breadcrumbs.dart   |  47 +-
 lib/src/components/dropdown/dropdown.dart     | 444 ++++++++++++++++++
 lib/zeta_flutter.dart                         |   1 +
 7 files changed, 597 insertions(+), 25 deletions(-)
 create mode 100644 example/lib/pages/components/dropdown_example.dart
 create mode 100644 example/widgetbook/pages/components/dropdown_widgetbook.dart
 create mode 100644 lib/src/components/dropdown/dropdown.dart

diff --git a/example/lib/home.dart b/example/lib/home.dart
index 85fb9327..db27ea5d 100644
--- a/example/lib/home.dart
+++ b/example/lib/home.dart
@@ -10,6 +10,7 @@ import 'package:zeta_example/pages/components/button_example.dart';
 import 'package:zeta_example/pages/components/checkbox_example.dart';
 import 'package:zeta_example/pages/components/chip_example.dart';
 import 'package:zeta_example/pages/components/dialpad_example.dart';
+import 'package:zeta_example/pages/components/dropdown_example.dart';
 import 'package:zeta_example/pages/components/list_item_example.dart';
 import 'package:zeta_example/pages/components/navigation_bar_example.dart';
 import 'package:zeta_example/pages/theme/color_example.dart';
@@ -42,6 +43,7 @@ final List<Component> components = [
   Component(ListItemExample.name, (context) => const ListItemExample()),
   Component(NavigationBarExample.name, (context) => const NavigationBarExample()),
   Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
+  Component(DropdownExample.name, (context) => const DropdownExample()),
   Component(ProgressExample.name, (context) => const ProgressExample()),
   Component(DialPadExample.name, (context) => const DialPadExample()),
 ];
diff --git a/example/lib/pages/components/dropdown_example.dart b/example/lib/pages/components/dropdown_example.dart
new file mode 100644
index 00000000..0b37dcc2
--- /dev/null
+++ b/example/lib/pages/components/dropdown_example.dart
@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class DropdownExample extends StatefulWidget {
+  static const String name = "Dropdown";
+  const DropdownExample({super.key});
+
+  @override
+  State<DropdownExample> createState() => _DropdownExampleState();
+}
+
+class _DropdownExampleState extends State<DropdownExample> {
+  ZetaDropdownItem selectedItem = ZetaDropdownItem(
+    value: "Item 1",
+    leadingIcon: Icon(ZetaIcons.star_round),
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: "Dropdown",
+      child: Center(
+        child: SingleChildScrollView(
+          child: SizedBox(
+              width: 320,
+              child: Column(children: [
+                ZetaDropdown(
+                  leadingType: LeadingStyle.checkbox,
+                  onChange: (value) {
+                    setState(() {
+                      selectedItem = value;
+                    });
+                  },
+                  selectedItem: selectedItem,
+                  items: [
+                    ZetaDropdownItem(
+                      value: "Item 1",
+                      leadingIcon: Icon(ZetaIcons.star_round),
+                    ),
+                    ZetaDropdownItem(
+                      value: "Item 2",
+                      leadingIcon: Icon(ZetaIcons.star_half_round),
+                    ),
+                    ZetaDropdownItem(
+                      value: "Item 3",
+                    )
+                  ],
+                ),
+                Text('Selected item : ${selectedItem.value}')
+              ])),
+        ),
+      ),
+    );
+  }
+}
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index cee55d3b..55bc1f9e 100644
--- a/example/widgetbook/main.dart
+++ b/example/widgetbook/main.dart
@@ -13,6 +13,7 @@ import 'pages/components/button_widgetbook.dart';
 import 'pages/components/checkbox_widgetbook.dart';
 import 'pages/components/chip_widgetbook.dart';
 import 'pages/components/dial_pad_widgetbook.dart';
+import 'pages/components/dropdown_widgetbook.dart';
 import 'pages/components/in_page_banner_widgetbook.dart';
 import 'pages/components/list_item_widgetbook.dart';
 import 'pages/components/navigation_bar_widgetbook.dart';
@@ -64,6 +65,7 @@ class HotReload extends StatelessWidget {
             ),
             WidgetbookUseCase(name: 'BreadCrumbs', builder: (context) => breadCrumbsUseCase(context)),
             WidgetbookUseCase(name: 'Banners', builder: (context) => bannerUseCase(context)),
+            WidgetbookUseCase(name: "Dropdown", builder: (context) => dropdownUseCase(context)),
             WidgetbookUseCase(name: 'In Page Banners', builder: (context) => inPageBannerUseCase(context)),
             WidgetbookUseCase(name: 'Accordion', builder: (context) => accordionUseCase(context)),
             WidgetbookComponent(
diff --git a/example/widgetbook/pages/components/dropdown_widgetbook.dart b/example/widgetbook/pages/components/dropdown_widgetbook.dart
new file mode 100644
index 00000000..8cdc9191
--- /dev/null
+++ b/example/widgetbook/pages/components/dropdown_widgetbook.dart
@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget dropdownUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: Center(
+        child: DropdownExample(context),
+      ),
+    );
+
+class DropdownExample extends StatefulWidget {
+  const DropdownExample(this.c);
+  final BuildContext c;
+
+  @override
+  State<DropdownExample> createState() => _DropdownExampleState();
+}
+
+class _DropdownExampleState extends State<DropdownExample> {
+  List<ZetaDropdownItem> _children = [
+    ZetaDropdownItem(
+      value: "Item 1",
+      leadingIcon: Icon(ZetaIcons.star_round),
+    ),
+    ZetaDropdownItem(
+      value: "Item 2",
+      leadingIcon: Icon(ZetaIcons.star_half_round),
+    ),
+    ZetaDropdownItem(
+      value: "Item 3",
+    )
+  ];
+
+  late ZetaDropdownItem selectedItem = ZetaDropdownItem(
+    value: "Item 1",
+    leadingIcon: Icon(ZetaIcons.star_round),
+  );
+
+  @override
+  Widget build(BuildContext _) {
+    return SingleChildScrollView(
+      child: SizedBox(
+          width: double.infinity,
+          child: Column(children: [
+            ZetaDropdown(
+              leadingType: widget.c.knobs.list(
+                label: "Checkbox type",
+                options: [
+                  LeadingStyle.none,
+                  LeadingStyle.checkbox,
+                  LeadingStyle.radio,
+                ],
+              ),
+              onChange: (value) {
+                setState(() {
+                  selectedItem = value;
+                });
+              },
+              selectedItem: selectedItem,
+              items: _children,
+              rounded: widget.c.knobs.boolean(label: "Rounded"),
+              isMinimized: widget.c.knobs.boolean(label: "Minimized"),
+            ),
+            Text('Selected item : ${selectedItem.value}')
+          ])),
+    );
+  }
+}
diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart
index b1a79d43..51536248 100644
--- a/lib/src/components/breadcrumbs/breadcrumbs.dart
+++ b/lib/src/components/breadcrumbs/breadcrumbs.dart
@@ -184,32 +184,29 @@ class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
   @override
   Widget build(BuildContext context) {
     final colors = Zeta.of(context).colors;
-    return Material(
-      color: Colors.transparent,
-      child: InkWell(
-        statesController: controller,
-        onTap: widget.onPressed,
-        enableFeedback: false,
-        splashColor: Colors.transparent,
-        overlayColor: MaterialStateProperty.resolveWith((states) {
-          return Colors.transparent;
-        }),
-        child: Row(
-          children: [
-            if (widget.isSelected)
-              Icon(
-                widget.activeIcon ?? ZetaIcons.star_round,
-                color: getColor(controller.value, colors),
-              ),
-            const SizedBox(
-              width: ZetaSpacing.xs,
-            ),
-            Text(
-              widget.label,
-              style: TextStyle(color: getColor(controller.value, colors)),
+    return InkWell(
+      statesController: controller,
+      onTap: widget.onPressed,
+      enableFeedback: false,
+      splashColor: Colors.transparent,
+      overlayColor: MaterialStateProperty.resolveWith((states) {
+        return Colors.transparent;
+      }),
+      child: Row(
+        children: [
+          if (widget.isSelected)
+            Icon(
+              widget.activeIcon ?? ZetaIcons.star_round,
+              color: getColor(controller.value, colors),
             ),
-          ],
-        ),
+          const SizedBox(
+            width: ZetaSpacing.xs,
+          ),
+          Text(
+            widget.label,
+            style: TextStyle(color: getColor(controller.value, colors)),
+          ),
+        ],
       ),
     );
   }
diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart
new file mode 100644
index 00000000..0e761d81
--- /dev/null
+++ b/lib/src/components/dropdown/dropdown.dart
@@ -0,0 +1,444 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import '../../../zeta_flutter.dart';
+
+/// Class for [ZetaDropdown]
+class ZetaDropdown extends StatefulWidget {
+  ///Constructor of [ZetaDropdown]
+  const ZetaDropdown({
+    super.key,
+    required this.items,
+    required this.onChange,
+    required this.selectedItem,
+    this.rounded = true,
+    this.leadingType = LeadingStyle.none,
+    this.isMinimized = false,
+  });
+
+  /// Input items as list of [ZetaDropdownItem]
+  final List<ZetaDropdownItem> items;
+
+  /// Currently selected item
+  final ZetaDropdownItem selectedItem;
+
+  /// Handles changes of dropdown menu
+  final ValueSetter<ZetaDropdownItem> onChange;
+
+  /// {@macro zeta-component-rounded}
+  final bool rounded;
+
+  /// The style for the leading widget. Can be a checkbox or radio button
+  final LeadingStyle leadingType;
+
+  /// If menu is minimised.
+  final bool isMinimized;
+
+  @override
+  State<ZetaDropdown> createState() => _ZetaDropDownState();
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(EnumProperty<LeadingStyle>('leadingType', leadingType))
+      ..add(DiagnosticsProperty<bool>('rounded', rounded))
+      ..add(
+        ObjectFlagProperty<ValueSetter<ZetaDropdownItem>>.has(
+          'onChange',
+          onChange,
+        ),
+      )
+      ..add(DiagnosticsProperty<bool>('isMinimized', isMinimized));
+  }
+}
+
+class _ZetaDropDownState extends State<ZetaDropdown> {
+  final OverlayPortalController _tooltipController = OverlayPortalController();
+  final _link = LayerLink();
+  final _menuKey = GlobalKey(); // declare a global key
+
+  /// Returns if click event position is within the header.
+  bool _isInHeader(
+    Offset headerPosition,
+    Size headerSize,
+    Offset clickPosition,
+  ) {
+    return clickPosition.dx >= headerPosition.dx &&
+        clickPosition.dx <= headerPosition.dx + headerSize.width &&
+        clickPosition.dy >= headerPosition.dy &&
+        clickPosition.dy <= headerPosition.dy + headerSize.height;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: _size,
+      child: CompositedTransformTarget(
+        link: _link,
+        child: OverlayPortal(
+          controller: _tooltipController,
+          overlayChildBuilder: (BuildContext context) {
+            return CompositedTransformFollower(
+              link: _link,
+              targetAnchor: Alignment.bottomLeft, // Align overlay dropdown in its correct position
+              child: Align(
+                alignment: AlignmentDirectional.topStart,
+                child: TapRegion(
+                  onTapOutside: (event) {
+                    final headerBox = _menuKey.currentContext!.findRenderObject()! as RenderBox;
+
+                    final headerPosition = headerBox.localToGlobal(Offset.zero);
+
+                    if (!_isInHeader(
+                      headerPosition,
+                      headerBox.size,
+                      event.position,
+                    )) _tooltipController.hide();
+                  },
+                  child: ZetaDropDownMenu(
+                    items: widget.items,
+                    selected: widget.selectedItem.value,
+                    width: _size,
+                    boxType: widget.leadingType,
+                    onPress: (item) {
+                      if (item != null) {
+                        widget.onChange(item);
+                      }
+                      _tooltipController.hide();
+                    },
+                  ),
+                ),
+              ),
+            );
+          },
+          child: widget.selectedItem.copyWith(
+            round: widget.rounded,
+            focus: _tooltipController.isShowing,
+            press: onTap,
+            inputKey: _menuKey,
+          ),
+        ),
+      ),
+    );
+  }
+
+  double get _size => widget.isMinimized ? 120 : 320;
+
+  void onTap() {
+    _tooltipController.toggle();
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(
+      DiagnosticsProperty<GlobalKey<State<StatefulWidget>>>(
+        'menuKey',
+        _menuKey,
+      ),
+    );
+  }
+}
+
+/// Checkbox enum for different checkbox types
+enum LeadingStyle {
+  /// No Leading
+  none,
+
+  /// Circular checkbox
+  checkbox,
+
+  /// Square checkbox
+  radio
+}
+
+/// Class for [ZetaDropdownItem]
+class ZetaDropdownItem extends StatefulWidget {
+  ///Public constructor for [ZetaDropdownItem]
+  const ZetaDropdownItem({
+    super.key,
+    required this.value,
+    this.leadingIcon,
+  })  : rounded = true,
+        selected = false,
+        leadingType = LeadingStyle.none,
+        itemKey = null,
+        onPress = null;
+
+  const ZetaDropdownItem._({
+    super.key,
+    required this.rounded,
+    required this.selected,
+    required this.value,
+    this.leadingIcon,
+    this.onPress,
+    this.leadingType,
+    this.itemKey,
+  });
+
+  /// {@macro zeta-component-rounded}
+  final bool rounded;
+
+  /// If [ZetaDropdownItem] is selected
+  final bool selected;
+
+  /// Value of [ZetaDropdownItem]
+  final String value;
+
+  /// Leading icon for [ZetaDropdownItem]
+  final Icon? leadingIcon;
+
+  /// Handles clicking for [ZetaDropdownItem]
+  final VoidCallback? onPress;
+
+  /// If checkbox is to be shown, the type of it.
+  final LeadingStyle? leadingType;
+
+  /// Key for item
+  final GlobalKey? itemKey;
+
+  /// Returns copy of [ZetaDropdownItem] with those private variables included
+  ZetaDropdownItem copyWith({
+    bool? round,
+    bool? focus,
+    LeadingStyle? boxType,
+    VoidCallback? press,
+    GlobalKey? inputKey,
+  }) {
+    return ZetaDropdownItem._(
+      rounded: round ?? rounded,
+      selected: focus ?? selected,
+      onPress: press ?? onPress,
+      leadingType: boxType ?? leadingType,
+      itemKey: inputKey ?? itemKey,
+      value: value,
+      leadingIcon: leadingIcon,
+      key: key,
+    );
+  }
+
+  @override
+  State<ZetaDropdownItem> createState() => _ZetaDropdownMenuItemState();
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty<bool>('rounded', rounded))
+      ..add(DiagnosticsProperty<bool>('selected', selected))
+      ..add(StringProperty('value', value))
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onPress', onPress))
+      ..add(EnumProperty<LeadingStyle?>('leadingType', leadingType))
+      ..add(
+        DiagnosticsProperty<GlobalKey<State<StatefulWidget>>?>(
+          'itemKey',
+          itemKey,
+        ),
+      );
+  }
+}
+
+class _ZetaDropdownMenuItemState extends State<ZetaDropdownItem> {
+  final controller = MaterialStatesController();
+
+  @override
+  void initState() {
+    super.initState();
+    controller.addListener(() {
+      if (context.mounted && mounted && !controller.value.contains(MaterialState.disabled)) {
+        setState(() {});
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = Zeta.of(context).colors;
+
+    return DefaultTextStyle(
+      style: ZetaTextStyles.bodyMedium,
+      child: OutlinedButton(
+        key: widget.itemKey,
+        onPressed: widget.onPress,
+        style: _getStyle(colors),
+        child: Row(
+          children: [
+            const SizedBox(width: ZetaSpacing.x3),
+            _getLeadingWidget(),
+            const SizedBox(width: ZetaSpacing.x3),
+            Text(
+              widget.value,
+            ),
+          ],
+        ).paddingVertical(ZetaSpacing.x2_5),
+      ),
+    );
+  }
+
+  Widget _getLeadingWidget() {
+    switch (widget.leadingType!) {
+      case LeadingStyle.checkbox:
+        return Checkbox(
+          value: widget.selected,
+          onChanged: (val) {
+            widget.onPress!.call();
+          },
+        );
+      case LeadingStyle.radio:
+        return Radio(
+          value: widget.selected,
+          groupValue: true,
+          onChanged: (val) {
+            widget.onPress!.call();
+          },
+        );
+      case LeadingStyle.none:
+        return widget.leadingIcon ??
+            const SizedBox(
+              width: 24,
+            );
+    }
+  }
+
+  ButtonStyle _getStyle(ZetaColors colors) {
+    return ButtonStyle(
+      backgroundColor: MaterialStateProperty.resolveWith((states) {
+        if (states.contains(MaterialState.hovered)) {
+          return colors.surfaceHovered;
+        }
+
+        if (states.contains(MaterialState.pressed)) {
+          return colors.surfaceSelected;
+        }
+
+        if (states.contains(MaterialState.disabled) || widget.onPress == null) {
+          return colors.surfaceDisabled;
+        }
+        return colors.surfacePrimary;
+      }),
+      foregroundColor: MaterialStateProperty.resolveWith((states) {
+        if (states.contains(MaterialState.disabled)) {
+          return colors.textDisabled;
+        }
+        return colors.textDefault;
+      }),
+      shape: MaterialStateProperty.all(
+        RoundedRectangleBorder(
+          borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none,
+        ),
+      ),
+      side: MaterialStatePropertyAll(
+        widget.selected ? BorderSide(color: colors.primary.shade60) : BorderSide.none,
+      ),
+      padding: const MaterialStatePropertyAll(EdgeInsets.zero),
+      elevation: const MaterialStatePropertyAll(0),
+      overlayColor: const MaterialStatePropertyAll(Colors.transparent),
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(
+      DiagnosticsProperty<MaterialStatesController>(
+        'controller',
+        controller,
+      ),
+    );
+  }
+}
+
+///Class for [ZetaDropDownMenu]
+class ZetaDropDownMenu extends StatefulWidget {
+  ///Constructor for [ZetaDropDownMenu]
+  const ZetaDropDownMenu({
+    super.key,
+    required this.items,
+    required this.onPress,
+    required this.selected,
+    this.rounded = false,
+    this.width,
+    this.boxType,
+  });
+
+  /// Input items for the menu
+  final List<ZetaDropdownItem> items;
+
+  ///Handles clicking of item in menu
+  final ValueSetter<ZetaDropdownItem?> onPress;
+
+  /// If item in menu is the currently selected item
+  final String selected;
+
+  /// {@macro zeta-component-rounded}
+  final bool rounded;
+
+  /// Width for menu
+  final double? width;
+
+  /// If items have checkboxes, the type of that checkbox.
+  final LeadingStyle? boxType;
+
+  @override
+  State<ZetaDropDownMenu> createState() => _ZetaDropDownMenuState();
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(
+        ObjectFlagProperty<ValueSetter<ZetaDropdownItem?>>.has(
+          'onPress',
+          onPress,
+        ),
+      )
+      ..add(DiagnosticsProperty<bool>('rounded', rounded))
+      ..add(DoubleProperty('width', width))
+      ..add(EnumProperty<LeadingStyle?>('boxType', boxType))
+      ..add(StringProperty('selected', selected));
+  }
+}
+
+class _ZetaDropDownMenuState extends State<ZetaDropDownMenu> {
+  @override
+  Widget build(BuildContext context) {
+    final colors = Zeta.of(context).colors;
+    return Container(
+      decoration: BoxDecoration(
+        color: colors.surfacePrimary,
+        borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none,
+        boxShadow: const [
+          BoxShadow(blurRadius: 2, color: Color.fromRGBO(40, 51, 61, 0.04)),
+          BoxShadow(
+            blurRadius: 8,
+            color: Color.fromRGBO(96, 104, 112, 0.16),
+            blurStyle: BlurStyle.outer,
+            offset: Offset(0, 4),
+          ),
+        ],
+      ),
+      width: widget.width,
+      child: Builder(
+        builder: (BuildContext bcontext) {
+          return Column(
+            mainAxisSize: MainAxisSize.min,
+            children: widget.items.map((item) {
+              return Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  item.copyWith(
+                    round: widget.rounded,
+                    focus: widget.selected == item.value,
+                    boxType: widget.boxType,
+                    press: () {
+                      widget.onPress(item);
+                    },
+                  ),
+                  const SizedBox(height: ZetaSpacing.x1),
+                ],
+              );
+            }).toList(),
+          );
+        },
+      ),
+    );
+  }
+}
diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart
index 964e8d14..8d7cde31 100644
--- a/lib/zeta_flutter.dart
+++ b/lib/zeta_flutter.dart
@@ -23,6 +23,7 @@ export 'src/components/buttons/icon_button.dart';
 export 'src/components/checkbox/checkbox.dart';
 export 'src/components/chips/chip.dart';
 export 'src/components/dial_pad/dial_pad.dart';
+export 'src/components/dropdown/dropdown.dart';
 export 'src/components/list_item/list_item.dart';
 export 'src/components/navigation bar/navigation_bar.dart';
 export 'src/components/password/password_input.dart';

From e2d0ea7221ff5c69d5c703f8a94d2904f27b4d2b Mon Sep 17 00:00:00 2001
From: atanasyordanov21 <63714308+atanasyordanov21@users.noreply.github.com>
Date: Wed, 27 Mar 2024 11:36:40 +0200
Subject: [PATCH 09/17] Component ZetaSwitch (#6)

* create ZetaSwitch

* ZetaSwitch using MaterialSwitch

* widgetbook for ZetaSwitch

* remove hover; fix initState

* add showHover parameter

* add comments 'Zeta change' in material_switch.dart

* remove size parameter and factory constructors

* fix example and widgetbook
---
 example/lib/home.dart                         |    2 +
 .../lib/pages/components/switch_example.dart  |   45 +
 example/widgetbook/main.dart                  |    2 +
 .../pages/components/switch_widgetbook.dart   |   32 +
 .../components/switch/material_switch.dart    | 1144 +++++++++++++++++
 lib/src/components/switch/zeta_switch.dart    |   58 +
 lib/zeta_flutter.dart                         |    1 +
 7 files changed, 1284 insertions(+)
 create mode 100644 example/lib/pages/components/switch_example.dart
 create mode 100644 example/widgetbook/pages/components/switch_widgetbook.dart
 create mode 100644 lib/src/components/switch/material_switch.dart
 create mode 100644 lib/src/components/switch/zeta_switch.dart

diff --git a/example/lib/home.dart b/example/lib/home.dart
index db27ea5d..2df43f7c 100644
--- a/example/lib/home.dart
+++ b/example/lib/home.dart
@@ -13,6 +13,7 @@ import 'package:zeta_example/pages/components/dialpad_example.dart';
 import 'package:zeta_example/pages/components/dropdown_example.dart';
 import 'package:zeta_example/pages/components/list_item_example.dart';
 import 'package:zeta_example/pages/components/navigation_bar_example.dart';
+import 'package:zeta_example/pages/components/switch_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';
@@ -46,6 +47,7 @@ final List<Component> components = [
   Component(DropdownExample.name, (context) => const DropdownExample()),
   Component(ProgressExample.name, (context) => const ProgressExample()),
   Component(DialPadExample.name, (context) => const DialPadExample()),
+  Component(SwitchExample.name, (context) => const SwitchExample()),
 ];
 
 final List<Component> theme = [
diff --git a/example/lib/pages/components/switch_example.dart b/example/lib/pages/components/switch_example.dart
new file mode 100644
index 00000000..471e0961
--- /dev/null
+++ b/example/lib/pages/components/switch_example.dart
@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class SwitchExample extends StatefulWidget {
+  static const String name = 'Switch';
+
+  const SwitchExample({Key? key}) : super(key: key);
+
+  @override
+  State<SwitchExample> createState() => _SwitchExampleState();
+}
+
+class _SwitchExampleState extends State<SwitchExample> {
+  bool? isOn = false;
+  bool isEnabled = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: 'Switch',
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisAlignment: MainAxisAlignment.spaceAround,
+              children: [
+                ZetaSwitch(
+                  value: isOn,
+                  onChanged: isEnabled ? (value) => setState(() => isOn = value) : null,
+                ),
+                ZetaButton(
+                  label: isEnabled ? 'Disable' : 'Enable',
+                  onPressed: () => setState(() => isEnabled = !isEnabled),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index 55bc1f9e..76cd3f65 100644
--- a/example/widgetbook/main.dart
+++ b/example/widgetbook/main.dart
@@ -19,6 +19,7 @@ import 'pages/components/list_item_widgetbook.dart';
 import 'pages/components/navigation_bar_widgetbook.dart';
 import 'pages/components/password_input_widgetbook.dart';
 import 'pages/components/progress_widgetbook.dart';
+import 'pages/components/switch_widgetbook.dart';
 import 'pages/theme/color_widgetbook.dart';
 import 'pages/theme/radius_widgetbook.dart';
 import 'pages/theme/spacing_widgetbook.dart';
@@ -88,6 +89,7 @@ class HotReload extends StatelessWidget {
                 WidgetbookUseCase(name: 'Circle', builder: (context) => progressCircleUseCase(context))
               ],
             ),
+            WidgetbookUseCase(name: 'Switch', builder: (context) => switchUseCase(context)),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),
         WidgetbookCategory(
diff --git a/example/widgetbook/pages/components/switch_widgetbook.dart b/example/widgetbook/pages/components/switch_widgetbook.dart
new file mode 100644
index 00000000..50aaf294
--- /dev/null
+++ b/example/widgetbook/pages/components/switch_widgetbook.dart
@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget switchUseCase(BuildContext context) {
+  bool? isOn = false;
+
+  return WidgetbookTestWidget(
+    widget: StatefulBuilder(
+      builder: (context, setState) {
+        ValueChanged<bool?>? onChanged = context.knobs.boolean(label: 'Enabled', initialValue: true)
+            ? (value) => setState(() => isOn = value)
+            : null;
+        return Padding(
+          padding: const EdgeInsets.all(ZetaSpacing.x5),
+          child: Column(
+            children: [
+              Text('Switch'),
+              ZetaSwitch(
+                value: isOn,
+                onChanged: onChanged,
+              ),
+              Text(isOn == true ? 'On' : 'Off'),
+            ],
+          ),
+        );
+      },
+    ),
+  );
+}
diff --git a/lib/src/components/switch/material_switch.dart b/lib/src/components/switch/material_switch.dart
new file mode 100644
index 00000000..a63ed13f
--- /dev/null
+++ b/lib/src/components/switch/material_switch.dart
@@ -0,0 +1,1144 @@
+// ignore_for_file: prefer_asserts_with_message, diagnostic_describe_all_properties, public_member_api_docs
+
+// The content of this file is taken from
+// package:flutter/src/material/switch.dart
+// Changes are commented with "Zeta change:"
+
+import 'dart:ui';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+const double _kSwitchMinSize = kMinInteractiveDimension - 8.0;
+
+// Zeta change:
+// Converted Flutter's private stateless [_MaterialSwitch]
+// to public stateful [MaterialSwitch], so that it can be
+// imported and used in [ZetaSwitch].
+class MaterialSwitch extends StatefulWidget {
+  const MaterialSwitch({
+    super.key,
+    required this.value,
+    required this.onChanged,
+    // Zeta change: Require the switch `size` to be passed
+    // in the constructor of [MaterialSwitch].
+    required this.size,
+    this.activeColor,
+    this.activeTrackColor,
+    this.inactiveThumbColor,
+    this.inactiveTrackColor,
+    this.activeThumbImage,
+    this.onActiveThumbImageError,
+    this.inactiveThumbImage,
+    this.onInactiveThumbImageError,
+    this.thumbColor,
+    this.trackColor,
+    this.trackOutlineColor,
+    this.trackOutlineWidth,
+    this.thumbIcon,
+    this.materialTapTargetSize,
+    this.dragStartBehavior = DragStartBehavior.start,
+    this.mouseCursor,
+    this.focusColor,
+    this.hoverColor,
+    this.overlayColor,
+    this.splashRadius,
+    this.focusNode,
+    this.onFocusChange,
+    this.autofocus = false,
+    // Zeta change: added optional parameter `showHover`.
+    this.showHover = false,
+  })  : assert(activeThumbImage != null || onActiveThumbImageError == null),
+        assert(inactiveThumbImage != null || onInactiveThumbImageError == null);
+
+  final bool value;
+  final ValueChanged<bool>? onChanged;
+  final Color? activeColor;
+  final Color? activeTrackColor;
+  final Color? inactiveThumbColor;
+  final Color? inactiveTrackColor;
+  final ImageProvider? activeThumbImage;
+  final ImageErrorListener? onActiveThumbImageError;
+  final ImageProvider? inactiveThumbImage;
+  final ImageErrorListener? onInactiveThumbImageError;
+  final MaterialStateProperty<Color?>? thumbColor;
+  final MaterialStateProperty<Color?>? trackColor;
+  final MaterialStateProperty<Color?>? trackOutlineColor;
+  final MaterialStateProperty<double?>? trackOutlineWidth;
+  final MaterialStateProperty<Icon?>? thumbIcon;
+  final MaterialTapTargetSize? materialTapTargetSize;
+  final DragStartBehavior dragStartBehavior;
+  final MouseCursor? mouseCursor;
+  final Color? focusColor;
+  final Color? hoverColor;
+  final MaterialStateProperty<Color?>? overlayColor;
+  final double? splashRadius;
+  final FocusNode? focusNode;
+  final ValueChanged<bool>? onFocusChange;
+  final bool autofocus;
+  // Zeta change: added optional parameter `showHover`.
+  final bool showHover;
+  final Size size;
+
+  @override
+  State<StatefulWidget> createState() => _MaterialSwitchState();
+}
+
+class _MaterialSwitchState extends State<MaterialSwitch> with TickerProviderStateMixin, ToggleableStateMixin {
+  final _SwitchPainter _painter = _SwitchPainter();
+  // Zeta change: added local `_size` and `_switchConfig`.
+  late final Size _size;
+  late final _SwitchConfig _switchConfig;
+
+  // Zeta change: added initState().
+  @override
+  void initState() {
+    super.initState();
+    _switchConfig = _SwitchConfigM3(size: widget.size);
+    _size = Size(_switchConfig.switchWidth, _switchConfig.switchHeightCollapsed);
+  }
+
+  @override
+  void didUpdateWidget(MaterialSwitch oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.value != widget.value) {
+      // During a drag we may have modified the curve, reset it if its possible
+      // to do without visual discontinuation.
+      if (position.value == 0.0 || position.value == 1.0) {
+        updateCurve();
+      }
+      animateToValue();
+    }
+  }
+
+  @override
+  void dispose() {
+    _painter.dispose();
+    super.dispose();
+  }
+
+  @override
+  ValueChanged<bool?>? get onChanged => widget.onChanged != null ? _handleChanged : null;
+
+  @override
+  bool get tristate => false;
+
+  @override
+  bool? get value => widget.value;
+
+  void updateCurve() {
+    if (Theme.of(context).useMaterial3) {
+      position
+        ..curve = Curves.easeOutBack
+        ..reverseCurve = Curves.easeOutBack.flipped;
+    } else {
+      position
+        ..curve = Curves.easeIn
+        ..reverseCurve = Curves.easeOut;
+    }
+  }
+
+  MaterialStateProperty<Color?> get _widgetThumbColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        return widget.inactiveThumbColor;
+      }
+      if (states.contains(MaterialState.selected)) {
+        return widget.activeColor;
+      }
+      return widget.inactiveThumbColor;
+    });
+  }
+
+  MaterialStateProperty<Color?> get _widgetTrackColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.selected)) {
+        return widget.activeTrackColor;
+      }
+      return widget.inactiveTrackColor;
+    });
+  }
+
+  double get _trackInnerLength {
+    return _size.width - _kSwitchMinSize;
+  }
+
+  void _handleDragStart(DragStartDetails details) {
+    if (isInteractive) {
+      reactionController.forward();
+    }
+  }
+
+  void _handleDragUpdate(DragUpdateDetails details) {
+    if (isInteractive) {
+      position
+        ..curve = Curves.linear
+        ..reverseCurve = null;
+      final double delta = details.primaryDelta! / _trackInnerLength;
+      switch (Directionality.of(context)) {
+        case TextDirection.rtl:
+          positionController.value -= delta;
+        case TextDirection.ltr:
+          positionController.value += delta;
+      }
+    }
+  }
+
+  bool _needsPositionAnimation = false;
+
+  void _handleDragEnd(DragEndDetails details) {
+    if (position.value >= 0.5 != widget.value) {
+      widget.onChanged?.call(!widget.value);
+      // Wait with finishing the animation until widget.value has changed to
+      // !widget.value as part of the widget.onChanged call above.
+      setState(() {
+        _needsPositionAnimation = true;
+      });
+    } else {
+      animateToValue();
+    }
+    reactionController.reverse();
+  }
+
+  void _handleChanged(bool? value) {
+    assert(value != null);
+    assert(widget.onChanged != null);
+    widget.onChanged?.call(value!);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    assert(debugCheckHasMaterial(context));
+
+    if (_needsPositionAnimation) {
+      _needsPositionAnimation = false;
+      animateToValue();
+    }
+
+    final ThemeData theme = Theme.of(context);
+    final SwitchThemeData switchTheme = SwitchTheme.of(context);
+    final SwitchThemeData defaults = _SwitchDefaultsM3(context, size: widget.size);
+
+    positionController.duration = Duration(milliseconds: _switchConfig.toggleDuration);
+
+    // Colors need to be resolved in selected and non selected states separately
+    // so that they can be lerped between.
+    final Set<MaterialState> activeStates = states..add(MaterialState.selected);
+    final Set<MaterialState> inactiveStates = states..remove(MaterialState.selected);
+
+    final Color? activeThumbColor = widget.thumbColor?.resolve(activeStates) ??
+        _widgetThumbColor.resolve(activeStates) ??
+        switchTheme.thumbColor?.resolve(activeStates);
+    final Color effectiveActiveThumbColor = activeThumbColor ?? defaults.thumbColor!.resolve(activeStates)!;
+    final Color? inactiveThumbColor = widget.thumbColor?.resolve(inactiveStates) ??
+        _widgetThumbColor.resolve(inactiveStates) ??
+        switchTheme.thumbColor?.resolve(inactiveStates);
+    final Color effectiveInactiveThumbColor = inactiveThumbColor ?? defaults.thumbColor!.resolve(inactiveStates)!;
+    final Color effectiveActiveTrackColor = widget.trackColor?.resolve(activeStates) ??
+        _widgetTrackColor.resolve(activeStates) ??
+        switchTheme.trackColor?.resolve(activeStates) ??
+        _widgetThumbColor.resolve(activeStates)?.withAlpha(0x80) ??
+        defaults.trackColor!.resolve(activeStates)!;
+    final Color? effectiveActiveTrackOutlineColor = widget.trackOutlineColor?.resolve(activeStates) ??
+        switchTheme.trackOutlineColor?.resolve(activeStates) ??
+        defaults.trackOutlineColor!.resolve(activeStates);
+    final double? effectiveActiveTrackOutlineWidth = widget.trackOutlineWidth?.resolve(activeStates) ??
+        switchTheme.trackOutlineWidth?.resolve(activeStates) ??
+        defaults.trackOutlineWidth?.resolve(activeStates);
+
+    final Color effectiveInactiveTrackColor = widget.trackColor?.resolve(inactiveStates) ??
+        _widgetTrackColor.resolve(inactiveStates) ??
+        switchTheme.trackColor?.resolve(inactiveStates) ??
+        defaults.trackColor!.resolve(inactiveStates)!;
+    final Color? effectiveInactiveTrackOutlineColor = widget.trackOutlineColor?.resolve(inactiveStates) ??
+        switchTheme.trackOutlineColor?.resolve(inactiveStates) ??
+        defaults.trackOutlineColor?.resolve(inactiveStates);
+    final double? effectiveInactiveTrackOutlineWidth = widget.trackOutlineWidth?.resolve(inactiveStates) ??
+        switchTheme.trackOutlineWidth?.resolve(inactiveStates) ??
+        defaults.trackOutlineWidth?.resolve(inactiveStates);
+
+    final Icon? effectiveActiveIcon =
+        widget.thumbIcon?.resolve(activeStates) ?? switchTheme.thumbIcon?.resolve(activeStates);
+    final Icon? effectiveInactiveIcon =
+        widget.thumbIcon?.resolve(inactiveStates) ?? switchTheme.thumbIcon?.resolve(inactiveStates);
+
+    final Color effectiveActiveIconColor = effectiveActiveIcon?.color ?? effectiveActiveThumbColor;
+    final Color effectiveInactiveIconColor = effectiveInactiveIcon?.color ?? effectiveInactiveThumbColor;
+
+    final Set<MaterialState> focusedStates = states..add(MaterialState.focused);
+    final Color effectiveFocusOverlayColor = widget.overlayColor?.resolve(focusedStates) ??
+        widget.focusColor ??
+        switchTheme.overlayColor?.resolve(focusedStates) ??
+        defaults.overlayColor!.resolve(focusedStates)!;
+
+    final Set<MaterialState> hoveredStates = states..add(MaterialState.hovered);
+    final Color effectiveHoverOverlayColor = widget.overlayColor?.resolve(hoveredStates) ??
+        widget.hoverColor ??
+        switchTheme.overlayColor?.resolve(hoveredStates) ??
+        defaults.overlayColor!.resolve(hoveredStates)!;
+
+    final Set<MaterialState> activePressedStates = activeStates..add(MaterialState.pressed);
+    final Color effectiveActivePressedThumbColor = widget.thumbColor?.resolve(activePressedStates) ??
+        _widgetThumbColor.resolve(activePressedStates) ??
+        switchTheme.thumbColor?.resolve(activePressedStates) ??
+        defaults.thumbColor!.resolve(activePressedStates)!;
+    final Color effectiveActivePressedOverlayColor = widget.overlayColor?.resolve(activePressedStates) ??
+        switchTheme.overlayColor?.resolve(activePressedStates) ??
+        activeThumbColor?.withAlpha(kRadialReactionAlpha) ??
+        defaults.overlayColor!.resolve(activePressedStates)!;
+
+    final Set<MaterialState> inactivePressedStates = inactiveStates..add(MaterialState.pressed);
+    final Color effectiveInactivePressedThumbColor = widget.thumbColor?.resolve(inactivePressedStates) ??
+        _widgetThumbColor.resolve(inactivePressedStates) ??
+        switchTheme.thumbColor?.resolve(inactivePressedStates) ??
+        defaults.thumbColor!.resolve(inactivePressedStates)!;
+    final Color effectiveInactivePressedOverlayColor = widget.overlayColor?.resolve(inactivePressedStates) ??
+        switchTheme.overlayColor?.resolve(inactivePressedStates) ??
+        inactiveThumbColor?.withAlpha(kRadialReactionAlpha) ??
+        defaults.overlayColor!.resolve(inactivePressedStates)!;
+
+    final MaterialStateProperty<MouseCursor> effectiveMouseCursor =
+        MaterialStateProperty.resolveWith<MouseCursor>((Set<MaterialState> states) {
+      return MaterialStateProperty.resolveAs<MouseCursor?>(widget.mouseCursor, states) ??
+          switchTheme.mouseCursor?.resolve(states) ??
+          defaults.mouseCursor!.resolve(states)!;
+    });
+
+    final double effectiveActiveThumbRadius =
+        effectiveActiveIcon == null ? _switchConfig.activeThumbRadius : _switchConfig.thumbRadiusWithIcon;
+    final double effectiveInactiveThumbRadius = effectiveInactiveIcon == null && widget.inactiveThumbImage == null
+        ? _switchConfig.inactiveThumbRadius
+        : _switchConfig.thumbRadiusWithIcon;
+    final double effectiveSplashRadius = widget.splashRadius ?? switchTheme.splashRadius ?? defaults.splashRadius!;
+
+    return Semantics(
+      toggled: widget.value,
+      child: GestureDetector(
+        excludeFromSemantics: true,
+        onHorizontalDragStart: _handleDragStart,
+        onHorizontalDragUpdate: _handleDragUpdate,
+        onHorizontalDragEnd: _handleDragEnd,
+        dragStartBehavior: widget.dragStartBehavior,
+        child: buildToggleable(
+          mouseCursor: effectiveMouseCursor,
+          focusNode: widget.focusNode,
+          onFocusChange: widget.onFocusChange,
+          autofocus: widget.autofocus,
+          size: _size,
+          painter: _painter
+            ..position = position
+            ..reaction = reaction
+            ..reactionFocusFade = reactionFocusFade
+            ..reactionHoverFade = reactionHoverFade
+            ..inactiveReactionColor = effectiveInactivePressedOverlayColor
+            ..reactionColor = effectiveActivePressedOverlayColor
+            ..hoverColor = effectiveHoverOverlayColor
+            ..focusColor = effectiveFocusOverlayColor
+            ..splashRadius = effectiveSplashRadius
+            ..downPosition = downPosition
+            ..isFocused = states.contains(MaterialState.focused)
+            // Zeta change: added `widget.showHover` to the below condition.
+            ..isHovered = widget.showHover && states.contains(MaterialState.hovered)
+            ..activeColor = effectiveActiveThumbColor
+            ..inactiveColor = effectiveInactiveThumbColor
+            ..activePressedColor = effectiveActivePressedThumbColor
+            ..inactivePressedColor = effectiveInactivePressedThumbColor
+            ..activeThumbImage = widget.activeThumbImage
+            ..onActiveThumbImageError = widget.onActiveThumbImageError
+            ..inactiveThumbImage = widget.inactiveThumbImage
+            ..onInactiveThumbImageError = widget.onInactiveThumbImageError
+            ..activeTrackColor = effectiveActiveTrackColor
+            ..activeTrackOutlineColor = effectiveActiveTrackOutlineColor
+            ..activeTrackOutlineWidth = effectiveActiveTrackOutlineWidth
+            ..inactiveTrackColor = effectiveInactiveTrackColor
+            ..inactiveTrackOutlineColor = effectiveInactiveTrackOutlineColor
+            ..inactiveTrackOutlineWidth = effectiveInactiveTrackOutlineWidth
+            ..configuration = createLocalImageConfiguration(context)
+            ..isInteractive = isInteractive
+            ..trackInnerLength = _trackInnerLength
+            ..textDirection = Directionality.of(context)
+            ..surfaceColor = theme.colorScheme.surface
+            ..inactiveThumbRadius = effectiveInactiveThumbRadius
+            ..activeThumbRadius = effectiveActiveThumbRadius
+            ..pressedThumbRadius = _switchConfig.pressedThumbRadius
+            ..thumbOffset = _switchConfig.thumbOffset
+            ..trackHeight = _switchConfig.trackHeight
+            ..trackWidth = _switchConfig.trackWidth
+            ..activeIconColor = effectiveActiveIconColor
+            ..inactiveIconColor = effectiveInactiveIconColor
+            ..activeIcon = effectiveActiveIcon
+            ..inactiveIcon = effectiveInactiveIcon
+            ..iconTheme = IconTheme.of(context)
+            ..thumbShadow = _switchConfig.thumbShadow
+            ..positionController = positionController,
+        ),
+      ),
+    );
+  }
+}
+
+class _SwitchPainter extends ToggleablePainter {
+  AnimationController get positionController => _positionController!;
+  AnimationController? _positionController;
+  set positionController(AnimationController? value) {
+    assert(value != null);
+    if (value == _positionController) {
+      return;
+    }
+    _positionController = value;
+    notifyListeners();
+  }
+
+  Icon? get activeIcon => _activeIcon;
+  Icon? _activeIcon;
+  set activeIcon(Icon? value) {
+    if (value == _activeIcon) {
+      return;
+    }
+    _activeIcon = value;
+    notifyListeners();
+  }
+
+  Icon? get inactiveIcon => _inactiveIcon;
+  Icon? _inactiveIcon;
+  set inactiveIcon(Icon? value) {
+    if (value == _inactiveIcon) {
+      return;
+    }
+    _inactiveIcon = value;
+    notifyListeners();
+  }
+
+  IconThemeData? get iconTheme => _iconTheme;
+  IconThemeData? _iconTheme;
+  set iconTheme(IconThemeData? value) {
+    if (value == _iconTheme) {
+      return;
+    }
+    _iconTheme = value;
+    notifyListeners();
+  }
+
+  Color get activeIconColor => _activeIconColor!;
+  Color? _activeIconColor;
+  set activeIconColor(Color value) {
+    if (value == _activeIconColor) {
+      return;
+    }
+    _activeIconColor = value;
+    notifyListeners();
+  }
+
+  Color get inactiveIconColor => _inactiveIconColor!;
+  Color? _inactiveIconColor;
+  set inactiveIconColor(Color value) {
+    if (value == _inactiveIconColor) {
+      return;
+    }
+    _inactiveIconColor = value;
+    notifyListeners();
+  }
+
+  Color get activePressedColor => _activePressedColor!;
+  Color? _activePressedColor;
+  set activePressedColor(Color? value) {
+    assert(value != null);
+    if (value == _activePressedColor) {
+      return;
+    }
+    _activePressedColor = value;
+    notifyListeners();
+  }
+
+  Color get inactivePressedColor => _inactivePressedColor!;
+  Color? _inactivePressedColor;
+  set inactivePressedColor(Color? value) {
+    assert(value != null);
+    if (value == _inactivePressedColor) {
+      return;
+    }
+    _inactivePressedColor = value;
+    notifyListeners();
+  }
+
+  double get activeThumbRadius => _activeThumbRadius!;
+  double? _activeThumbRadius;
+  set activeThumbRadius(double value) {
+    if (value == _activeThumbRadius) {
+      return;
+    }
+    _activeThumbRadius = value;
+    notifyListeners();
+  }
+
+  double get inactiveThumbRadius => _inactiveThumbRadius!;
+  double? _inactiveThumbRadius;
+  set inactiveThumbRadius(double value) {
+    if (value == _inactiveThumbRadius) {
+      return;
+    }
+    _inactiveThumbRadius = value;
+    notifyListeners();
+  }
+
+  double get pressedThumbRadius => _pressedThumbRadius!;
+  double? _pressedThumbRadius;
+  set pressedThumbRadius(double value) {
+    if (value == _pressedThumbRadius) {
+      return;
+    }
+    _pressedThumbRadius = value;
+    notifyListeners();
+  }
+
+  double? get thumbOffset => _thumbOffset;
+  double? _thumbOffset;
+  set thumbOffset(double? value) {
+    if (value == _thumbOffset) {
+      return;
+    }
+    _thumbOffset = value;
+    notifyListeners();
+  }
+
+  double get trackHeight => _trackHeight!;
+  double? _trackHeight;
+  set trackHeight(double value) {
+    if (value == _trackHeight) {
+      return;
+    }
+    _trackHeight = value;
+    notifyListeners();
+  }
+
+  double get trackWidth => _trackWidth!;
+  double? _trackWidth;
+  set trackWidth(double value) {
+    if (value == _trackWidth) {
+      return;
+    }
+    _trackWidth = value;
+    notifyListeners();
+  }
+
+  ImageProvider? get activeThumbImage => _activeThumbImage;
+  ImageProvider? _activeThumbImage;
+  set activeThumbImage(ImageProvider? value) {
+    if (value == _activeThumbImage) {
+      return;
+    }
+    _activeThumbImage = value;
+    notifyListeners();
+  }
+
+  ImageErrorListener? get onActiveThumbImageError => _onActiveThumbImageError;
+  ImageErrorListener? _onActiveThumbImageError;
+  set onActiveThumbImageError(ImageErrorListener? value) {
+    if (value == _onActiveThumbImageError) {
+      return;
+    }
+    _onActiveThumbImageError = value;
+    notifyListeners();
+  }
+
+  ImageProvider? get inactiveThumbImage => _inactiveThumbImage;
+  ImageProvider? _inactiveThumbImage;
+  set inactiveThumbImage(ImageProvider? value) {
+    if (value == _inactiveThumbImage) {
+      return;
+    }
+    _inactiveThumbImage = value;
+    notifyListeners();
+  }
+
+  ImageErrorListener? get onInactiveThumbImageError => _onInactiveThumbImageError;
+  ImageErrorListener? _onInactiveThumbImageError;
+  set onInactiveThumbImageError(ImageErrorListener? value) {
+    if (value == _onInactiveThumbImageError) {
+      return;
+    }
+    _onInactiveThumbImageError = value;
+    notifyListeners();
+  }
+
+  Color get activeTrackColor => _activeTrackColor!;
+  Color? _activeTrackColor;
+  set activeTrackColor(Color value) {
+    if (value == _activeTrackColor) {
+      return;
+    }
+    _activeTrackColor = value;
+    notifyListeners();
+  }
+
+  Color? get activeTrackOutlineColor => _activeTrackOutlineColor;
+  Color? _activeTrackOutlineColor;
+  set activeTrackOutlineColor(Color? value) {
+    if (value == _activeTrackOutlineColor) {
+      return;
+    }
+    _activeTrackOutlineColor = value;
+    notifyListeners();
+  }
+
+  Color? get inactiveTrackOutlineColor => _inactiveTrackOutlineColor;
+  Color? _inactiveTrackOutlineColor;
+  set inactiveTrackOutlineColor(Color? value) {
+    if (value == _inactiveTrackOutlineColor) {
+      return;
+    }
+    _inactiveTrackOutlineColor = value;
+    notifyListeners();
+  }
+
+  double? get activeTrackOutlineWidth => _activeTrackOutlineWidth;
+  double? _activeTrackOutlineWidth;
+  set activeTrackOutlineWidth(double? value) {
+    if (value == _activeTrackOutlineWidth) {
+      return;
+    }
+    _activeTrackOutlineWidth = value;
+    notifyListeners();
+  }
+
+  double? get inactiveTrackOutlineWidth => _inactiveTrackOutlineWidth;
+  double? _inactiveTrackOutlineWidth;
+  set inactiveTrackOutlineWidth(double? value) {
+    if (value == _inactiveTrackOutlineWidth) {
+      return;
+    }
+    _inactiveTrackOutlineWidth = value;
+    notifyListeners();
+  }
+
+  Color get inactiveTrackColor => _inactiveTrackColor!;
+  Color? _inactiveTrackColor;
+  set inactiveTrackColor(Color value) {
+    if (value == _inactiveTrackColor) {
+      return;
+    }
+    _inactiveTrackColor = value;
+    notifyListeners();
+  }
+
+  ImageConfiguration get configuration => _configuration!;
+  ImageConfiguration? _configuration;
+  set configuration(ImageConfiguration value) {
+    if (value == _configuration) {
+      return;
+    }
+    _configuration = value;
+    notifyListeners();
+  }
+
+  TextDirection get textDirection => _textDirection!;
+  TextDirection? _textDirection;
+  set textDirection(TextDirection value) {
+    if (_textDirection == value) {
+      return;
+    }
+    _textDirection = value;
+    notifyListeners();
+  }
+
+  Color get surfaceColor => _surfaceColor!;
+  Color? _surfaceColor;
+  set surfaceColor(Color value) {
+    if (value == _surfaceColor) {
+      return;
+    }
+    _surfaceColor = value;
+    notifyListeners();
+  }
+
+  bool get isInteractive => _isInteractive!;
+  bool? _isInteractive;
+  set isInteractive(bool value) {
+    if (value == _isInteractive) {
+      return;
+    }
+    _isInteractive = value;
+    notifyListeners();
+  }
+
+  double get trackInnerLength => _trackInnerLength!;
+  double? _trackInnerLength;
+  set trackInnerLength(double value) {
+    if (value == _trackInnerLength) {
+      return;
+    }
+    _trackInnerLength = value;
+    notifyListeners();
+  }
+
+  List<BoxShadow>? get thumbShadow => _thumbShadow;
+  List<BoxShadow>? _thumbShadow;
+  set thumbShadow(List<BoxShadow>? value) {
+    if (value == _thumbShadow) {
+      return;
+    }
+    _thumbShadow = value;
+    notifyListeners();
+  }
+
+  final TextPainter _textPainter = TextPainter();
+  Color? _cachedThumbColor;
+  ImageProvider? _cachedThumbImage;
+  ImageErrorListener? _cachedThumbErrorListener;
+  BoxPainter? _cachedThumbPainter;
+
+  ShapeDecoration _createDefaultThumbDecoration(Color color, ImageProvider? image, ImageErrorListener? errorListener) {
+    return ShapeDecoration(
+      color: color,
+      image: image == null ? null : DecorationImage(image: image, onError: errorListener),
+      shape: const StadiumBorder(),
+    );
+  }
+
+  bool _isPainting = false;
+
+  void _handleDecorationChanged() {
+    // If the image decoration is available synchronously, we'll get called here
+    // during paint. There's no reason to mark ourselves as needing paint if we
+    // are already in the middle of painting. (In fact, doing so would trigger
+    // an assert).
+    if (!_isPainting) {
+      notifyListeners();
+    }
+  }
+
+  bool _stopPressAnimation = false;
+  late double? _pressedThumbExtension;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final double currentValue = position.value;
+
+    final double visualPosition;
+    switch (textDirection) {
+      case TextDirection.rtl:
+        visualPosition = 1.0 - currentValue;
+      case TextDirection.ltr:
+        visualPosition = currentValue;
+    }
+    if (reaction.status == AnimationStatus.reverse && !_stopPressAnimation) {
+      _stopPressAnimation = true;
+    } else {
+      _stopPressAnimation = false;
+    }
+
+    if (!_stopPressAnimation) {
+      _pressedThumbExtension = 0;
+    }
+
+    Size? thumbSize = Size.fromRadius(pressedThumbRadius);
+
+    // The thumb contracts slightly during the animation in Material 2.
+    final double inset = thumbOffset == null ? 0 : 1.0 - (currentValue - thumbOffset!).abs() * 2.0;
+    thumbSize = Size(thumbSize.width - inset, thumbSize.height - inset);
+
+    final double colorValue =
+        CurvedAnimation(parent: positionController, curve: Curves.easeOut, reverseCurve: Curves.easeIn).value;
+    final Color trackColor = Color.lerp(inactiveTrackColor, activeTrackColor, colorValue)!;
+    final Color? trackOutlineColor = inactiveTrackOutlineColor == null || activeTrackOutlineColor == null
+        ? null
+        : Color.lerp(inactiveTrackOutlineColor, activeTrackOutlineColor, colorValue);
+    final double? trackOutlineWidth = lerpDouble(inactiveTrackOutlineWidth, activeTrackOutlineWidth, colorValue);
+    Color lerpedThumbColor;
+    if (!reaction.isDismissed) {
+      lerpedThumbColor = Color.lerp(inactivePressedColor, activePressedColor, colorValue)!;
+    } else if (positionController.status == AnimationStatus.forward) {
+      lerpedThumbColor = Color.lerp(inactivePressedColor, activeColor, colorValue)!;
+    } else if (positionController.status == AnimationStatus.reverse) {
+      lerpedThumbColor = Color.lerp(inactiveColor, activePressedColor, colorValue)!;
+    } else {
+      lerpedThumbColor = Color.lerp(inactiveColor, activeColor, colorValue)!;
+    }
+
+    // Blend the thumb color against a `surfaceColor` background in case the
+    // thumbColor is not opaque. This way we do not see through the thumb to the
+    // track underneath.
+    final Color thumbColor = Color.alphaBlend(lerpedThumbColor, surfaceColor);
+
+    final Icon? thumbIcon = currentValue < 0.5 ? inactiveIcon : activeIcon;
+
+    final ImageProvider? thumbImage = currentValue < 0.5 ? inactiveThumbImage : activeThumbImage;
+
+    final ImageErrorListener? thumbErrorListener =
+        currentValue < 0.5 ? onInactiveThumbImageError : onActiveThumbImageError;
+
+    final Paint paint = Paint()..color = trackColor;
+
+    final Offset trackPaintOffset = _computeTrackPaintOffset(size, trackWidth, trackHeight);
+    final Offset thumbPaintOffset = _computeThumbPaintOffset(trackPaintOffset, thumbSize, visualPosition);
+    final Offset radialReactionOrigin = Offset(thumbPaintOffset.dx + thumbSize.height / 2, size.height / 2);
+
+    _paintTrackWith(canvas, paint, trackPaintOffset, trackOutlineColor, trackOutlineWidth);
+    paintRadialReaction(canvas: canvas, origin: radialReactionOrigin);
+    _paintThumbWith(
+      thumbPaintOffset,
+      canvas,
+      colorValue,
+      thumbColor,
+      thumbImage,
+      thumbErrorListener,
+      thumbIcon,
+      thumbSize,
+      inset,
+    );
+  }
+
+  /// Computes canvas offset for track's upper left corner
+  Offset _computeTrackPaintOffset(Size canvasSize, double trackWidth, double trackHeight) {
+    final double horizontalOffset = (canvasSize.width - trackWidth) / 2.0;
+    final double verticalOffset = (canvasSize.height - trackHeight) / 2.0;
+
+    return Offset(horizontalOffset, verticalOffset);
+  }
+
+  /// Computes canvas offset for thumb's upper left corner as if it were a
+  /// square
+  Offset _computeThumbPaintOffset(Offset trackPaintOffset, Size thumbSize, double visualPosition) {
+    // How much thumb radius extends beyond the track
+    final double trackRadius = trackHeight / 2;
+    final double additionalThumbRadius = thumbSize.height / 2 - trackRadius;
+
+    final double horizontalProgress = visualPosition * (trackInnerLength - _pressedThumbExtension!);
+    final double thumbHorizontalOffset =
+        trackPaintOffset.dx + trackRadius + (_pressedThumbExtension! / 2) - thumbSize.width / 2 + horizontalProgress;
+    final double thumbVerticalOffset = trackPaintOffset.dy - additionalThumbRadius;
+    return Offset(thumbHorizontalOffset, thumbVerticalOffset);
+  }
+
+  void _paintTrackWith(
+    Canvas canvas,
+    Paint paint,
+    Offset trackPaintOffset,
+    Color? trackOutlineColor,
+    double? trackOutlineWidth,
+  ) {
+    final Rect trackRect = Rect.fromLTWH(
+      trackPaintOffset.dx,
+      trackPaintOffset.dy,
+      trackWidth,
+      trackHeight,
+    );
+    final double trackRadius = trackHeight / 2;
+    final RRect trackRRect = RRect.fromRectAndRadius(
+      trackRect,
+      Radius.circular(trackRadius),
+    );
+
+    canvas.drawRRect(trackRRect, paint);
+
+    // paint track outline
+    if (trackOutlineColor != null) {
+      final Rect outlineTrackRect = Rect.fromLTWH(
+        trackPaintOffset.dx + 1,
+        trackPaintOffset.dy + 1,
+        trackWidth - 2,
+        trackHeight - 2,
+      );
+      final RRect outlineTrackRRect = RRect.fromRectAndRadius(
+        outlineTrackRect,
+        Radius.circular(trackRadius),
+      );
+
+      final Paint outlinePaint = Paint()
+        ..style = PaintingStyle.stroke
+        ..strokeWidth = trackOutlineWidth ?? 2.0
+        ..color = trackOutlineColor;
+
+      canvas.drawRRect(outlineTrackRRect, outlinePaint);
+    }
+  }
+
+  void _paintThumbWith(
+    Offset thumbPaintOffset,
+    Canvas canvas,
+    double currentValue,
+    Color thumbColor,
+    ImageProvider? thumbImage,
+    ImageErrorListener? thumbErrorListener,
+    Icon? thumbIcon,
+    Size thumbSize,
+    double inset,
+  ) {
+    try {
+      _isPainting = true;
+      if (_cachedThumbPainter == null ||
+          thumbColor != _cachedThumbColor ||
+          thumbImage != _cachedThumbImage ||
+          thumbErrorListener != _cachedThumbErrorListener) {
+        _cachedThumbColor = thumbColor;
+        _cachedThumbImage = thumbImage;
+        _cachedThumbErrorListener = thumbErrorListener;
+        _cachedThumbPainter?.dispose();
+        _cachedThumbPainter = _createDefaultThumbDecoration(thumbColor, thumbImage, thumbErrorListener)
+            .createBoxPainter(_handleDecorationChanged);
+      }
+      _cachedThumbPainter!.paint(
+        canvas,
+        thumbPaintOffset,
+        configuration.copyWith(size: thumbSize),
+      );
+
+      if (thumbIcon != null && thumbIcon.icon != null) {
+        final Color iconColor = Color.lerp(inactiveIconColor, activeIconColor, currentValue)!;
+        final double iconSize = thumbIcon.size ?? thumbSize.height;
+        final IconData iconData = thumbIcon.icon!;
+        final double? iconWeight = thumbIcon.weight ?? iconTheme?.weight;
+        final double? iconFill = thumbIcon.fill ?? iconTheme?.fill;
+        final double? iconGrade = thumbIcon.grade ?? iconTheme?.grade;
+        final double? iconOpticalSize = thumbIcon.opticalSize ?? iconTheme?.opticalSize;
+        final List<Shadow>? iconShadows = thumbIcon.shadows ?? iconTheme?.shadows;
+
+        final TextSpan textSpan = TextSpan(
+          text: String.fromCharCode(iconData.codePoint),
+          style: TextStyle(
+            fontVariations: <FontVariation>[
+              if (iconFill != null) FontVariation('FILL', iconFill),
+              if (iconWeight != null) FontVariation('wght', iconWeight),
+              if (iconGrade != null) FontVariation('GRAD', iconGrade),
+              if (iconOpticalSize != null) FontVariation('opsz', iconOpticalSize),
+            ],
+            color: iconColor,
+            fontSize: iconSize,
+            inherit: false,
+            fontFamily: iconData.fontFamily,
+            package: iconData.fontPackage,
+            shadows: iconShadows,
+          ),
+        );
+        _textPainter
+          ..textDirection = textDirection
+          ..text = textSpan
+          ..layout();
+        final double additionalHorizontalOffset = (thumbSize.width - iconSize) / 2;
+        final double additionalVerticalOffset = (thumbSize.height - iconSize) / 2;
+        final Offset offset = thumbPaintOffset + Offset(additionalHorizontalOffset, additionalVerticalOffset);
+
+        _textPainter.paint(canvas, offset);
+      }
+    } finally {
+      _isPainting = false;
+    }
+  }
+
+  @override
+  void dispose() {
+    _textPainter.dispose();
+    _cachedThumbPainter?.dispose();
+    _cachedThumbPainter = null;
+    _cachedThumbColor = null;
+    _cachedThumbImage = null;
+    _cachedThumbErrorListener = null;
+    super.dispose();
+  }
+}
+
+mixin _SwitchConfig {
+  double get trackHeight;
+  double get trackWidth;
+  double get switchWidth;
+  double get switchHeight;
+  double get switchHeightCollapsed;
+  double get activeThumbRadius;
+  double get inactiveThumbRadius;
+  double get pressedThumbRadius;
+  double get thumbRadiusWithIcon;
+  List<BoxShadow>? get thumbShadow;
+  double? get thumbOffset;
+  int get toggleDuration;
+}
+
+class _SwitchDefaultsM3 extends SwitchThemeData {
+  // Zeta change: Require the switch `size` to be passed
+  // in the constructor of [_SwitchDefaultsM3].
+  _SwitchDefaultsM3(this.context, {required this.size});
+
+  final BuildContext context;
+  // Zeta change: Added parameter for the switch `size`.
+  final Size size;
+  late final ColorScheme _colors = Theme.of(context).colorScheme;
+
+  @override
+  MaterialStateProperty<Color> get thumbColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        if (states.contains(MaterialState.selected)) {
+          return _colors.surface.withOpacity(1);
+        }
+        return _colors.onSurface.withOpacity(0.38);
+      }
+      if (states.contains(MaterialState.selected)) {
+        if (states.contains(MaterialState.pressed)) {
+          return _colors.primaryContainer;
+        }
+        if (states.contains(MaterialState.hovered)) {
+          return _colors.primaryContainer;
+        }
+        if (states.contains(MaterialState.focused)) {
+          return _colors.primaryContainer;
+        }
+        return _colors.onPrimary;
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return _colors.onSurfaceVariant;
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return _colors.onSurfaceVariant;
+      }
+      if (states.contains(MaterialState.focused)) {
+        return _colors.onSurfaceVariant;
+      }
+      return _colors.outline;
+    });
+  }
+
+  @override
+  MaterialStateProperty<Color> get trackColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        if (states.contains(MaterialState.selected)) {
+          return _colors.onSurface.withOpacity(0.12);
+        }
+        return _colors.surfaceVariant.withOpacity(0.12);
+      }
+      if (states.contains(MaterialState.selected)) {
+        if (states.contains(MaterialState.pressed)) {
+          return _colors.primary;
+        }
+        if (states.contains(MaterialState.hovered)) {
+          return _colors.primary;
+        }
+        if (states.contains(MaterialState.focused)) {
+          return _colors.primary;
+        }
+        return _colors.primary;
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return _colors.surfaceVariant;
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return _colors.surfaceVariant;
+      }
+      if (states.contains(MaterialState.focused)) {
+        return _colors.surfaceVariant;
+      }
+      return _colors.surfaceVariant;
+    });
+  }
+
+  @override
+  MaterialStateProperty<Color?> get trackOutlineColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.selected)) {
+        return Colors.transparent;
+      }
+      if (states.contains(MaterialState.disabled)) {
+        return _colors.onSurface.withOpacity(0.12);
+      }
+      return _colors.outline;
+    });
+  }
+
+  @override
+  MaterialStateProperty<Color?> get overlayColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.selected)) {
+        if (states.contains(MaterialState.pressed)) {
+          return _colors.primary.withOpacity(0.12);
+        }
+        if (states.contains(MaterialState.hovered)) {
+          return _colors.primary.withOpacity(0.08);
+        }
+        if (states.contains(MaterialState.focused)) {
+          return _colors.primary.withOpacity(0.12);
+        }
+        return null;
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return _colors.onSurface.withOpacity(0.12);
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return _colors.onSurface.withOpacity(0.08);
+      }
+      if (states.contains(MaterialState.focused)) {
+        return _colors.onSurface.withOpacity(0.12);
+      }
+      return null;
+    });
+  }
+
+  @override
+  MaterialStateProperty<MouseCursor> get mouseCursor {
+    return MaterialStateProperty.resolveWith(
+      (Set<MaterialState> states) => MaterialStateMouseCursor.clickable.resolve(states),
+    );
+  }
+
+  @override
+  MaterialStatePropertyAll<double> get trackOutlineWidth => const MaterialStatePropertyAll<double>(2);
+
+  // Zeta change: `splashRadius` was fixed value in Flutter's [Switch],
+  // but not we use `size.height` for this.
+  @override
+  double get splashRadius => size.height / 2 + 8;
+}
+
+class _SwitchConfigM3 with _SwitchConfig {
+  // Zeta change: Require the switch `size` to be passed
+  // in the constructor of [_SwitchConfigM3].
+  _SwitchConfigM3({required this.size});
+
+  // Zeta change: Added parameter for the switch `size`.
+  final Size size;
+
+  // Zeta change: `activeThumbRadius` was fixed value in Flutter's [Switch],
+  // but not we use `size.height` for this.
+  @override
+  double get activeThumbRadius => (size.height - 4) / 2;
+
+  // Zeta change: `inactiveThumbRadius` was fixed value in Flutter's [Switch],
+  // but not we use `size.height` for this.
+  @override
+  double get inactiveThumbRadius => (size.height - 4) / 2;
+
+  // Zeta change: `pressedThumbRadius` was fixed value in Flutter's [Switch],
+  // but not we use `size.height` for this.
+  @override
+  double get pressedThumbRadius => (size.height - 4) / 2;
+
+  @override
+  double get switchHeight => _kSwitchMinSize + 8;
+
+  @override
+  double get switchHeightCollapsed => _kSwitchMinSize;
+
+  @override
+  double get switchWidth => trackWidth - 2 * (trackHeight / 2) + _kSwitchMinSize;
+
+  @override
+  double get thumbRadiusWithIcon => (size.height - 4) / 2;
+
+  @override
+  List<BoxShadow>? get thumbShadow => kElevationToShadow[0];
+
+  // Zeta change: `trackHeight` was fixed value in Flutter's [Switch],
+  // but not we use `size.height` for this.
+  @override
+  double get trackHeight => size.height;
+
+  // Zeta change: `trackWidth` was fixed value in Flutter's [Switch],
+  // but not we use `size.width` for this.
+  @override
+  double get trackWidth => size.width;
+
+  // Hand coded default based on the animation specs.
+  @override
+  int get toggleDuration => 300;
+
+  // Hand coded default based on the animation specs.
+  @override
+  double? get thumbOffset => null;
+}
diff --git a/lib/src/components/switch/zeta_switch.dart b/lib/src/components/switch/zeta_switch.dart
new file mode 100644
index 00000000..81dbf7e8
--- /dev/null
+++ b/lib/src/components/switch/zeta_switch.dart
@@ -0,0 +1,58 @@
+import 'dart:io';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import '../../../zeta_flutter.dart';
+import 'material_switch.dart';
+
+const _sizeAndroid = Size(48, 24);
+const _sizeIOS = Size(56, 32);
+
+/// Zeta Switch.
+///
+/// Switch can turn an option on or off.
+class ZetaSwitch extends StatelessWidget {
+  /// Constructor for [ZetaSwitch].
+  const ZetaSwitch({
+    super.key,
+    this.value = false,
+    this.onChanged,
+  });
+
+  /// Determines whether the switch is on or off.
+  final bool? value;
+
+  /// Called when the value of the switch should change.
+  final ValueChanged<bool?>? onChanged;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(FlagProperty('value', value: value, ifTrue: 'on', ifFalse: 'off', showName: true))
+      ..add(ObjectFlagProperty<ValueChanged<bool>>('onChanged', onChanged, ifNull: 'disabled'));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final zetaColors = Zeta.of(context).colors;
+    return MaterialSwitch(
+      size: Platform.isIOS ? _sizeIOS : _sizeAndroid,
+      trackOutlineWidth: const MaterialStatePropertyAll(0),
+      trackOutlineColor: const MaterialStatePropertyAll(Colors.transparent),
+      trackColor: MaterialStateProperty.resolveWith((states) {
+        if (states.contains(MaterialState.disabled)) {
+          return zetaColors.cool.shade30;
+        } else {
+          return states.contains(MaterialState.selected) ? zetaColors.primary : zetaColors.cool.shade50;
+        }
+      }),
+      thumbColor: MaterialStateProperty.resolveWith(
+        (states) => states.contains(MaterialState.disabled) ? zetaColors.cool.shade50 : zetaColors.cool.shade20,
+      ),
+      value: value ?? false,
+      onChanged: onChanged,
+    );
+  }
+}
diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart
index 8d7cde31..6dbe942f 100644
--- a/lib/zeta_flutter.dart
+++ b/lib/zeta_flutter.dart
@@ -29,6 +29,7 @@ export 'src/components/navigation bar/navigation_bar.dart';
 export 'src/components/password/password_input.dart';
 export 'src/components/progress/progress_bar.dart';
 export 'src/components/progress/progress_circle.dart';
+export 'src/components/switch/zeta_switch.dart';
 export 'src/theme/color_extensions.dart';
 export 'src/theme/color_scheme.dart';
 export 'src/theme/color_swatch.dart';

From d159f19d31136fe8d206a47ae796cbaa47036795 Mon Sep 17 00:00:00 2001
From: atanasyordanov21 <63714308+atanasyordanov21@users.noreply.github.com>
Date: Thu, 28 Mar 2024 11:35:21 +0200
Subject: [PATCH 10/17] Component Zeta Radio Button (#9)

* create component Zeta Radio Button

* remove hover color

* fix label line height
---
 example/lib/home.dart                         |   2 +
 .../lib/pages/components/radio_example.dart   |  48 ++++++
 example/widgetbook/main.dart                  |   2 +
 .../pages/components/radio_widgetbook.dart    |  44 +++++
 lib/src/components/radio/radio.dart           | 157 ++++++++++++++++++
 lib/zeta_flutter.dart                         |   1 +
 6 files changed, 254 insertions(+)
 create mode 100644 example/lib/pages/components/radio_example.dart
 create mode 100644 example/widgetbook/pages/components/radio_widgetbook.dart
 create mode 100644 lib/src/components/radio/radio.dart

diff --git a/example/lib/home.dart b/example/lib/home.dart
index 2df43f7c..d09cdcca 100644
--- a/example/lib/home.dart
+++ b/example/lib/home.dart
@@ -13,6 +13,7 @@ import 'package:zeta_example/pages/components/dialpad_example.dart';
 import 'package:zeta_example/pages/components/dropdown_example.dart';
 import 'package:zeta_example/pages/components/list_item_example.dart';
 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/theme/color_example.dart';
 import 'package:zeta_example/pages/components/password_input_example.dart';
@@ -47,6 +48,7 @@ final List<Component> components = [
   Component(DropdownExample.name, (context) => const DropdownExample()),
   Component(ProgressExample.name, (context) => const ProgressExample()),
   Component(DialPadExample.name, (context) => const DialPadExample()),
+  Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
   Component(SwitchExample.name, (context) => const SwitchExample()),
 ];
 
diff --git a/example/lib/pages/components/radio_example.dart b/example/lib/pages/components/radio_example.dart
new file mode 100644
index 00000000..bd7b5f26
--- /dev/null
+++ b/example/lib/pages/components/radio_example.dart
@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class RadioButtonExample extends StatefulWidget {
+  static const String name = 'RadioButton';
+
+  const RadioButtonExample({Key? key}) : super(key: key);
+
+  @override
+  State<RadioButtonExample> createState() => _RadioButtonExampleState();
+}
+
+class _RadioButtonExampleState extends State<RadioButtonExample> {
+  String option1 = 'Label 1';
+  String option2 = 'Label 2';
+  String? groupValue;
+  bool isEnabled = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: 'Radio Button',
+      child: Center(
+        child: Column(
+          children: [
+            ZetaRadio<String>(
+              value: option1,
+              groupValue: groupValue,
+              onChanged: isEnabled ? (value) => setState(() => groupValue = value) : null,
+              label: Text(option1),
+            ),
+            ZetaRadio<String>(
+              value: option2,
+              groupValue: groupValue,
+              onChanged: isEnabled ? (value) => setState(() => groupValue = value) : null,
+              label: Text(option2),
+            ),
+            ZetaButton(
+              label: isEnabled ? 'Disable' : 'Enable',
+              onPressed: () => setState(() => isEnabled = !isEnabled),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index 76cd3f65..d8f71422 100644
--- a/example/widgetbook/main.dart
+++ b/example/widgetbook/main.dart
@@ -19,6 +19,7 @@ import 'pages/components/list_item_widgetbook.dart';
 import 'pages/components/navigation_bar_widgetbook.dart';
 import 'pages/components/password_input_widgetbook.dart';
 import 'pages/components/progress_widgetbook.dart';
+import 'pages/components/radio_widgetbook.dart';
 import 'pages/components/switch_widgetbook.dart';
 import 'pages/theme/color_widgetbook.dart';
 import 'pages/theme/radius_widgetbook.dart';
@@ -89,6 +90,7 @@ class HotReload extends StatelessWidget {
                 WidgetbookUseCase(name: 'Circle', builder: (context) => progressCircleUseCase(context))
               ],
             ),
+            WidgetbookUseCase(name: 'Radio Button', builder: (context) => radioButtonUseCase(context)),
             WidgetbookUseCase(name: 'Switch', builder: (context) => switchUseCase(context)),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),
diff --git a/example/widgetbook/pages/components/radio_widgetbook.dart b/example/widgetbook/pages/components/radio_widgetbook.dart
new file mode 100644
index 00000000..e8aacdc4
--- /dev/null
+++ b/example/widgetbook/pages/components/radio_widgetbook.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget radioButtonUseCase(BuildContext context) {
+  String option1 = 'Label 1';
+  String option2 = 'Label 2';
+  String? groupValue;
+
+  return WidgetbookTestWidget(
+    widget: StatefulBuilder(
+      builder: (context, setState) {
+        ValueChanged<String?>? onChanged = context.knobs.boolean(label: 'Enabled', initialValue: true)
+            ? (value) => setState(() => groupValue = value)
+            : null;
+        return Padding(
+          padding: const EdgeInsets.all(ZetaSpacing.x5),
+          child: Column(
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(bottom: ZetaSpacing.x5),
+                child: Text('Radio Button'),
+              ),
+              ZetaRadio<String>(
+                value: option1,
+                groupValue: groupValue,
+                onChanged: onChanged,
+                label: Text(option1),
+              ),
+              ZetaRadio<String>(
+                value: option2,
+                groupValue: groupValue,
+                onChanged: onChanged,
+                label: Text(option2),
+              ),
+            ],
+          ),
+        );
+      },
+    ),
+  );
+}
diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart
new file mode 100644
index 00000000..82f2a61f
--- /dev/null
+++ b/lib/src/components/radio/radio.dart
@@ -0,0 +1,157 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import '../../../zeta_flutter.dart';
+
+/// Zeta Radio Button
+///
+/// Radio Button can select one single option from a goup of different options.
+class ZetaRadio<T> extends StatefulWidget {
+  /// Constructor for [ZetaRadio].
+  const ZetaRadio({
+    super.key,
+    required this.value,
+    this.groupValue,
+    this.onChanged,
+    this.label,
+  });
+
+  /// The value of the option, which can be selected by this Radio Button.
+  final T value;
+
+  /// The selected value among all possible options.
+  final T? groupValue;
+
+  /// Callback function to call when the Radio Button is tapped.
+  final ValueChanged<T?>? onChanged;
+
+  /// The label which appears next to the Radio Button, on the right side.
+  final Widget? label;
+
+  bool get _selected => value == groupValue;
+
+  @override
+  State<ZetaRadio<T>> createState() => _ZetaRadioState<T>();
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty<T>('value', value))
+      ..add(DiagnosticsProperty<T?>('groupValue', groupValue))
+      ..add(ObjectFlagProperty<ValueChanged<T?>?>('onChanged', onChanged, ifNull: 'disabled'));
+  }
+}
+
+class _ZetaRadioState<T> extends State<ZetaRadio<T>> with TickerProviderStateMixin, ToggleableStateMixin {
+  final ToggleablePainter _painter = _RadioPainter();
+  @override
+  Widget build(BuildContext context) {
+    final zetaColors = Zeta.of(context).colors;
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Semantics(
+          inMutuallyExclusiveGroup: true,
+          checked: widget._selected,
+          selected: value,
+          child: buildToggleable(
+            size: const Size(36, 36),
+            painter: _painter
+              ..position = position
+              ..reaction = reaction
+              ..reactionFocusFade = reactionFocusFade
+              ..reactionHoverFade = reactionHoverFade
+              ..inactiveReactionColor = Colors.transparent
+              ..reactionColor = Colors.transparent
+              ..hoverColor = Colors.transparent
+              ..focusColor = zetaColors.blue.shade50
+              ..splashRadius = 12
+              ..downPosition = downPosition
+              ..isFocused = states.contains(MaterialState.focused)
+              ..isHovered = states.contains(MaterialState.hovered)
+              ..activeColor =
+                  states.contains(MaterialState.disabled) ? zetaColors.cool.shade30 : zetaColors.blue.shade60
+              ..inactiveColor =
+                  states.contains(MaterialState.disabled) ? zetaColors.cool.shade30 : zetaColors.cool.shade70,
+            mouseCursor: MaterialStateProperty.all(
+              MaterialStateProperty.resolveAs<MouseCursor>(
+                MaterialStateMouseCursor.clickable,
+                states,
+              ),
+            ),
+          ),
+        ),
+        if (widget.label != null)
+          GestureDetector(
+            onTap: () => onChanged?.call(true),
+            child: DefaultTextStyle(
+              style: ZetaTextStyles.bodyLarge.copyWith(
+                color: states.contains(MaterialState.disabled) ? zetaColors.textDisabled : zetaColors.textDefault,
+                height: 1.33,
+              ),
+              child: widget.label!,
+            ),
+          ),
+      ],
+    );
+  }
+
+  void _handleChanged(bool? selected) {
+    if (selected == null) {
+      widget.onChanged!(null);
+      return;
+    }
+    if (selected) {
+      widget.onChanged!(widget.value);
+    }
+  }
+
+  @override
+  ValueChanged<bool?>? get onChanged => widget.onChanged != null ? _handleChanged : null;
+
+  @override
+  bool get tristate => false;
+
+  @override
+  bool get value => widget._selected;
+
+  @override
+  void didUpdateWidget(ZetaRadio<T> oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget._selected != oldWidget._selected) {
+      animateToValue();
+    }
+  }
+
+  @override
+  void dispose() {
+    _painter.dispose();
+    super.dispose();
+  }
+}
+
+const double _kOuterRadius = 10;
+const double _kInnerRadius = 5;
+
+class _RadioPainter extends ToggleablePainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    paintRadialReaction(canvas: canvas, origin: size.center(Offset.zero));
+
+    final Offset center = (Offset.zero & size).center;
+
+    // Outer circle
+    final Paint paint = Paint()
+      ..color = Color.lerp(inactiveColor, activeColor, position.value)!
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 2;
+    canvas.drawCircle(center, _kOuterRadius, paint);
+
+    // Inner circle
+    if (!position.isDismissed) {
+      paint.style = PaintingStyle.fill;
+      canvas.drawCircle(center, _kInnerRadius * position.value, paint);
+    }
+  }
+}
diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart
index 6dbe942f..8511cd6a 100644
--- a/lib/zeta_flutter.dart
+++ b/lib/zeta_flutter.dart
@@ -29,6 +29,7 @@ export 'src/components/navigation bar/navigation_bar.dart';
 export 'src/components/password/password_input.dart';
 export 'src/components/progress/progress_bar.dart';
 export 'src/components/progress/progress_circle.dart';
+export 'src/components/radio/radio.dart';
 export 'src/components/switch/zeta_switch.dart';
 export 'src/theme/color_extensions.dart';
 export 'src/theme/color_scheme.dart';

From da18813fad2f9364e4aa6c9c9cb1c30a70cbe646 Mon Sep 17 00:00:00 2001
From: sd-athlon <163880004+sd-athlon@users.noreply.github.com>
Date: Fri, 29 Mar 2024 13:10:47 +0200
Subject: [PATCH 11/17] feat(main): SnackBar (#10)

* add snackbar example

* Add snackbar widgetbook

* feat(main): SnackBar

* [automated commit] lint format and import sort

* remove view icon

* Add view icon

* Add widgetbook icon helper

* [automated commit] lint format and import sort

* fix alphabetical imports

* Fix delete and error background color

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 example/lib/home.dart                         |   2 +
 .../pages/components/snackbar_example.dart    | 229 ++++++++++++
 example/widgetbook/main.dart                  |   5 +
 .../components/snack_bar_widgetbook.dart      |  56 +++
 lib/src/components/snack_bar/snack_bar.dart   | 350 ++++++++++++++++++
 lib/zeta_flutter.dart                         |   1 +
 6 files changed, 643 insertions(+)
 create mode 100644 example/lib/pages/components/snackbar_example.dart
 create mode 100644 example/widgetbook/pages/components/snack_bar_widgetbook.dart
 create mode 100644 lib/src/components/snack_bar/snack_bar.dart

diff --git a/example/lib/home.dart b/example/lib/home.dart
index d09cdcca..d1293377 100644
--- a/example/lib/home.dart
+++ b/example/lib/home.dart
@@ -15,6 +15,7 @@ import 'package:zeta_example/pages/components/list_item_example.dart';
 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/theme/color_example.dart';
 import 'package:zeta_example/pages/components/password_input_example.dart';
 import 'package:zeta_example/pages/components/progress_example.dart';
@@ -47,6 +48,7 @@ final List<Component> components = [
   Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
   Component(DropdownExample.name, (context) => const DropdownExample()),
   Component(ProgressExample.name, (context) => const ProgressExample()),
+  Component(SnackBarExample.name, (context) => const SnackBarExample()),
   Component(DialPadExample.name, (context) => const DialPadExample()),
   Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
   Component(SwitchExample.name, (context) => const SwitchExample()),
diff --git a/example/lib/pages/components/snackbar_example.dart b/example/lib/pages/components/snackbar_example.dart
new file mode 100644
index 00000000..b07ab311
--- /dev/null
+++ b/example/lib/pages/components/snackbar_example.dart
@@ -0,0 +1,229 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class SnackBarExample extends StatelessWidget {
+  static const String name = 'SnackBar';
+
+  const SnackBarExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: SnackBarExample.name,
+      child: SingleChildScrollView(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Column(
+              children: [
+                // Standard Rounded
+                Row(
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                      child: ZetaButton.primary(
+                        label: "Standard Rounded SnackBar",
+                        onPressed: () {
+                          ScaffoldMessenger.of(context).showSnackBar(
+                            ZetaSnackBar(
+                              context: context,
+                              onPressed: () {
+                                ScaffoldMessenger.of(context).hideCurrentSnackBar();
+                              },
+                              actionLabel: "Action",
+                              content: Text('This is a snackbar'),
+                            ),
+                          );
+                        },
+                      ),
+                    ),
+                  ],
+                ),
+
+                // Standard Sharp
+                Padding(
+                  padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                  child: ZetaButton.primary(
+                    label: "Standard Sharp SnackBar",
+                    onPressed: () {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        ZetaSnackBar(
+                          context: context,
+                          onPressed: () {
+                            ScaffoldMessenger.of(context).hideCurrentSnackBar();
+                          },
+                          actionLabel: "Action",
+                          rounded: false,
+                          content: Text('This is a snackbar'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+
+                // Default
+                Padding(
+                  padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                  child: ZetaButton.primary(
+                    label: "Contectual Default",
+                    onPressed: () {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        ZetaSnackBar(
+                          context: context,
+                          type: ZetaSnackBarType.defaultType,
+                          leadingIcon: Icon(Icons.mood_rounded),
+                          content: Text('Message with icon'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+
+                // Action
+                Padding(
+                  padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                  child: ZetaButton.primary(
+                    label: "Action",
+                    onPressed: () {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        ZetaSnackBar(
+                          context: context,
+                          type: ZetaSnackBarType.action,
+                          onPressed: () {},
+                          actionLabel: "Action",
+                          content: Text('Actionable message with icon'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+
+                // Positive
+                Padding(
+                  padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                  child: ZetaButton.primary(
+                    label: "Positive",
+                    onPressed: () {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        ZetaSnackBar(
+                          context: context,
+                          type: ZetaSnackBarType.positive,
+                          content: Text('Request sent successfully'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+
+                // Info
+                Padding(
+                  padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                  child: ZetaButton.primary(
+                    label: "Info",
+                    onPressed: () {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        ZetaSnackBar(
+                          context: context,
+                          type: ZetaSnackBarType.info,
+                          content: Text('Information is being displayed'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+
+                // Info
+                Padding(
+                  padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                  child: ZetaButton.primary(
+                    label: "Info",
+                    onPressed: () {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        ZetaSnackBar(
+                          context: context,
+                          type: ZetaSnackBarType.info,
+                          content: Text('Information is being displayed'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+
+                // Warning
+                Padding(
+                  padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                  child: ZetaButton.primary(
+                    label: "Warning",
+                    onPressed: () {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        ZetaSnackBar(
+                          context: context,
+                          type: ZetaSnackBarType.warning,
+                          content: Text('Warning has been issued'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+
+                // Error
+                Padding(
+                  padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                  child: ZetaButton.primary(
+                    label: "Error",
+                    onPressed: () {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        ZetaSnackBar(
+                          context: context,
+                          type: ZetaSnackBarType.error,
+                          content: Text('Error has been detected'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+
+                // Deletion
+                Padding(
+                  padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                  child: ZetaButton.primary(
+                    label: "Deletion",
+                    onPressed: () {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        ZetaSnackBar(
+                          context: context,
+                          type: ZetaSnackBarType.deletion,
+                          onPressed: () {},
+                          content: Text('Item was deleted'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+
+                // View
+                Padding(
+                  padding: const EdgeInsets.only(top: ZetaSpacing.x4),
+                  child: ZetaButton.primary(
+                    label: "View",
+                    onPressed: () {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        ZetaSnackBar(
+                          context: context,
+                          type: ZetaSnackBarType.view,
+                          onPressed: () {},
+                          content: Text('Something neeeds your attention'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index d8f71422..f706613f 100644
--- a/example/widgetbook/main.dart
+++ b/example/widgetbook/main.dart
@@ -21,6 +21,7 @@ import 'pages/components/password_input_widgetbook.dart';
 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/theme/color_widgetbook.dart';
 import 'pages/theme/radius_widgetbook.dart';
 import 'pages/theme/spacing_widgetbook.dart';
@@ -92,6 +93,10 @@ class HotReload extends StatelessWidget {
             ),
             WidgetbookUseCase(name: 'Radio Button', builder: (context) => radioButtonUseCase(context)),
             WidgetbookUseCase(name: 'Switch', builder: (context) => switchUseCase(context)),
+            WidgetbookUseCase(
+              name: 'Snack Bar',
+              builder: (context) => snackBarUseCase(context),
+            ),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),
         WidgetbookCategory(
diff --git a/example/widgetbook/pages/components/snack_bar_widgetbook.dart b/example/widgetbook/pages/components/snack_bar_widgetbook.dart
new file mode 100644
index 00000000..7f3deeba
--- /dev/null
+++ b/example/widgetbook/pages/components/snack_bar_widgetbook.dart
@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+import '../../utils/utils.dart';
+
+Widget snackBarUseCase(BuildContext context) {
+  return WidgetbookTestWidget(
+    widget: Builder(
+      builder: (context) {
+        final text = context.knobs.string(
+          label: 'Content Text',
+          initialValue: 'This is a snackbar',
+        );
+
+        final actionLabel = context.knobs.stringOrNull(
+          label: 'Action Label',
+          initialValue: null,
+        );
+
+        final type = context.knobs.listOrNull<ZetaSnackBarType>(
+          label: 'Type',
+          options: [null, ...ZetaSnackBarType.values],
+          labelBuilder: (type) => type?.name ?? '',
+        );
+
+        final leadingIcon = iconKnob(
+          context,
+          name: "Leading Icon",
+          initial: Icons.mood_rounded,
+          nullable: true,
+        );
+
+        final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
+
+        return ZetaButton.primary(
+            label: "Show Snackbar",
+            onPressed: () {
+              print(actionLabel);
+              final snackBar = ZetaSnackBar(
+                context: context,
+                onPressed: () {},
+                actionLabel: actionLabel,
+                type: type,
+                leadingIcon: leadingIcon != null ? Icon(leadingIcon) : null,
+                rounded: rounded,
+                content: Text(text),
+              );
+
+              ScaffoldMessenger.of(context).showSnackBar(snackBar);
+            });
+      },
+    ),
+  );
+}
diff --git a/lib/src/components/snack_bar/snack_bar.dart b/lib/src/components/snack_bar/snack_bar.dart
new file mode 100644
index 00000000..e5250583
--- /dev/null
+++ b/lib/src/components/snack_bar/snack_bar.dart
@@ -0,0 +1,350 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import '../../../zeta_flutter.dart';
+
+/// Type used to define contextual [SnackBar]. The type defines the styles, icons and behavior.
+enum ZetaSnackBarType {
+  /// Default colors with leading icon with close action.
+  defaultType,
+
+  /// Default colors with leading icon and custom action.
+  action,
+
+  /// Success styles with close action.
+  positive,
+
+  /// Info styles with close action.
+  info,
+
+  /// Warning styles with close action.
+  warning,
+
+  /// Error styles with close action.
+  error,
+
+  /// Deletion styles with custom undo action.
+  deletion,
+
+  /// View styles with custom view action.
+  view,
+}
+
+/// A lightweight message with an optional action which briefly displays at the
+/// bottom of the screen.
+///
+/// Different styles can be applied to [ZetaSnackBar] with [ZetaSnackBarType].
+class ZetaSnackBar extends SnackBar {
+  /// Sets basic styles for the [SnackBar].
+  ZetaSnackBar({
+    required BuildContext context,
+    required Widget content,
+    VoidCallback? onPressed,
+    ZetaSnackBarType? type,
+    Icon? leadingIcon,
+    bool rounded = true,
+    String? actionLabel,
+    String deleteActionLabel = 'Undo',
+    String viewActionLabel = 'View',
+    super.margin,
+    super.behavior = SnackBarBehavior.floating,
+    super.key,
+  }) : super(
+          elevation: 0,
+          padding: EdgeInsets.zero,
+          backgroundColor: _getBackgroundColorForType(context, type),
+          shape: RoundedRectangleBorder(
+            borderRadius: type != null
+                ? ZetaRadius.full
+                : rounded
+                    ? ZetaRadius.minimal
+                    : ZetaRadius.none,
+          ),
+          content: Padding(
+            padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.xs),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Flexible(
+                  child: Row(
+                    children: [
+                      _LeadingIcon(type, leadingIcon),
+                      Flexible(
+                        child: Padding(
+                          padding: const EdgeInsets.only(left: ZetaSpacing.s),
+                          child: _Content(type: type, child: content),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                _Action(
+                  type: type,
+                  actionLabel: actionLabel,
+                  onPressed: onPressed,
+                  deleteActionLabel: deleteActionLabel,
+                  viewActionLabel: viewActionLabel,
+                ),
+              ],
+            ),
+          ),
+        );
+
+  static Color _getBackgroundColorForType(
+    BuildContext context,
+    ZetaSnackBarType? type,
+  ) {
+    final colors = Zeta.of(context).colors;
+
+    return switch (type) {
+      ZetaSnackBarType.positive => colors.green.shade10,
+      ZetaSnackBarType.info => colors.purple.shade10,
+      ZetaSnackBarType.warning => colors.orange.shade10,
+      ZetaSnackBarType.deletion || ZetaSnackBarType.error => colors.red.shade10,
+      ZetaSnackBarType.view => colors.blue.shade10,
+      _ => colors.warm.shade100,
+    };
+  }
+}
+
+class _Content extends StatelessWidget {
+  const _Content({required this.child, required this.type});
+
+  final Widget child;
+  final ZetaSnackBarType? type;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(EnumProperty<ZetaSnackBarType?>('type', type))
+      ..add(DiagnosticsProperty<Widget>('child', child));
+  }
+
+  Color _getColorForType(
+    ZetaColors colors,
+    ZetaSnackBarType? type,
+  ) {
+    return switch (type) {
+      ZetaSnackBarType.positive ||
+      ZetaSnackBarType.info ||
+      ZetaSnackBarType.warning ||
+      ZetaSnackBarType.deletion ||
+      ZetaSnackBarType.error ||
+      ZetaSnackBarType.view =>
+        colors.textDefault,
+      _ => colors.textInverse,
+    };
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = Zeta.of(context).colors;
+
+    return DefaultTextStyle(
+      style: ZetaTextStyles.bodyMedium.copyWith(
+        color: _getColorForType(colors, type),
+      ),
+      child: child,
+    );
+  }
+}
+
+class _Action extends StatelessWidget {
+  const _Action({
+    required this.type,
+    required this.actionLabel,
+    required this.onPressed,
+    required this.deleteActionLabel,
+    required this.viewActionLabel,
+  });
+
+  final String? actionLabel;
+  final String deleteActionLabel;
+  final VoidCallback? onPressed;
+  final ZetaSnackBarType? type;
+  final String viewActionLabel;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(EnumProperty<ZetaSnackBarType?>('type', type))
+      ..add(StringProperty('actionLabel', actionLabel))
+      ..add(StringProperty('deleteActionLabel', deleteActionLabel))
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onPressed', onPressed))
+      ..add(StringProperty('viewActionLabel', viewActionLabel));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = Zeta.of(context).colors;
+
+    return switch (type) {
+      ZetaSnackBarType.defaultType => _IconButton(
+          onPressed: () => ScaffoldMessenger.of(context).removeCurrentSnackBar(),
+          color: colors.iconInverse,
+        ),
+      ZetaSnackBarType.action => _ActionButton(
+          onPressed: onPressed,
+          label: actionLabel,
+          color: colors.blue.shade50,
+        ),
+      ZetaSnackBarType.positive ||
+      ZetaSnackBarType.info ||
+      ZetaSnackBarType.warning ||
+      ZetaSnackBarType.error =>
+        _IconButton(
+          onPressed: () => ScaffoldMessenger.of(context).removeCurrentSnackBar(),
+          color: colors.cool.shade90,
+        ),
+      ZetaSnackBarType.deletion => _ActionButton(
+          onPressed: onPressed,
+          label: deleteActionLabel,
+          color: colors.cool.shade90,
+        ),
+      ZetaSnackBarType.view => _ActionButton(
+          onPressed: onPressed,
+          label: viewActionLabel,
+          color: colors.cool.shade90,
+        ),
+      _ => _ActionButton(
+          onPressed: onPressed,
+          label: actionLabel,
+          color: colors.blue.shade50,
+        ),
+    };
+  }
+}
+
+class _IconButton extends StatelessWidget {
+  const _IconButton({
+    required this.onPressed,
+    required this.color,
+  });
+
+  final Color color;
+  final VoidCallback? onPressed;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onPressed', onPressed))
+      ..add(ColorProperty('color', color));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.xxs),
+      child: IconButton(
+        style: IconButton.styleFrom(
+          padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.s),
+          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+          minimumSize: const Size(20, 20),
+        ),
+        onPressed: onPressed,
+        icon: Icon(
+          ZetaIcons.close_round,
+          color: color,
+          size: 20,
+        ),
+      ),
+    );
+  }
+}
+
+class _ActionButton extends StatelessWidget {
+  const _ActionButton({
+    required this.onPressed,
+    required this.label,
+    required this.color,
+  });
+
+  final Color color;
+  final String? label;
+  final VoidCallback? onPressed;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onPressed', onPressed))
+      ..add(StringProperty('label', label))
+      ..add(ColorProperty('color', color));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.s),
+      child: TextButton(
+        style: TextButton.styleFrom(
+          textStyle: ZetaTextStyles.labelLarge,
+          padding: const EdgeInsets.symmetric(
+            horizontal: ZetaSpacing.s,
+            vertical: ZetaSpacing.xxs,
+          ),
+          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+          minimumSize: Size.zero,
+        ),
+        onPressed: onPressed,
+        child: Text(
+          label ?? '',
+          style: ZetaTextStyles.labelLarge.copyWith(color: color),
+        ),
+      ),
+    );
+  }
+}
+
+class _LeadingIcon extends StatelessWidget {
+  const _LeadingIcon(this.type, this.icon);
+
+  final Icon? icon;
+  final ZetaSnackBarType? type;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(EnumProperty<ZetaSnackBarType?>('type', type));
+  }
+
+  Color _getIconColor(ZetaColors colors, ZetaSnackBarType? type) {
+    return switch (type) {
+      ZetaSnackBarType.positive => colors.positive,
+      ZetaSnackBarType.info => colors.info,
+      ZetaSnackBarType.warning => colors.warning,
+      ZetaSnackBarType.error || ZetaSnackBarType.deletion => colors.negative,
+      ZetaSnackBarType.view => colors.primary,
+      _ => colors.iconInverse,
+    };
+  }
+
+  Widget _getIcon(ZetaSnackBarType? type) {
+    return switch (type) {
+      ZetaSnackBarType.positive => const Icon(ZetaIcons.check_circle_round),
+      ZetaSnackBarType.info => const Icon(ZetaIcons.info_round),
+      ZetaSnackBarType.warning => const Icon(ZetaIcons.warning_round),
+      ZetaSnackBarType.error => const Icon(ZetaIcons.error_round),
+      ZetaSnackBarType.deletion => const Icon(ZetaIcons.delete_round),
+      ZetaSnackBarType.view => const Icon(ZetaIcons.open_in_new_window_round),
+      _ => const SizedBox(),
+    };
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = Zeta.of(context).colors;
+
+    return Padding(
+      padding: type != null || icon != null ? const EdgeInsets.only(left: ZetaSpacing.s) : EdgeInsets.zero,
+      child: IconTheme(
+        data: IconThemeData(
+          color: _getIconColor(colors, type),
+        ),
+        child: icon ?? _getIcon(type),
+      ),
+    );
+  }
+}
diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart
index 8511cd6a..1a41efe5 100644
--- a/lib/zeta_flutter.dart
+++ b/lib/zeta_flutter.dart
@@ -30,6 +30,7 @@ export 'src/components/password/password_input.dart';
 export 'src/components/progress/progress_bar.dart';
 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/theme/color_extensions.dart';
 export 'src/theme/color_scheme.dart';

From 94b1a84031170f87a93df6e43f4adfc83f351cdd Mon Sep 17 00:00:00 2001
From: sd-athlon <163880004+sd-athlon@users.noreply.github.com>
Date: Wed, 3 Apr 2024 13:22:20 +0300
Subject: [PATCH 12/17] 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                         |  2 +
 .../lib/pages/components/tabs_example.dart    | 70 +++++++++++++++++++
 example/widgetbook/main.dart                  |  2 +
 .../pages/components/tabs_widgetbook.dart     | 51 ++++++++++++++
 lib/src/components/tabs/tab.dart              | 29 ++++++++
 lib/src/components/tabs/tab_bar.dart          | 35 ++++++++++
 lib/zeta_flutter.dart                         |  2 +
 7 files changed, 191 insertions(+)
 create mode 100644 example/lib/pages/components/tabs_example.dart
 create mode 100644 example/widgetbook/pages/components/tabs_widgetbook.dart
 create mode 100644 lib/src/components/tabs/tab.dart
 create mode 100644 lib/src/components/tabs/tab_bar.dart

diff --git a/example/lib/home.dart b/example/lib/home.dart
index d1293377..f59ec323 100644
--- a/example/lib/home.dart
+++ b/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()),
diff --git a/example/lib/pages/components/tabs_example.dart b/example/lib/pages/components/tabs_example.dart
new file mode 100644
index 00000000..135d6b83
--- /dev/null
+++ b/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"),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index f706613f..f88d48a5 100644
--- a/example/widgetbook/main.dart
+++ b/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(
diff --git a/example/widgetbook/pages/components/tabs_widgetbook.dart b/example/widgetbook/pages/components/tabs_widgetbook.dart
new file mode 100644
index 00000000..ca0687d5
--- /dev/null
+++ b/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"),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    ),
+  );
+}
diff --git a/lib/src/components/tabs/tab.dart b/lib/src/components/tabs/tab.dart
new file mode 100644
index 00000000..aaa77635
--- /dev/null
+++ b/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),
+            ],
+          ),
+        );
+}
diff --git a/lib/src/components/tabs/tab_bar.dart b/lib/src/components/tabs/tab_bar.dart
new file mode 100644
index 00000000..bfbf2bf9
--- /dev/null
+++ b/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,
+          ),
+        );
+}
diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart
index 1a41efe5..7bcbbd40 100644
--- a/lib/zeta_flutter.dart
+++ b/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';

From ebe96e5e9a936e51e6f5eece380f4cd5e5074b63 Mon Sep 17 00:00:00 2001
From: Luke Walton <thelukewalton@users.noreply.github.com>
Date: Wed, 3 Apr 2024 15:18:37 +0100
Subject: [PATCH 13/17] chore: Update text styles (#13)

---
 .../lib/pages/theme/typography_example.dart   |   2 +-
 example/lib/widgets.dart                      |   6 +-
 .../macos/Runner.xcodeproj/project.pbxproj    |   2 +-
 .../xcshareddata/xcschemes/Runner.xcscheme    |   2 +-
 example/test/typography_test.dart             |   6 +-
 .../pages/theme/typography_widgetbook.dart    |   2 +-
 lib/src/components/accordion/accordion.dart   |  12 +-
 lib/src/components/badges/indicator.dart      |   6 +-
 lib/src/components/badges/priority_pill.dart  |   4 +-
 .../badges/workcloud_indicator.dart           |   2 +-
 .../components/banners/in_page_banner.dart    |   6 +-
 lib/src/components/banners/system_banner.dart |   3 +-
 .../components/breadcrumbs/breadcrumbs.dart   |   2 +-
 lib/src/components/buttons/button.dart        |   4 +-
 lib/src/components/buttons/button_group.dart  |  11 +-
 lib/src/components/checkbox/checkbox.dart     |   2 +-
 lib/src/components/chips/chip.dart            |   2 +-
 lib/src/components/radio/radio.dart           |   2 +-
 lib/src/theme/typography.dart                 | 154 +++++++++++++++---
 19 files changed, 174 insertions(+), 56 deletions(-)

diff --git a/example/lib/pages/theme/typography_example.dart b/example/lib/pages/theme/typography_example.dart
index 7e9efcee..da763e40 100644
--- a/example/lib/pages/theme/typography_example.dart
+++ b/example/lib/pages/theme/typography_example.dart
@@ -24,11 +24,11 @@ class TypographyExample extends StatelessWidget {
       'Body Large': ZetaTextStyles.bodyLarge,
       'Body Medium': ZetaTextStyles.bodyMedium,
       'Body Small': ZetaTextStyles.bodySmall,
+      'Body X-Small': ZetaTextStyles.bodyXSmall,
       'Label Large': ZetaTextStyles.labelLarge,
       'Label Medium': ZetaTextStyles.labelMedium,
       'Label Small': ZetaTextStyles.labelSmall,
       'Label Indicator': ZetaTextStyles.labelIndicator,
-      'Label Tiny': ZetaTextStyles.labelTiny,
     };
 
     return ExampleScaffold(
diff --git a/example/lib/widgets.dart b/example/lib/widgets.dart
index 6523f821..816cd4ea 100644
--- a/example/lib/widgets.dart
+++ b/example/lib/widgets.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:zeta_example/utils/theme_color_switch.dart';
 import 'package:zeta_example/utils/theme_constrast_switch.dart';
 import 'package:zeta_example/utils/theme_mode_switch.dart';
-import 'package:zeta_flutter/zeta_flutter.dart';
 
 class ExampleScaffold extends StatelessWidget {
   final String name;
@@ -29,10 +28,7 @@ class ExampleScaffold extends StatelessWidget {
       floatingActionButton: floatingActionButton,
       appBar: AppBar(
         centerTitle: false,
-        title: Text(
-          name,
-          style: ZetaTextStyles.titleMedium,
-        ),
+        title: Text(name),
         backgroundColor: colors.primary,
         foregroundColor: colors.onPrimary,
         actions: [
diff --git a/example/macos/Runner.xcodeproj/project.pbxproj b/example/macos/Runner.xcodeproj/project.pbxproj
index ee0056c3..253d9342 100644
--- a/example/macos/Runner.xcodeproj/project.pbxproj
+++ b/example/macos/Runner.xcodeproj/project.pbxproj
@@ -202,7 +202,7 @@
 			isa = PBXProject;
 			attributes = {
 				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 1510;
+				LastUpgradeCheck = 1430;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					33CC10EC2044A3C60003C045 = {
diff --git a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
index 5b055a3a..83d88728 100644
--- a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
+++ b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1510"
+   LastUpgradeVersion = "1430"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
diff --git a/example/test/typography_test.dart b/example/test/typography_test.dart
index 6eec19ef..7132248e 100644
--- a/example/test/typography_test.dart
+++ b/example/test/typography_test.dart
@@ -24,7 +24,7 @@ void main() {
                 Text(exampleText, style: ZetaTextStyles.displayLarge, key: key3),
                 Text(
                   exampleText,
-                  style: TextStyle(fontSize: 52, fontWeight: FontWeight.w300, height: 64 / 52),
+                  style: TextStyle(fontSize: 52, fontWeight: FontWeight.w300, height: 60 / 52),
                   key: key4,
                 ),
               ],
@@ -55,10 +55,10 @@ void main() {
     expect(text3.style, text4.style);
 
     /// Test font size of [ZetaTextStyles.bodyMedium] is correct
-    expect(text1.style!.fontSize, 14);
+    expect(text1.style!.fontSize, 16);
 
     /// Test line height of [ZetaTextStyles.bodyMedium] is correct
-    expect(text1.style!.height, 20 / 14);
+    expect(text1.style!.height, 24 / 16);
 
     /// Test font weight of [ZetaTextStyles.bodyMedium] is correct
     expect(text1.style!.fontWeight, FontWeight.w400);
diff --git a/example/widgetbook/pages/theme/typography_widgetbook.dart b/example/widgetbook/pages/theme/typography_widgetbook.dart
index f768f354..45da8649 100644
--- a/example/widgetbook/pages/theme/typography_widgetbook.dart
+++ b/example/widgetbook/pages/theme/typography_widgetbook.dart
@@ -16,11 +16,11 @@ const Map<String, TextStyle> allTypes = {
   'Body large': ZetaTextStyles.bodyLarge,
   'Body medium': ZetaTextStyles.bodyMedium,
   'Body small': ZetaTextStyles.bodySmall,
+  'Body X-small': ZetaTextStyles.bodyXSmall,
   'Label large': ZetaTextStyles.labelLarge,
   'Label medium': ZetaTextStyles.labelMedium,
   'Label small': ZetaTextStyles.labelSmall,
   'Label indicator': ZetaTextStyles.labelIndicator,
-  'Label tiny': ZetaTextStyles.labelTiny,
 };
 
 Widget typographyUseCase(BuildContext context) => Padding(
diff --git a/lib/src/components/accordion/accordion.dart b/lib/src/components/accordion/accordion.dart
index 6b2966f8..5fc24290 100644
--- a/lib/src/components/accordion/accordion.dart
+++ b/lib/src/components/accordion/accordion.dart
@@ -174,7 +174,17 @@ class _ZetaAccordionState extends State<ZetaAccordion> with TickerProviderStateM
               axisAlignment: -1,
               child: Padding(
                 padding: const EdgeInsets.fromLTRB(ZetaSpacing.x4, 0, ZetaSpacing.x4, ZetaSpacing.x4),
-                child: DefaultTextStyle(style: ZetaTextStyles.titleSmall, child: widget.child ?? const SizedBox()),
+                child: Theme(
+                  data: Theme.of(context).copyWith(
+                    listTileTheme: ListTileThemeData(
+                      titleTextStyle: ZetaTextStyles.titleSmall.apply(color: zetaColors.textDefault),
+                    ),
+                  ),
+                  child: DefaultTextStyle(
+                    style: ZetaTextStyles.titleSmall,
+                    child: widget.child ?? const SizedBox(),
+                  ),
+                ),
               ),
             ),
           ],
diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart
index 7b5a91d6..ff77a5ad 100644
--- a/lib/src/components/badges/indicator.dart
+++ b/lib/src/components/badges/indicator.dart
@@ -123,8 +123,10 @@ class ZetaIndicator extends StatelessWidget {
         return Center(
           child: Text(
             value.formatMaxChars(),
-            style: (size == ZetaWidgetSize.large ? ZetaTextStyles.labelIndicator : ZetaTextStyles.labelTiny)
-                .apply(color: foregroundColor),
+            style: ZetaTextStyles.labelIndicator.copyWith(
+              color: foregroundColor,
+              fontSize: size == ZetaWidgetSize.large ? null : 11,
+            ), // TODO(thelukwalton): Awaiting updated design.
           ),
         );
     }
diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart
index a95002c0..8e027667 100644
--- a/lib/src/components/badges/priority_pill.dart
+++ b/lib/src/components/badges/priority_pill.dart
@@ -46,13 +46,13 @@ class ZetaPriorityPill extends StatelessWidget {
               shape: rounded ? BoxShape.circle : BoxShape.rectangle,
               color: backgroundColor,
             ),
-            child: Text(index.formatMaxChars(), style: ZetaTextStyles.bodyMedium.apply(color: foregroundColor)),
+            child: Text(index.formatMaxChars(), style: ZetaTextStyles.bodySmall.apply(color: foregroundColor)),
           ),
           Padding(
             padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x2, vertical: ZetaSpacing.x1),
             child: Text(
               priority,
-              style: ZetaTextStyles.bodyMedium,
+              style: ZetaTextStyles.bodySmall,
               overflow: TextOverflow.ellipsis,
             ),
           ),
diff --git a/lib/src/components/badges/workcloud_indicator.dart b/lib/src/components/badges/workcloud_indicator.dart
index 3a79c04a..c1efefde 100644
--- a/lib/src/components/badges/workcloud_indicator.dart
+++ b/lib/src/components/badges/workcloud_indicator.dart
@@ -103,7 +103,7 @@ class ZetaWorkcloudIndicator extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final ZetaColorSwatch color = priorityType.color(context);
-    final textStyle = prioritySize == ZetaWidgetSize.large ? ZetaTextStyles.labelMedium : ZetaTextStyles.labelTiny;
+    final textStyle = prioritySize == ZetaWidgetSize.large ? ZetaTextStyles.bodySmall : ZetaTextStyles.bodyXSmall;
 
     return DecoratedBox(
       decoration: BoxDecoration(
diff --git a/lib/src/components/banners/in_page_banner.dart b/lib/src/components/banners/in_page_banner.dart
index 15d9e20b..15323eaa 100644
--- a/lib/src/components/banners/in_page_banner.dart
+++ b/lib/src/components/banners/in_page_banner.dart
@@ -71,14 +71,14 @@ class ZetaInPageBanner extends StatelessWidget {
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  const SizedBox(height: ZetaSpacing.x2_5),
+                  const SizedBox(height: ZetaSpacing.x2),
                   if (hasTitle)
                     Text(
                       title!,
-                      style: ZetaTextStyles.titleSmall,
+                      style: ZetaTextStyles.labelLarge,
                     ).paddingBottom(ZetaSpacing.xxs),
                   DefaultTextStyle(
-                    style: ZetaTextStyles.bodyMedium.apply(color: theme.colors.textDefault),
+                    style: ZetaTextStyles.bodySmall.apply(color: theme.colors.textDefault),
                     child: content,
                   ),
                   if (actions.isNotEmpty)
diff --git a/lib/src/components/banners/system_banner.dart b/lib/src/components/banners/system_banner.dart
index e6b40dff..1c9a29f6 100644
--- a/lib/src/components/banners/system_banner.dart
+++ b/lib/src/components/banners/system_banner.dart
@@ -54,10 +54,9 @@ class ZetaSystemBanner extends MaterialBanner {
               }
 
               return DefaultTextStyle(
-                style: ZetaTextStyles.titleSmall.copyWith(
+                style: ZetaTextStyles.labelLarge.copyWith(
                   color: foregroundColor,
                   overflow: TextOverflow.ellipsis,
-                  height: 1,
                 ),
                 child: Row(
                   mainAxisAlignment: titleStart ? MainAxisAlignment.center : MainAxisAlignment.start,
diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart
index 51536248..f318946d 100644
--- a/lib/src/components/breadcrumbs/breadcrumbs.dart
+++ b/lib/src/components/breadcrumbs/breadcrumbs.dart
@@ -204,7 +204,7 @@ class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
           ),
           Text(
             widget.label,
-            style: TextStyle(color: getColor(controller.value, colors)),
+            style: ZetaTextStyles.bodySmall.apply(color: getColor(controller.value, colors)),
           ),
         ],
       ),
diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart
index 252cdd1b..c6c61700 100644
--- a/lib/src/components/buttons/button.dart
+++ b/lib/src/components/buttons/button.dart
@@ -3,8 +3,6 @@ import 'package:flutter/material.dart';
 
 import '../../../zeta_flutter.dart';
 
-///Button types
-
 ///Zeta Button
 class ZetaButton extends StatelessWidget {
   ///Constructs [ZetaButton]
@@ -135,7 +133,7 @@ class ZetaButton extends StatelessWidget {
     );
   }
 
-  TextStyle get _textStyle => size == ZetaWidgetSize.small ? ZetaTextStyles.labelMedium : ZetaTextStyles.labelLarge;
+  TextStyle get _textStyle => size == ZetaWidgetSize.small ? ZetaTextStyles.labelSmall : ZetaTextStyles.labelLarge;
 
   double get _minConstraints {
     switch (size) {
diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart
index 4a71ba17..bf903921 100644
--- a/lib/src/components/buttons/button_group.dart
+++ b/lib/src/components/buttons/button_group.dart
@@ -242,14 +242,11 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
           child: Row(
             mainAxisSize: MainAxisSize.min,
             children: [
-              if (widget.icon != null) Icon(widget.icon),
-              Text(widget.label!),
+              if (widget.icon != null) Icon(widget.icon, size: ZetaSpacing.x5),
+              Text(widget.label ?? '', style: ZetaTextStyles.labelMedium),
               if (widget.dropdown != null) // TODO(UX-1006): Dropdown
-                Icon(
-                  widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp,
-                  size: 20,
-                ),
-            ],
+                Icon(widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp, size: ZetaSpacing.x5),
+            ].divide(const SizedBox(width: ZetaSpacing.x1)).toList(),
           ).paddingAll(_padding),
         ),
       ),
diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart
index 350f49b0..36d40b8c 100644
--- a/lib/src/components/checkbox/checkbox.dart
+++ b/lib/src/components/checkbox/checkbox.dart
@@ -207,7 +207,7 @@ class _CheckboxState extends State<_Checkbox> {
           Flexible(
             child: Padding(
               padding: const EdgeInsets.only(left: ZetaSpacing.s),
-              child: Text(widget.label!, style: ZetaTextStyles.bodyLarge),
+              child: Text(widget.label!, style: ZetaTextStyles.bodyMedium),
             ),
           ),
         ],
diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart
index 78d28324..6432b23d 100644
--- a/lib/src/components/chips/chip.dart
+++ b/lib/src/components/chips/chip.dart
@@ -97,7 +97,7 @@ class _ZetaChipState extends State<ZetaChip> {
         shape: MaterialStateProperty.all(
           RoundedRectangleBorder(borderRadius: widget.rounded ? ZetaRadius.full : ZetaRadius.none),
         ),
-        textStyle: MaterialStateProperty.all(ZetaTextStyles.bodyMedium),
+        textStyle: MaterialStateProperty.all(ZetaTextStyles.bodySmall),
         backgroundColor: MaterialStateProperty.resolveWith((states) {
           if (states.contains(MaterialState.disabled)) {
             return colors.surfaceDisabled;
diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart
index 82f2a61f..7971e2ca 100644
--- a/lib/src/components/radio/radio.dart
+++ b/lib/src/components/radio/radio.dart
@@ -86,7 +86,7 @@ class _ZetaRadioState<T> extends State<ZetaRadio<T>> with TickerProviderStateMix
           GestureDetector(
             onTap: () => onChanged?.call(true),
             child: DefaultTextStyle(
-              style: ZetaTextStyles.bodyLarge.copyWith(
+              style: ZetaTextStyles.bodyMedium.copyWith(
                 color: states.contains(MaterialState.disabled) ? zetaColors.textDisabled : zetaColors.textDefault,
                 height: 1.33,
               ),
diff --git a/lib/src/theme/typography.dart b/lib/src/theme/typography.dart
index c5515f42..f9e21f8c 100644
--- a/lib/src/theme/typography.dart
+++ b/lib/src/theme/typography.dart
@@ -14,17 +14,32 @@ class ZetaTextStyles {
   /// As the largest text on the screen, display styles are reserved for short,
   /// important text or numerals. They work best on large screens.
   /// {@endtemplate}
-  static const TextStyle displayLarge = TextStyle(fontSize: 52, fontWeight: FontWeight.w300, height: 64 / 52);
+  static const TextStyle displayLarge = TextStyle(
+    fontSize: 52,
+    fontWeight: FontWeight.w300,
+    height: 60 / 52,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Middle size of the display styles.
   ///
   /// {@macro zeta-text-display}
-  static const TextStyle displayMedium = TextStyle(fontSize: 42, fontWeight: FontWeight.w300, height: 56 / 42);
+  static const TextStyle displayMedium = TextStyle(
+    fontSize: 44,
+    fontWeight: FontWeight.w300,
+    height: 52 / 44,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Smallest of the display styles.
   ///
   /// {@macro zeta-text-display}
-  static const TextStyle displaySmall = TextStyle(fontSize: 36, fontWeight: FontWeight.w300, height: 48 / 36);
+  static const TextStyle displaySmall = TextStyle(
+    fontSize: 36,
+    fontWeight: FontWeight.w300,
+    height: 40 / 36,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Largest of the headline styles.
   ///
@@ -32,17 +47,32 @@ class ZetaTextStyles {
   /// Headline styles are smaller than display styles. They're best-suited for
   /// short, high-emphasis text on smaller screens.
   /// {@endtemplate}
-  static const TextStyle heading1 = TextStyle(fontSize: 32, fontWeight: FontWeight.w500, height: 36 / 32);
+  static const TextStyle heading1 = TextStyle(
+    fontSize: 32,
+    fontWeight: FontWeight.w500,
+    height: 36 / 32,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Middle size of the headline styles.
   ///
   /// {@macro zeta-text-headline}
-  static const TextStyle heading2 = TextStyle(fontSize: 28, fontWeight: FontWeight.w500, height: 32 / 28);
+  static const TextStyle heading2 = TextStyle(
+    fontSize: 28,
+    fontWeight: FontWeight.w500,
+    height: 32 / 28,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Smallest of the headline styles.
   ///
   /// {@macro zeta-text-headline}
-  static const TextStyle heading3 = TextStyle(fontSize: 24, fontWeight: FontWeight.w500, height: 32 / 24);
+  static const TextStyle heading3 = TextStyle(
+    fontSize: 24,
+    fontWeight: FontWeight.w500,
+    height: 28 / 24,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Largest of the title styles.
   ///
@@ -50,36 +80,76 @@ class ZetaTextStyles {
   /// Titles are smaller than headline styles and should be used for shorter,
   /// medium-emphasis text.
   /// {@endtemplate}
-  static const TextStyle titleLarge = TextStyle(fontSize: 32, fontWeight: FontWeight.w500, height: 20 / 28);
+  static const TextStyle titleLarge = TextStyle(
+    fontSize: 20,
+    fontWeight: FontWeight.w500,
+    height: 24 / 20,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Middle size of the title styles.
   ///
   /// {@macro zeta-text-title}
-  static const TextStyle titleMedium = TextStyle(fontSize: 18, fontWeight: FontWeight.w500, height: 24 / 18);
+  static const TextStyle titleMedium = TextStyle(
+    fontSize: 16,
+    fontWeight: FontWeight.w500,
+    height: 20 / 16,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Smallest of the title styles.
   ///
   /// {@macro zeta-text-title}
-  static const TextStyle titleSmall = TextStyle(fontSize: 16, fontWeight: FontWeight.w500, height: 24 / 16);
+  static const TextStyle titleSmall = TextStyle(
+    fontSize: 12,
+    fontWeight: FontWeight.w500,
+    height: 16 / 12,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Largest of the body styles.
   ///
   /// {@template zeta-text-body}
   /// Body styles are used for longer passages of text.
   /// {@endtemplate}
-  static const TextStyle bodyLarge = TextStyle(fontSize: 16, fontWeight: FontWeight.w400, height: 16 / 24);
+  static const TextStyle bodyLarge = TextStyle(
+    fontSize: 20,
+    fontWeight: FontWeight.w400,
+    height: 24 / 20,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Middle size of the body styles.
   ///
   /// {@macro zeta-text-body}
   ///
   /// The default Text style for [Zeta].
-  static const TextStyle bodyMedium = TextStyle(fontSize: 14, fontWeight: FontWeight.w400, height: 20 / 14);
+  static const TextStyle bodyMedium = TextStyle(
+    fontSize: 16,
+    fontWeight: FontWeight.w400,
+    height: 24 / 16,
+    fontFamily: kZetaFontFamily,
+  );
+
+  /// Small size of the body styles.
+  ///
+  /// {@macro zeta-text-body}
+  static const TextStyle bodySmall = TextStyle(
+    fontSize: 14,
+    fontWeight: FontWeight.w400,
+    height: 18 / 14,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Smallest of the body styles.
   ///
   /// {@macro zeta-text-body}
-  static const TextStyle bodySmall = TextStyle(fontSize: 12, fontWeight: FontWeight.w400, height: 16 / 12);
+  static const TextStyle bodyXSmall = TextStyle(
+    fontSize: 12,
+    fontWeight: FontWeight.w400,
+    height: 16 / 12,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Largest of the label styles.
   ///
@@ -90,26 +160,72 @@ class ZetaTextStyles {
   /// {@endtemplate}
   ///
   /// Used for text on [ZetaButton].
-  static const TextStyle labelLarge = TextStyle(fontSize: 16, fontWeight: FontWeight.w500, height: 24 / 16);
+  static const TextStyle labelLarge = TextStyle(
+    fontSize: 16,
+    fontWeight: FontWeight.w500,
+    height: 24 / 16,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Middle size of the label styles.
   ///
   /// {@macro zeta-text-label}
-  static const TextStyle labelMedium = TextStyle(fontSize: 14, fontWeight: FontWeight.w500, height: 20 / 14);
+  static const TextStyle labelMedium = TextStyle(
+    fontSize: 14,
+    fontWeight: FontWeight.w500,
+    height: 20 / 14,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Small size of the label styles.
   ///
   /// {@macro zeta-text-label}
-  static const TextStyle labelSmall = TextStyle(fontSize: 12, fontWeight: FontWeight.w500, height: 16 / 12);
+  static const TextStyle labelSmall = TextStyle(
+    fontSize: 12,
+    fontWeight: FontWeight.w500,
+    height: 16 / 12,
+    fontFamily: kZetaFontFamily,
+  );
 
   /// Label text style used specifically for Indicator.
+  ///
   /// {@macro zeta-text-label}
-  static const TextStyle labelIndicator = TextStyle(fontSize: 12, fontWeight: FontWeight.w500, height: 14 / 12);
+  static const TextStyle labelIndicator = TextStyle(
+    fontSize: 12,
+    fontWeight: FontWeight.w500,
+    height: 14 / 12,
+    fontFamily: kZetaFontFamily,
+  );
 
-  /// Smallest of the label styles.
+  /// Largest heading style.
   ///
-  /// {@macro zeta-text-label}
-  static const TextStyle labelTiny = TextStyle(fontSize: 11, fontWeight: FontWeight.w500, height: 14 / 11);
+  /// {@macro zeta-text-headline}
+  static const TextStyle h1 = heading1;
+
+  /// Second largest heading style.
+  ///
+  /// {@macro zeta-text-headline}
+  static const TextStyle h2 = heading2;
+
+  /// Third largest heading style.
+  ///
+  /// {@macro zeta-text-headline}
+  static const TextStyle h3 = heading3;
+
+  /// Fourth largest heading style.
+  ///
+  /// {@macro zeta-text-headline}
+  static const TextStyle h4 = titleLarge;
+
+  /// Fifth largest heading style.
+  ///
+  /// {@macro zeta-text-headline}
+  static const TextStyle h5 = titleMedium;
+
+  /// Sixth largest heading style.
+  ///
+  /// {@macro zeta-text-headline}
+  static const TextStyle h6 = titleSmall;
 }
 
 /// [ZetaTextStyles] combined into a [TextTheme].

From a1f8ab1f5de673ebeb6d8d6ece3b287af08e4438 Mon Sep 17 00:00:00 2001
From: Luke Walton <thelukewalton@users.noreply.github.com>
Date: Wed, 3 Apr 2024 15:20:10 +0100
Subject: [PATCH 14/17] fix: switch on web (#14)

---
 .../pages/components/badges_widgetbook.dart   |  6 +--
 .../pages/components/banner_widgetbook.dart   |  2 +-
 .../components/snack_bar_widgetbook.dart      |  2 +-
 .../pages/components/switch_widgetbook.dart   |  6 +++
 example/widgetbook/utils/utils.dart           |  2 +-
 .../components/switch/material_switch.dart    | 15 ++++--
 lib/src/components/switch/zeta_switch.dart    | 47 ++++++++++++++++++-
 7 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/example/widgetbook/pages/components/badges_widgetbook.dart b/example/widgetbook/pages/components/badges_widgetbook.dart
index d10cdb0d..4b17f1bd 100644
--- a/example/widgetbook/pages/components/badges_widgetbook.dart
+++ b/example/widgetbook/pages/components/badges_widgetbook.dart
@@ -74,7 +74,7 @@ Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget(
             direction: context.knobs.list(
               label: 'Direction',
               options: ZetaTagDirection.values,
-              labelBuilder: (value) => value.name.split('.').last.capitalize(),
+              labelBuilder: enumLabelBuilder,
             ),
           ),
         ],
@@ -90,12 +90,12 @@ Widget workcloudIndicatorsUseCase(BuildContext context) {
       label: context.knobs.string(label: 'Label', initialValue: 'Label'),
       prioritySize: context.knobs.list(
         label: 'Size',
-        labelBuilder: (value) => value.name.split('.').last.capitalize(),
+        labelBuilder: enumLabelBuilder,
         options: ZetaWidgetSize.values,
       ),
       priorityType: context.knobs.list(
         label: 'Type',
-        labelBuilder: (value) => value.name.split('.').last.capitalize(),
+        labelBuilder: enumLabelBuilder,
         options: ZetaWorkcloudIndicatorType.values,
       ),
       icon: iconKnob(context, rounded: rounded, nullable: true),
diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart
index 85792576..5c796843 100644
--- a/example/widgetbook/pages/components/banner_widgetbook.dart
+++ b/example/widgetbook/pages/components/banner_widgetbook.dart
@@ -14,7 +14,7 @@ Widget bannerUseCase(BuildContext context) {
     type: context.knobs.list(
       label: 'Type',
       options: ZetaSystemBannerStatus.values,
-      labelBuilder: (value) => value.name.split('.').last.capitalize(),
+      labelBuilder: enumLabelBuilder,
     ),
     leadingIcon: iconKnob(context, rounded: rounded, nullable: true),
     titleStart: context.knobs.boolean(label: 'Center title'),
diff --git a/example/widgetbook/pages/components/snack_bar_widgetbook.dart b/example/widgetbook/pages/components/snack_bar_widgetbook.dart
index 7f3deeba..92430c67 100644
--- a/example/widgetbook/pages/components/snack_bar_widgetbook.dart
+++ b/example/widgetbook/pages/components/snack_bar_widgetbook.dart
@@ -22,7 +22,7 @@ Widget snackBarUseCase(BuildContext context) {
         final type = context.knobs.listOrNull<ZetaSnackBarType>(
           label: 'Type',
           options: [null, ...ZetaSnackBarType.values],
-          labelBuilder: (type) => type?.name ?? '',
+          labelBuilder: enumLabelBuilder,
         );
 
         final leadingIcon = iconKnob(
diff --git a/example/widgetbook/pages/components/switch_widgetbook.dart b/example/widgetbook/pages/components/switch_widgetbook.dart
index 50aaf294..0ee2f9c3 100644
--- a/example/widgetbook/pages/components/switch_widgetbook.dart
+++ b/example/widgetbook/pages/components/switch_widgetbook.dart
@@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget switchUseCase(BuildContext context) {
   bool? isOn = false;
@@ -21,6 +22,11 @@ Widget switchUseCase(BuildContext context) {
               ZetaSwitch(
                 value: isOn,
                 onChanged: onChanged,
+                variant: context.knobs.listOrNull(
+                  label: 'Variant',
+                  options: ZetaSwitchType.values,
+                  labelBuilder: enumLabelBuilder,
+                ),
               ),
               Text(isOn == true ? 'On' : 'Off'),
             ],
diff --git a/example/widgetbook/utils/utils.dart b/example/widgetbook/utils/utils.dart
index 4baec50c..207ec12c 100644
--- a/example/widgetbook/utils/utils.dart
+++ b/example/widgetbook/utils/utils.dart
@@ -16,7 +16,7 @@ String iconLabelBuilder(IconData? value, [bool rounded = true]) {
 
 List<IconData> iconOptions(rounded) => rounded ? iconsRounded.values.toList() : iconsSharp.values.toList();
 
-String enumLabelBuilder(Enum value) => value.name.split('.').last.capitalize();
+String enumLabelBuilder(Enum? value) => value?.name.split('.').last.capitalize() ?? '';
 
 IconData? iconKnob(BuildContext context,
     {bool rounded = true, bool nullable = false, String name = 'Icon', final IconData? initial}) {
diff --git a/lib/src/components/switch/material_switch.dart b/lib/src/components/switch/material_switch.dart
index a63ed13f..34cf6d62 100644
--- a/lib/src/components/switch/material_switch.dart
+++ b/lib/src/components/switch/material_switch.dart
@@ -45,8 +45,9 @@ class MaterialSwitch extends StatefulWidget {
     this.focusNode,
     this.onFocusChange,
     this.autofocus = false,
-    // Zeta change: added optional parameter `showHover`.
+    // Zeta change: added optional parameter `showHover` and `thumbSize`.
     this.showHover = false,
+    this.thumbSize,
   })  : assert(activeThumbImage != null || onActiveThumbImageError == null),
         assert(inactiveThumbImage != null || onInactiveThumbImageError == null);
 
@@ -75,8 +76,9 @@ class MaterialSwitch extends StatefulWidget {
   final FocusNode? focusNode;
   final ValueChanged<bool>? onFocusChange;
   final bool autofocus;
-  // Zeta change: added optional parameter `showHover`.
+  // Zeta change: added optional parameters `showHover` and `thumbSize`.
   final bool showHover;
+  final Size? thumbSize;
   final Size size;
 
   @override
@@ -369,7 +371,9 @@ class _MaterialSwitchState extends State<MaterialSwitch> with TickerProviderStat
             ..inactiveIcon = effectiveInactiveIcon
             ..iconTheme = IconTheme.of(context)
             ..thumbShadow = _switchConfig.thumbShadow
-            ..positionController = positionController,
+            ..positionController = positionController
+            // Zeta change: pass thumbsize
+            .._thumbSize = widget.thumbSize,
         ),
       ),
     );
@@ -685,6 +689,8 @@ class _SwitchPainter extends ToggleablePainter {
   ImageProvider? _cachedThumbImage;
   ImageErrorListener? _cachedThumbErrorListener;
   BoxPainter? _cachedThumbPainter;
+  // Zeta change: add `_thumbSize`.
+  Size? _thumbSize;
 
   ShapeDecoration _createDefaultThumbDecoration(Color color, ImageProvider? image, ImageErrorListener? errorListener) {
     return ShapeDecoration(
@@ -730,7 +736,8 @@ class _SwitchPainter extends ToggleablePainter {
       _pressedThumbExtension = 0;
     }
 
-    Size? thumbSize = Size.fromRadius(pressedThumbRadius);
+    // Zeta change: `_thumbSize` override.
+    Size? thumbSize = _thumbSize ?? Size.fromRadius(pressedThumbRadius);
 
     // The thumb contracts slightly during the animation in Material 2.
     final double inset = thumbOffset == null ? 0 : 1.0 - (currentValue - thumbOffset!).abs() * 2.0;
diff --git a/lib/src/components/switch/zeta_switch.dart b/lib/src/components/switch/zeta_switch.dart
index 81dbf7e8..0dd121ae 100644
--- a/lib/src/components/switch/zeta_switch.dart
+++ b/lib/src/components/switch/zeta_switch.dart
@@ -8,16 +8,33 @@ import 'material_switch.dart';
 
 const _sizeAndroid = Size(48, 24);
 const _sizeIOS = Size(56, 32);
+const _sizeWeb = Size(64, 32);
+
+/// Variants of [ZetaSwitch].
+enum ZetaSwitchType {
+  /// 64 x 32
+  web,
+
+  /// 48 x 24
+  android,
+
+  /// 56 x 32
+  ios,
+}
 
 /// Zeta Switch.
 ///
 /// Switch can turn an option on or off.
+///
+/// Switch has styles for Android, iOS and Web.
+// TODO(switch): Add web icon support.
 class ZetaSwitch extends StatelessWidget {
   /// Constructor for [ZetaSwitch].
   const ZetaSwitch({
     super.key,
     this.value = false,
     this.onChanged,
+    this.variant,
   });
 
   /// Determines whether the switch is on or off.
@@ -26,19 +43,44 @@ class ZetaSwitch extends StatelessWidget {
   /// Called when the value of the switch should change.
   final ValueChanged<bool?>? onChanged;
 
+  /// Variant of switch for different platforms.
+  ///
+  /// Defaults to match the platform, or falls back to web.
+  final ZetaSwitchType? variant;
+
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties
       ..add(FlagProperty('value', value: value, ifTrue: 'on', ifFalse: 'off', showName: true))
-      ..add(ObjectFlagProperty<ValueChanged<bool>>('onChanged', onChanged, ifNull: 'disabled'));
+      ..add(ObjectFlagProperty<ValueChanged<bool>>('onChanged', onChanged, ifNull: 'disabled'))
+      ..add(EnumProperty<ZetaSwitchType?>('variant', variant));
+  }
+
+  ZetaSwitchType get _variant {
+    if (variant != null) return variant!;
+    if (kIsWeb) return ZetaSwitchType.web;
+    return switch (Platform.operatingSystem) {
+      'ios' => ZetaSwitchType.ios,
+      'android' => ZetaSwitchType.android,
+      _ => ZetaSwitchType.web,
+    };
+  }
+
+  Size get _size {
+    return switch (_variant) {
+      ZetaSwitchType.ios => _sizeIOS,
+      ZetaSwitchType.android => _sizeAndroid,
+      _ => _sizeWeb,
+    };
   }
 
   @override
   Widget build(BuildContext context) {
     final zetaColors = Zeta.of(context).colors;
+
     return MaterialSwitch(
-      size: Platform.isIOS ? _sizeIOS : _sizeAndroid,
+      size: _size,
       trackOutlineWidth: const MaterialStatePropertyAll(0),
       trackOutlineColor: const MaterialStatePropertyAll(Colors.transparent),
       trackColor: MaterialStateProperty.resolveWith((states) {
@@ -53,6 +95,7 @@ class ZetaSwitch extends StatelessWidget {
       ),
       value: value ?? false,
       onChanged: onChanged,
+      thumbSize: _variant == ZetaSwitchType.web ? const Size.square(ZetaSpacing.m) : null,
     );
   }
 }

From d3e1ca402c3f93ad512138d14ffdd0937ec88699 Mon Sep 17 00:00:00 2001
From: atanasyordanov21 <63714308+atanasyordanov21@users.noreply.github.com>
Date: Thu, 4 Apr 2024 10:51:39 +0300
Subject: [PATCH 15/17] Component date input (#12)

* create ZetaDateInput

* create different ZetaDateInput variants

* fix show error style

* date validation and input mask; documentation for ZetaDateInput properties

* create widgetbook

* changes according to comments
---
 example/lib/home.dart                         |   2 +
 .../pages/components/date_input_example.dart  | 107 ++++++
 example/widgetbook/main.dart                  |   2 +
 .../components/date_input_widgetbook.dart     |  55 +++
 lib/src/components/date_input/date_input.dart | 328 ++++++++++++++++++
 lib/zeta_flutter.dart                         |   1 +
 pubspec.yaml                                  |   2 +
 7 files changed, 497 insertions(+)
 create mode 100644 example/lib/pages/components/date_input_example.dart
 create mode 100644 example/widgetbook/pages/components/date_input_widgetbook.dart
 create mode 100644 lib/src/components/date_input/date_input.dart

diff --git a/example/lib/home.dart b/example/lib/home.dart
index f59ec323..329e411f 100644
--- a/example/lib/home.dart
+++ b/example/lib/home.dart
@@ -9,6 +9,7 @@ import 'package:zeta_example/pages/components/breadcrumbs_example.dart';
 import 'package:zeta_example/pages/components/button_example.dart';
 import 'package:zeta_example/pages/components/checkbox_example.dart';
 import 'package:zeta_example/pages/components/chip_example.dart';
+import 'package:zeta_example/pages/components/date_input_example.dart';
 import 'package:zeta_example/pages/components/dialpad_example.dart';
 import 'package:zeta_example/pages/components/dropdown_example.dart';
 import 'package:zeta_example/pages/components/list_item_example.dart';
@@ -54,6 +55,7 @@ final List<Component> components = [
   Component(DialPadExample.name, (context) => const DialPadExample()),
   Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
   Component(SwitchExample.name, (context) => const SwitchExample()),
+  Component(DateInputExample.name, (context) => const DateInputExample()),
 ];
 
 final List<Component> theme = [
diff --git a/example/lib/pages/components/date_input_example.dart b/example/lib/pages/components/date_input_example.dart
new file mode 100644
index 00000000..2f8c9470
--- /dev/null
+++ b/example/lib/pages/components/date_input_example.dart
@@ -0,0 +1,107 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class DateInputExample extends StatefulWidget {
+  static const String name = 'DateInput';
+
+  const DateInputExample({Key? key}) : super(key: key);
+
+  @override
+  State<DateInputExample> createState() => _DateInputExampleState();
+}
+
+class _DateInputExampleState extends State<DateInputExample> {
+  String? _errorText;
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: 'Date Input',
+      child: SingleChildScrollView(
+        child: Column(
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Rounded', style: ZetaTextStyles.titleSmall),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaDateInput(
+                label: 'Birthdate',
+                hint: 'Enter birthdate',
+                hasError: _errorText != null,
+                errorText: _errorText ?? 'Invalid date',
+                onChanged: (value) {
+                  if (value == null) return setState(() => _errorText = null);
+                  final now = DateTime.now();
+                  setState(
+                    () => _errorText = value.difference(DateTime(now.year, now.month, now.day)).inDays > 0
+                        ? 'Birthdate cannot be in the future'
+                        : null,
+                  );
+                },
+              ),
+            ),
+            Divider(color: Colors.grey[200]),
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Sharp', style: ZetaTextStyles.titleSmall),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaDateInput(
+                label: 'Label',
+                hint: 'Default hint text',
+                errorText: 'Oops! Error hint text',
+                rounded: false,
+                datePattern: 'yyyy-MM-dd',
+              ),
+            ),
+            Divider(color: Colors.grey[200]),
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Disabled', style: ZetaTextStyles.titleSmall),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaDateInput(
+                label: 'Label',
+                hint: 'Default hint text',
+                enabled: false,
+              ),
+            ),
+            Divider(color: Colors.grey[200]),
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Medium', style: ZetaTextStyles.titleSmall),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaDateInput(
+                label: 'Label',
+                hint: 'Default hint text',
+                errorText: 'Oops! Error hint text',
+                size: ZetaDateInputSize.medium,
+              ),
+            ),
+            Divider(color: Colors.grey[200]),
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Small', style: ZetaTextStyles.titleSmall),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaDateInput(
+                label: 'Label',
+                hint: 'Default hint text',
+                errorText: 'Oops! Error hint text',
+                size: ZetaDateInputSize.small,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index f88d48a5..e75ae793 100644
--- a/example/widgetbook/main.dart
+++ b/example/widgetbook/main.dart
@@ -12,6 +12,7 @@ import 'pages/components/breadcrumbs_widgetbook.dart';
 import 'pages/components/button_widgetbook.dart';
 import 'pages/components/checkbox_widgetbook.dart';
 import 'pages/components/chip_widgetbook.dart';
+import 'pages/components/date_input_widgetbook.dart';
 import 'pages/components/dial_pad_widgetbook.dart';
 import 'pages/components/dropdown_widgetbook.dart';
 import 'pages/components/in_page_banner_widgetbook.dart';
@@ -98,6 +99,7 @@ class HotReload extends StatelessWidget {
               name: 'Snack Bar',
               builder: (context) => snackBarUseCase(context),
             ),
+            WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)),
             WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),
diff --git a/example/widgetbook/pages/components/date_input_widgetbook.dart b/example/widgetbook/pages/components/date_input_widgetbook.dart
new file mode 100644
index 00000000..eb3d7cf1
--- /dev/null
+++ b/example/widgetbook/pages/components/date_input_widgetbook.dart
@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget dateInputUseCase(BuildContext context) {
+  String? _errorText;
+
+  return WidgetbookTestWidget(
+    widget: StatefulBuilder(
+      builder: (context, setState) {
+        final errorText = context.knobs.string(
+          label: 'Error message for invalid date',
+          initialValue: 'Invalid date',
+        );
+        final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
+        final enabled = context.knobs.boolean(label: 'Enabled', initialValue: true);
+        final size = context.knobs.list<ZetaDateInputSize>(
+          label: 'Size',
+          options: ZetaDateInputSize.values,
+          labelBuilder: (size) => size.name,
+        );
+        final datePattern = context.knobs.list<String>(
+          label: 'Date pattern',
+          options: ['MM/dd/yyyy', 'dd/MM/yyyy', 'dd.MM.yyyy', 'yyyy-MM-dd'],
+          labelBuilder: (pattern) => pattern,
+        );
+
+        return Padding(
+          padding: const EdgeInsets.all(ZetaSpacing.x5),
+          child: ZetaDateInput(
+            size: size,
+            rounded: rounded,
+            enabled: enabled,
+            label: 'Birthdate',
+            hint: 'Enter birthdate',
+            datePattern: datePattern,
+            hasError: _errorText != null,
+            errorText: _errorText ?? errorText,
+            onChanged: (value) {
+              if (value == null) return setState(() => _errorText = null);
+              final now = DateTime.now();
+              setState(
+                () => _errorText = value.difference(DateTime(now.year, now.month, now.day)).inDays > 0
+                    ? 'Birthdate cannot be in the future'
+                    : null,
+              );
+            },
+          ),
+        );
+      },
+    ),
+  );
+}
diff --git a/lib/src/components/date_input/date_input.dart b/lib/src/components/date_input/date_input.dart
new file mode 100644
index 00000000..1de3d6f6
--- /dev/null
+++ b/lib/src/components/date_input/date_input.dart
@@ -0,0 +1,328 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';
+import '../../../zeta_flutter.dart';
+
+/// [ZetaDateInput] size
+enum ZetaDateInputSize {
+  /// [large] 48 pixels height of the input field.
+  large,
+
+  /// [medium] 40 pixels height of the input field.
+  medium,
+
+  /// [small] 32 pixels height of the input field.
+  small,
+}
+
+/// ZetaDateInput allows entering date in a pre-defined format.
+/// Validation is performed to make sure the date is valid
+/// and is in the proper format.
+class ZetaDateInput extends StatefulWidget {
+  /// Constructor for [ZetaDateInput].
+  ///
+  /// Example usage how to provide custom validanions
+  /// via `onChanged`, `hasError` and `errorText`:
+  /// ```dart
+  /// ZetaDateInput(
+  ///   label: 'Birthdate',
+  ///   hint: 'Enter birthdate',
+  ///   hasError: _errorText != null,
+  ///   errorText: _errorText ?? 'Invalid date',
+  ///   onChanged: (value) {
+  ///     if (value == null) return setState(() => _errorText = null);
+  ///     final now = DateTime.now();
+  ///     setState(
+  ///       () => _errorText = value.difference(
+  ///         DateTime(now.year, now.month, now.day)).inDays > 0
+  ///           ? 'Birthdate cannot be in the future'
+  ///           : null,
+  ///     );
+  ///   },
+  /// )
+  /// ```
+  const ZetaDateInput({
+    super.key,
+    this.size,
+    this.label,
+    this.hint,
+    this.enabled = true,
+    this.rounded = true,
+    this.hasError = false,
+    this.errorText,
+    this.onChanged,
+    this.datePattern = 'MM/dd/yyyy',
+  });
+
+  /// Determines the size of the input field.
+  /// Default is `ZetaDateInputSize.large`
+  final ZetaDateInputSize? size;
+
+  /// If provided, displays a label above the input field.
+  final String? label;
+
+  /// If provided, displays a hint below the input field.
+  final String? hint;
+
+  /// Determines if the input field should be enabled (default) or disabled.
+  final bool enabled;
+
+  /// Determines if the input field corners are rounded (default) or sharp.
+  final bool rounded;
+
+  /// Determines if the input field should be displayed in error style.
+  /// Default is `false`.
+  /// If `enabled` is `false`, this has no effect.
+  final bool hasError;
+
+  /// In combination with `hasError: true`, provides the error message
+  /// to be displayed below the input field.
+  ///
+  /// If `hasError` is false, then `errorText` should provide
+  /// date validation error message.
+  ///
+  /// See the example in the [ZetaDateInput] documentation.
+  final String? errorText;
+
+  /// A callback, which provides the entered date, or `null`, if invalid.
+  ///
+  /// See the example in the [ZetaDateInput] documentation
+  /// how to provide custom validations
+  /// in combination with `hasError` and `errorText`.
+  final void Function(DateTime?)? onChanged;
+
+  /// `datePattern` is needed for the date format validation as described here:
+  ///  https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html
+  final String datePattern;
+
+  @override
+  State<ZetaDateInput> createState() => _ZetaDateInputState();
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(EnumProperty<ZetaDateInputSize>('size', size))
+      ..add(StringProperty('label', label))
+      ..add(StringProperty('hint', hint))
+      ..add(DiagnosticsProperty<bool>('enabled', enabled))
+      ..add(DiagnosticsProperty<bool>('rounded', rounded))
+      ..add(DiagnosticsProperty<bool>('hasError', hasError))
+      ..add(StringProperty('errorText', errorText))
+      ..add(ObjectFlagProperty<void Function(DateTime? p1)?>.has('onChanged', onChanged))
+      ..add(StringProperty('datePattern', datePattern));
+  }
+}
+
+class _ZetaDateInputState extends State<ZetaDateInput> {
+  final _controller = TextEditingController();
+  late ZetaDateInputSize _size;
+  late final String _hintText;
+  late final MaskTextInputFormatter _dateFormatter;
+  bool _invalidDate = false;
+  bool _hasError = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _hintText = widget.datePattern.toLowerCase();
+    _dateFormatter = MaskTextInputFormatter(
+      mask: _hintText.replaceAll(RegExp('[a-z]'), '#'),
+      filter: {'#': RegExp('[0-9]')},
+      type: MaskAutoCompletionType.eager,
+    );
+    _setParams();
+  }
+
+  @override
+  void didUpdateWidget(ZetaDateInput oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _setParams();
+  }
+
+  void _setParams() {
+    _size = widget.size ?? ZetaDateInputSize.large;
+    _hasError = widget.hasError;
+  }
+
+  void _onChanged() {
+    final value = _dateFormatter.getMaskedText().trim();
+    final date = DateFormat(widget.datePattern).tryParseStrict(value);
+    _invalidDate = value.isNotEmpty && date == null;
+    widget.onChanged?.call(date);
+    setState(() {});
+  }
+
+  void _clear() {
+    _controller.clear();
+    setState(() {
+      _invalidDate = false;
+      _hasError = false;
+    });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final zeta = Zeta.of(context);
+    final hasError = _invalidDate || _hasError;
+    final showError = hasError && widget.errorText != null;
+    final hintErrorColor = widget.enabled
+        ? showError
+            ? zeta.colors.red
+            : zeta.colors.cool.shade70
+        : zeta.colors.cool.shade50;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        if (widget.label != null)
+          Padding(
+            padding: const EdgeInsets.only(bottom: 5),
+            child: Text(
+              widget.label!,
+              style: ZetaTextStyles.bodyLarge.copyWith(
+                height: 1.33,
+                color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50,
+              ),
+            ),
+          ),
+        TextFormField(
+          enabled: widget.enabled,
+          controller: _controller,
+          inputFormatters: [_dateFormatter],
+          keyboardType: TextInputType.number,
+          onChanged: (_) => _onChanged(),
+          style: ZetaTextStyles.bodyLarge.copyWith(height: 1.5),
+          decoration: InputDecoration(
+            isDense: true,
+            contentPadding: EdgeInsets.symmetric(
+              horizontal: 10,
+              vertical: _inputVerticalPadding(_size),
+            ),
+            hintText: _hintText,
+            suffixIcon: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                if (_controller.text.isNotEmpty)
+                  IconButton(
+                    visualDensity: const VisualDensity(
+                      horizontal: -4,
+                      vertical: -4,
+                    ),
+                    onPressed: _clear,
+                    icon: Icon(
+                      widget.rounded ? ZetaIcons.cancel_round : ZetaIcons.cancel_sharp,
+                      color: zeta.colors.cool.shade70,
+                      size: _iconSize(_size),
+                    ),
+                  ),
+                Padding(
+                  padding: const EdgeInsets.only(left: 6, right: 10),
+                  child: Icon(
+                    widget.rounded ? ZetaIcons.calendar_3_day_round : ZetaIcons.calendar_3_day_sharp,
+                    color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50,
+                    size: _iconSize(_size),
+                  ),
+                ),
+              ],
+            ),
+            suffixIconConstraints: const BoxConstraints(
+              minHeight: ZetaSpacing.m,
+              minWidth: ZetaSpacing.m,
+            ),
+            hintStyle: ZetaTextStyles.bodyLarge.copyWith(
+              color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50,
+              height: 1.5,
+            ),
+            filled: !widget.enabled || hasError ? true : null,
+            fillColor: widget.enabled
+                ? hasError
+                    ? zeta.colors.red.shade10
+                    : null
+                : zeta.colors.cool.shade30,
+            enabledBorder: hasError
+                ? _errorInputBorder(zeta, rounded: widget.rounded)
+                : _defaultInputBorder(zeta, rounded: widget.rounded),
+            focusedBorder: hasError
+                ? _errorInputBorder(zeta, rounded: widget.rounded)
+                : _focusedInputBorder(zeta, rounded: widget.rounded),
+            disabledBorder: _defaultInputBorder(zeta, rounded: widget.rounded),
+            errorBorder: _errorInputBorder(zeta, rounded: widget.rounded),
+            focusedErrorBorder: _errorInputBorder(zeta, rounded: widget.rounded),
+          ),
+        ),
+        if (widget.hint != null || showError)
+          Padding(
+            padding: const EdgeInsets.only(top: 5),
+            child: Row(
+              children: [
+                Padding(
+                  padding: const EdgeInsets.only(right: 8),
+                  child: Icon(
+                    showError && widget.enabled
+                        ? (widget.rounded ? ZetaIcons.error_round : ZetaIcons.error_sharp)
+                        : (widget.rounded ? ZetaIcons.info_round : ZetaIcons.info_sharp),
+                    size: ZetaSpacing.b,
+                    color: hintErrorColor,
+                  ),
+                ),
+                Expanded(
+                  child: Text(
+                    showError && widget.enabled ? widget.errorText! : widget.hint!,
+                    style: ZetaTextStyles.bodySmall.copyWith(
+                      color: hintErrorColor,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+      ],
+    );
+  }
+
+  double _inputVerticalPadding(ZetaDateInputSize size) => switch (size) {
+        ZetaDateInputSize.large => ZetaSpacing.x3,
+        ZetaDateInputSize.medium => ZetaSpacing.x2,
+        ZetaDateInputSize.small => ZetaSpacing.x1,
+      };
+
+  double _iconSize(ZetaDateInputSize size) => switch (size) {
+        ZetaDateInputSize.large => ZetaSpacing.x6,
+        ZetaDateInputSize.medium => ZetaSpacing.x5,
+        ZetaDateInputSize.small => ZetaSpacing.x4,
+      };
+
+  OutlineInputBorder _defaultInputBorder(
+    Zeta zeta, {
+    required bool rounded,
+  }) =>
+      OutlineInputBorder(
+        borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.none,
+        borderSide: BorderSide(color: zeta.colors.cool.shade40),
+      );
+
+  OutlineInputBorder _focusedInputBorder(
+    Zeta zeta, {
+    required bool rounded,
+  }) =>
+      OutlineInputBorder(
+        borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.none,
+        borderSide: BorderSide(color: zeta.colors.blue.shade50),
+      );
+
+  OutlineInputBorder _errorInputBorder(
+    Zeta zeta, {
+    required bool rounded,
+  }) =>
+      OutlineInputBorder(
+        borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.none,
+        borderSide: BorderSide(color: zeta.colors.red.shade50),
+      );
+}
diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart
index 7bcbbd40..6ee239cc 100644
--- a/lib/zeta_flutter.dart
+++ b/lib/zeta_flutter.dart
@@ -22,6 +22,7 @@ export 'src/components/buttons/fab.dart';
 export 'src/components/buttons/icon_button.dart';
 export 'src/components/checkbox/checkbox.dart';
 export 'src/components/chips/chip.dart';
+export 'src/components/date_input/date_input.dart';
 export 'src/components/dial_pad/dial_pad.dart';
 export 'src/components/dropdown/dropdown.dart';
 export 'src/components/list_item/list_item.dart';
diff --git a/pubspec.yaml b/pubspec.yaml
index 7f88b8e6..302b2225 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -23,6 +23,8 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  intl: ^0.19.0
+  mask_text_input_formatter: ^2.9.0
 
 dev_dependencies:
   zds_analysis: ^1.0.0

From 39528a3bf2b78ee32255e5863ee32a50639f74aa Mon Sep 17 00:00:00 2001
From: atanasyordanov21 <63714308+atanasyordanov21@users.noreply.github.com>
Date: Fri, 5 Apr 2024 16:08:00 +0300
Subject: [PATCH 16/17] Component date input (#16)

* create ZetaDateInput

* create different ZetaDateInput variants

* fix show error style

* date validation and input mask; documentation for ZetaDateInput properties

* create widgetbook

* changes according to comments

* fix Typography of Date Input

* restore

* remove text line height
---
 .../pages/components/date_input_example.dart  | 10 +++++-----
 lib/src/components/date_input/date_input.dart | 20 ++++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/example/lib/pages/components/date_input_example.dart b/example/lib/pages/components/date_input_example.dart
index 2f8c9470..83ac0812 100644
--- a/example/lib/pages/components/date_input_example.dart
+++ b/example/lib/pages/components/date_input_example.dart
@@ -23,7 +23,7 @@ class _DateInputExampleState extends State<DateInputExample> {
           children: [
             Padding(
               padding: const EdgeInsets.only(top: 20),
-              child: Text('Rounded', style: ZetaTextStyles.titleSmall),
+              child: Text('Rounded', style: ZetaTextStyles.titleMedium),
             ),
             Padding(
               padding: const EdgeInsets.all(20),
@@ -46,7 +46,7 @@ class _DateInputExampleState extends State<DateInputExample> {
             Divider(color: Colors.grey[200]),
             Padding(
               padding: const EdgeInsets.only(top: 20),
-              child: Text('Sharp', style: ZetaTextStyles.titleSmall),
+              child: Text('Sharp', style: ZetaTextStyles.titleMedium),
             ),
             Padding(
               padding: const EdgeInsets.all(20),
@@ -61,7 +61,7 @@ class _DateInputExampleState extends State<DateInputExample> {
             Divider(color: Colors.grey[200]),
             Padding(
               padding: const EdgeInsets.only(top: 20),
-              child: Text('Disabled', style: ZetaTextStyles.titleSmall),
+              child: Text('Disabled', style: ZetaTextStyles.titleMedium),
             ),
             Padding(
               padding: const EdgeInsets.all(20),
@@ -74,7 +74,7 @@ class _DateInputExampleState extends State<DateInputExample> {
             Divider(color: Colors.grey[200]),
             Padding(
               padding: const EdgeInsets.only(top: 20),
-              child: Text('Medium', style: ZetaTextStyles.titleSmall),
+              child: Text('Medium', style: ZetaTextStyles.titleMedium),
             ),
             Padding(
               padding: const EdgeInsets.all(20),
@@ -88,7 +88,7 @@ class _DateInputExampleState extends State<DateInputExample> {
             Divider(color: Colors.grey[200]),
             Padding(
               padding: const EdgeInsets.only(top: 20),
-              child: Text('Small', style: ZetaTextStyles.titleSmall),
+              child: Text('Small', style: ZetaTextStyles.titleMedium),
             ),
             Padding(
               padding: const EdgeInsets.all(20),
diff --git a/lib/src/components/date_input/date_input.dart b/lib/src/components/date_input/date_input.dart
index 1de3d6f6..83c07811 100644
--- a/lib/src/components/date_input/date_input.dart
+++ b/lib/src/components/date_input/date_input.dart
@@ -186,8 +186,7 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
             padding: const EdgeInsets.only(bottom: 5),
             child: Text(
               widget.label!,
-              style: ZetaTextStyles.bodyLarge.copyWith(
-                height: 1.33,
+              style: ZetaTextStyles.bodyMedium.copyWith(
                 color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50,
               ),
             ),
@@ -198,7 +197,7 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
           inputFormatters: [_dateFormatter],
           keyboardType: TextInputType.number,
           onChanged: (_) => _onChanged(),
-          style: ZetaTextStyles.bodyLarge.copyWith(height: 1.5),
+          style: _size == ZetaDateInputSize.small ? ZetaTextStyles.bodyXSmall : ZetaTextStyles.bodyMedium,
           decoration: InputDecoration(
             isDense: true,
             contentPadding: EdgeInsets.symmetric(
@@ -236,10 +235,13 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
               minHeight: ZetaSpacing.m,
               minWidth: ZetaSpacing.m,
             ),
-            hintStyle: ZetaTextStyles.bodyLarge.copyWith(
-              color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50,
-              height: 1.5,
-            ),
+            hintStyle: _size == ZetaDateInputSize.small
+                ? ZetaTextStyles.bodyXSmall.copyWith(
+                    color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50,
+                  )
+                : ZetaTextStyles.bodyMedium.copyWith(
+                    color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50,
+                  ),
             filled: !widget.enabled || hasError ? true : null,
             fillColor: widget.enabled
                 ? hasError
@@ -275,7 +277,7 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
                 Expanded(
                   child: Text(
                     showError && widget.enabled ? widget.errorText! : widget.hint!,
-                    style: ZetaTextStyles.bodySmall.copyWith(
+                    style: ZetaTextStyles.bodyXSmall.copyWith(
                       color: hintErrorColor,
                     ),
                   ),
@@ -290,7 +292,7 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
   double _inputVerticalPadding(ZetaDateInputSize size) => switch (size) {
         ZetaDateInputSize.large => ZetaSpacing.x3,
         ZetaDateInputSize.medium => ZetaSpacing.x2,
-        ZetaDateInputSize.small => ZetaSpacing.x1,
+        ZetaDateInputSize.small => ZetaSpacing.x2,
       };
 
   double _iconSize(ZetaDateInputSize size) => switch (size) {

From 21fa72b820e8c351996c90d60290d69b173af184 Mon Sep 17 00:00:00 2001
From: sd-athlon <163880004+sd-athlon@users.noreply.github.com>
Date: Wed, 10 Apr 2024 13:26:58 +0300
Subject: [PATCH 17/17] feat(main): Stepper (#17)

* feat(main): Stepper

* Add optional content, remove listview and fix inkwell

* [automated commit] lint format and import sort

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 README.md                                     |   4 +-
 example/lib/home.dart                         |   2 +
 .../lib/pages/components/stepper_example.dart | 144 ++++++
 example/widgetbook/main.dart                  |   5 +
 .../pages/components/stepper_widgetbook.dart  |  66 +++
 lib/src/components/stepper/stepper.dart       | 414 ++++++++++++++++++
 lib/zeta_flutter.dart                         |   1 +
 7 files changed, 635 insertions(+), 1 deletion(-)
 create mode 100644 example/lib/pages/components/stepper_example.dart
 create mode 100644 example/widgetbook/pages/components/stepper_widgetbook.dart
 create mode 100644 lib/src/components/stepper/stepper.dart

diff --git a/README.md b/README.md
index 703ca8e7..1aa10b68 100644
--- a/README.md
+++ b/README.md
@@ -94,7 +94,9 @@ With these configurations, Zeta makes it easy to achieve consistent theming thro
 
 ## Viewing the components
 
-To view examples of all the components in the library, you can run the example app in this repo or go to [Zeta](https://zeta-ds.web.app/)
+To view examples of all the components in the library, you can pull this repo and run either the example app or widgetbook instance.
+
+You can also view the latest release at [Zeta](https://zeta-ds.web.app/) or the latest commits to main [here](https://zeta-flutter-main.web.app/).
 
 ## Licensing
 
diff --git a/example/lib/home.dart b/example/lib/home.dart
index 329e411f..8c6465f4 100644
--- a/example/lib/home.dart
+++ b/example/lib/home.dart
@@ -15,6 +15,7 @@ import 'package:zeta_example/pages/components/dropdown_example.dart';
 import 'package:zeta_example/pages/components/list_item_example.dart';
 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/stepper_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';
@@ -51,6 +52,7 @@ final List<Component> components = [
   Component(DropdownExample.name, (context) => const DropdownExample()),
   Component(ProgressExample.name, (context) => const ProgressExample()),
   Component(SnackBarExample.name, (context) => const SnackBarExample()),
+  Component(StepperExample.name, (context) => const StepperExample()),
   Component(TabsExample.name, (context) => const TabsExample()),
   Component(DialPadExample.name, (context) => const DialPadExample()),
   Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
diff --git a/example/lib/pages/components/stepper_example.dart b/example/lib/pages/components/stepper_example.dart
new file mode 100644
index 00000000..594b43da
--- /dev/null
+++ b/example/lib/pages/components/stepper_example.dart
@@ -0,0 +1,144 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class StepperExample extends StatefulWidget {
+  const StepperExample({super.key});
+
+  static const String name = 'Stepper';
+
+  @override
+  State<StepperExample> createState() => _StepperExampleState();
+}
+
+class _StepperExampleState extends State<StepperExample> {
+  int _roundedHorizontalStep = 0;
+  int _sharpHorizontalStep = 0;
+  int _verticalStep = 0;
+
+  ZetaStepType _getForStepIndex({
+    required int currentStep,
+    required int stepIndex,
+  }) {
+    if (currentStep == stepIndex) return ZetaStepType.enabled;
+    if (currentStep > stepIndex) return ZetaStepType.complete;
+
+    return ZetaStepType.disabled;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: StepperExample.name,
+      child: SingleChildScrollView(
+        child: Column(
+          children: [
+            SizedBox(
+              height: 150,
+              child: ZetaStepper(
+                currentStep: _roundedHorizontalStep,
+                onStepTapped: (index) => setState(() => _roundedHorizontalStep = index),
+                steps: [
+                  ZetaStep(
+                    type: _getForStepIndex(
+                      currentStep: _roundedHorizontalStep,
+                      stepIndex: 0,
+                    ),
+                    title: Text("Title"),
+                    content: Text("Content"),
+                  ),
+                  ZetaStep(
+                    type: _getForStepIndex(
+                      currentStep: _roundedHorizontalStep,
+                      stepIndex: 1,
+                    ),
+                    title: Text("Title 2"),
+                  ),
+                  ZetaStep(
+                    type: _getForStepIndex(
+                      currentStep: _roundedHorizontalStep,
+                      stepIndex: 2,
+                    ),
+                    title: Text("Title 3"),
+                    content: Text("Content 3"),
+                  ),
+                ],
+              ),
+            ),
+            SizedBox(
+              height: 150,
+              child: ZetaStepper(
+                rounded: false,
+                currentStep: _sharpHorizontalStep,
+                onStepTapped: (index) => setState(() => _sharpHorizontalStep = index),
+                steps: [
+                  ZetaStep(
+                    type: _getForStepIndex(
+                      currentStep: _sharpHorizontalStep,
+                      stepIndex: 0,
+                    ),
+                    title: Text("Title"),
+                    content: Text("Content"),
+                  ),
+                  ZetaStep(
+                    type: _getForStepIndex(
+                      currentStep: _sharpHorizontalStep,
+                      stepIndex: 1,
+                    ),
+                    title: Text("Title 2"),
+                    content: Text("Content 2"),
+                  ),
+                  ZetaStep(
+                    type: _getForStepIndex(
+                      currentStep: _sharpHorizontalStep,
+                      stepIndex: 2,
+                    ),
+                    title: Text("Title 3"),
+                    content: Text("Content 3"),
+                  ),
+                ],
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.l),
+              child: ZetaStepper(
+                type: ZetaStepperType.vertical,
+                currentStep: _verticalStep,
+                onStepTapped: (index) => setState(() => _verticalStep = index),
+                steps: [
+                  ZetaStep(
+                    type: _getForStepIndex(
+                      currentStep: _verticalStep,
+                      stepIndex: 0,
+                    ),
+                    title: Text("Title"),
+                    subtitle: Text("Step Number"),
+                    content: Text("Content"),
+                  ),
+                  ZetaStep(
+                    type: _getForStepIndex(
+                      currentStep: _verticalStep,
+                      stepIndex: 1,
+                    ),
+                    title: Text("Title 2"),
+                    subtitle: Text("Step Number"),
+                    content: Text("Content 2"),
+                  ),
+                  ZetaStep(
+                    type: _getForStepIndex(
+                      currentStep: _verticalStep,
+                      stepIndex: 2,
+                    ),
+                    title: Text("Title 3"),
+                    subtitle: Text("Step Number"),
+                    content: Text("Content 3"),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index e75ae793..0a348249 100644
--- a/example/widgetbook/main.dart
+++ b/example/widgetbook/main.dart
@@ -21,6 +21,7 @@ import 'pages/components/navigation_bar_widgetbook.dart';
 import 'pages/components/password_input_widgetbook.dart';
 import 'pages/components/progress_widgetbook.dart';
 import 'pages/components/radio_widgetbook.dart';
+import 'pages/components/stepper_widgetbook.dart';
 import 'pages/components/switch_widgetbook.dart';
 import 'pages/components/snack_bar_widgetbook.dart';
 import 'pages/components/tabs_widgetbook.dart';
@@ -100,6 +101,10 @@ class HotReload extends StatelessWidget {
               builder: (context) => snackBarUseCase(context),
             ),
             WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)),
+            WidgetbookUseCase(
+              name: 'Stepper',
+              builder: (context) => stepperUseCase(context),
+            ),
             WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),
diff --git a/example/widgetbook/pages/components/stepper_widgetbook.dart b/example/widgetbook/pages/components/stepper_widgetbook.dart
new file mode 100644
index 00000000..4c06303f
--- /dev/null
+++ b/example/widgetbook/pages/components/stepper_widgetbook.dart
@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget stepperUseCase(BuildContext context) {
+  int currentStep = 0;
+
+  ZetaStepType getForStepIndex(int stepIndex) {
+    if (currentStep == stepIndex) return ZetaStepType.enabled;
+    if (currentStep > stepIndex) return ZetaStepType.complete;
+
+    return ZetaStepType.disabled;
+  }
+
+  final type = context.knobs.list(
+    label: "Type",
+    options: [
+      ZetaStepperType.horizontal,
+      ZetaStepperType.vertical,
+    ],
+    initialOption: ZetaStepperType.horizontal,
+    labelBuilder: (type) => type.name,
+  );
+
+  final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
+
+  final enabledContent = context.knobs.boolean(label: 'Enabled Content', initialValue: true);
+
+  return WidgetbookTestWidget(
+    widget: StatefulBuilder(
+      builder: (context, setState) {
+        return Container(
+          height: type == ZetaStepperType.horizontal ? 300 : null,
+          padding: EdgeInsets.all(
+            type == ZetaStepperType.horizontal ? 0.0 : ZetaSpacing.l,
+          ),
+          child: ZetaStepper(
+            currentStep: currentStep,
+            onStepTapped: (index) => setState(() => currentStep = index),
+            rounded: type == ZetaStepperType.horizontal ? rounded : true,
+            type: type,
+            steps: [
+              ZetaStep(
+                type: getForStepIndex(0),
+                title: Text("Title"),
+                content: enabledContent ? Text("Content") : null,
+              ),
+              ZetaStep(
+                type: getForStepIndex(1),
+                title: Text("Title 2"),
+                content: enabledContent ? Text("Content 2") : null,
+              ),
+              ZetaStep(
+                type: getForStepIndex(2),
+                title: Text("Title 3"),
+                content: enabledContent ? Text("Content 3") : null,
+              ),
+            ],
+          ),
+        );
+      },
+    ),
+  );
+}
diff --git a/lib/src/components/stepper/stepper.dart b/lib/src/components/stepper/stepper.dart
new file mode 100644
index 00000000..25534fc9
--- /dev/null
+++ b/lib/src/components/stepper/stepper.dart
@@ -0,0 +1,414 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import '../../../zeta_flutter.dart';
+
+/// Zeta stepper widget that displays progress through a sequence of
+/// steps. Steppers are particularly useful in the case of forms where one step
+/// requires the completion of another one, or where multiple steps need to be
+/// completed in order to submit the whole form.
+class ZetaStepper extends StatefulWidget {
+  /// Creates a stepper from a list of steps.
+  ///
+  /// This widget is not meant to be rebuilt with a different list of steps
+  /// unless a key is provided in order to distinguish the old stepper from the
+  /// new one.
+  const ZetaStepper({
+    required this.steps,
+    required this.currentStep,
+    this.type = ZetaStepperType.horizontal,
+    this.onStepTapped,
+    this.rounded = true,
+    super.key,
+  });
+
+  /// The index into [steps] of the current step whose content is displayed.
+  final int currentStep;
+
+  /// The callback called when a step is tapped, with its index passed as
+  /// an argument.
+  final ValueChanged<int>? onStepTapped;
+
+  /// Whether the icons of the horizontal stepper to be rounded or square.
+  final bool rounded;
+
+  /// The steps of the stepper whose titles, subtitles, icons always get shown.
+  ///
+  /// The length of [steps] must not change.
+  final List<ZetaStep> steps;
+
+  /// The type of stepper that determines the layout. In the case of
+  /// [ZetaStepperType.horizontal], the content of the current step is displayed
+  /// underneath as opposed to the [ZetaStepperType.vertical] case where it is
+  /// displayed in-between.
+  final ZetaStepperType type;
+
+  @override
+  State<ZetaStepper> createState() => _ZetaStepperState();
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(IterableProperty<ZetaStep>('steps', steps))
+      ..properties.add(IntProperty('currentStep', currentStep))
+      ..add(EnumProperty<ZetaStepperType>('type', type))
+      ..add(
+        ObjectFlagProperty<ValueChanged<int>?>.has(
+          'onStepTapped',
+          onStepTapped,
+        ),
+      )
+      ..properties.add(DiagnosticsProperty<bool>('rounded', rounded));
+  }
+}
+
+class _ZetaStepperState extends State<ZetaStepper> with TickerProviderStateMixin {
+  late List<GlobalKey> _keys;
+
+  @override
+  void initState() {
+    super.initState();
+    _keys = List<GlobalKey>.generate(
+      widget.steps.length,
+      (_) => GlobalKey(),
+    );
+  }
+
+  ZetaColors get _colors => Zeta.of(context).colors;
+
+  bool _isFirst(int index) {
+    return index == 0;
+  }
+
+  bool _isLast(int index) {
+    return widget.steps.length - 1 == index;
+  }
+
+  bool _isCurrent(int index) {
+    return widget.currentStep == index;
+  }
+
+  Widget _buildHorizotalIcon(int index) {
+    return SizedBox(
+      width: ZetaSpacing.l,
+      height: ZetaSpacing.l,
+      child: AnimatedContainer(
+        curve: Curves.fastOutSlowIn,
+        duration: kThemeAnimationDuration,
+        decoration: BoxDecoration(
+          color: _getColorForType(widget.steps[index].type),
+          shape: widget.rounded ? BoxShape.circle : BoxShape.rectangle,
+        ),
+        child: Center(
+          child: switch (widget.steps[index].type) {
+            ZetaStepType.complete => Icon(
+                widget.rounded ? ZetaIcons.check_mark_round : ZetaIcons.check_mark_sharp,
+                color: _colors.textInverse,
+              ),
+            ZetaStepType.enabled || ZetaStepType.disabled => Text(
+                (index + 1).toString(),
+                style: ZetaTextStyles.labelLarge.copyWith(
+                  color: _colors.textInverse,
+                ),
+              ),
+          },
+        ),
+      ),
+    );
+  }
+
+  Widget _getVerticalIcon(int index) {
+    return SizedBox(
+      width: ZetaSpacing.x12,
+      height: ZetaSpacing.x12,
+      child: AnimatedContainer(
+        curve: Curves.fastOutSlowIn,
+        duration: kThemeAnimationDuration,
+        decoration: BoxDecoration(
+          color: _getColorForType(widget.steps[index].type),
+          shape: widget.rounded ? BoxShape.circle : BoxShape.rectangle,
+        ),
+        child: Center(
+          child: switch (widget.steps[index].type) {
+            ZetaStepType.complete => Icon(
+                widget.rounded ? ZetaIcons.check_mark_round : ZetaIcons.check_mark_sharp,
+                color: _colors.textInverse,
+              ),
+            ZetaStepType.enabled || ZetaStepType.disabled => Text(
+                (index + 1).toString(),
+                style: ZetaTextStyles.titleLarge.copyWith(
+                  color: _colors.textInverse,
+                ),
+              ),
+          },
+        ),
+      ),
+    );
+  }
+
+  Widget _getHeaderText(int index) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        AnimatedDefaultTextStyle(
+          style: switch (widget.steps[index].type) {
+            ZetaStepType.enabled || ZetaStepType.complete => ZetaTextStyles.bodySmall.copyWith(
+                color: _colors.textDefault,
+              ),
+            ZetaStepType.disabled => ZetaTextStyles.bodySmall.copyWith(
+                color: _colors.textDisabled,
+              ),
+          },
+          maxLines: 1,
+          duration: kThemeAnimationDuration,
+          curve: Curves.fastOutSlowIn,
+          child: widget.steps[index].title,
+        ),
+      ],
+    );
+  }
+
+  Widget _getVerticalHeader(int index) {
+    final subtitle = widget.steps[index].subtitle;
+
+    return Container(
+      margin: EdgeInsets.only(top: _isFirst(index) ? 0.0 : ZetaSpacing.m),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Column(
+            children: [
+              _getVerticalIcon(index),
+              Container(
+                margin: const EdgeInsets.only(top: ZetaSpacing.x1),
+                width: ZetaSpacing.x1,
+                height: ZetaSpacing.x12,
+                decoration: BoxDecoration(
+                  borderRadius: ZetaRadius.full,
+                  color: switch (widget.steps[index].type) {
+                    ZetaStepType.complete => _colors.green.shade50,
+                    ZetaStepType.disabled => _colors.borderSubtle,
+                    ZetaStepType.enabled => _colors.blue.shade50,
+                  },
+                ),
+              ),
+            ],
+          ),
+          Expanded(
+            child: Container(
+              margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.m),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  if (subtitle != null)
+                    AnimatedDefaultTextStyle(
+                      style: ZetaTextStyles.bodyMedium.copyWith(
+                        color: _getColorForType(widget.steps[index].type),
+                      ),
+                      maxLines: 1,
+                      duration: kThemeAnimationDuration,
+                      curve: Curves.fastOutSlowIn,
+                      child: subtitle,
+                    ),
+                  AnimatedDefaultTextStyle(
+                    style: switch (widget.steps[index].type) {
+                      ZetaStepType.enabled || ZetaStepType.complete => ZetaTextStyles.titleLarge.copyWith(
+                          color: _colors.textDefault,
+                        ),
+                      ZetaStepType.disabled => ZetaTextStyles.titleLarge.copyWith(
+                          color: _colors.textDisabled,
+                        ),
+                    },
+                    maxLines: 1,
+                    duration: kThemeAnimationDuration,
+                    curve: Curves.fastOutSlowIn,
+                    child: widget.steps[index].title,
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _getVerticalBody(int index) {
+    return Stack(
+      children: <Widget>[
+        AnimatedCrossFade(
+          firstChild: Container(height: 0),
+          secondChild: widget.steps[index].content ?? const SizedBox(),
+          firstCurve: const Interval(0, 0.6, curve: Curves.fastOutSlowIn),
+          secondCurve: const Interval(0.4, 1, curve: Curves.fastOutSlowIn),
+          sizeCurve: Curves.fastOutSlowIn,
+          crossFadeState: _isCurrent(index) ? CrossFadeState.showSecond : CrossFadeState.showFirst,
+          duration: kThemeAnimationDuration,
+        ),
+      ],
+    );
+  }
+
+  Color _getColorForType(ZetaStepType type) {
+    return switch (type) {
+      ZetaStepType.complete => _colors.positive,
+      ZetaStepType.disabled => _colors.cool.shade50,
+      ZetaStepType.enabled => _colors.primary,
+    };
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return switch (widget.type) {
+      ZetaStepperType.vertical => Column(
+          children: [
+            for (int index = 0; index < widget.steps.length; index += 1)
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                key: _keys[index],
+                children: [
+                  InkResponse(
+                    containedInkWell: true,
+                    borderRadius: ZetaRadius.minimal,
+                    onTap: widget.onStepTapped != null ? () => widget.onStepTapped?.call(index) : null,
+                    canRequestFocus: widget.steps[index].type != ZetaStepType.disabled,
+                    child: _getVerticalHeader(index),
+                  ),
+                  _getVerticalBody(index),
+                ],
+              ),
+          ],
+        ),
+      ZetaStepperType.horizontal => Builder(
+          builder: (context) {
+            final children = [
+              for (int index = 0; index < widget.steps.length; index += 1) ...[
+                InkResponse(
+                  onTap: widget.onStepTapped != null ? () => widget.onStepTapped?.call(index) : null,
+                  canRequestFocus: widget.steps[index].type != ZetaStepType.disabled,
+                  child: Column(
+                    children: [
+                      Center(
+                        child: Padding(
+                          padding: const EdgeInsets.symmetric(
+                            vertical: ZetaSpacing.s,
+                          ),
+                          child: _buildHorizotalIcon(index),
+                        ),
+                      ),
+                      _getHeaderText(index),
+                    ],
+                  ),
+                ),
+                if (!_isLast(index))
+                  Expanded(
+                    child: Container(
+                      key: Key('line$index'),
+                      margin: const EdgeInsets.only(
+                        top: ZetaSpacing.x7,
+                        right: ZetaSpacing.b,
+                        left: ZetaSpacing.b,
+                      ),
+                      height: ZetaSpacing.x0_5,
+                      decoration: BoxDecoration(
+                        borderRadius: ZetaRadius.full,
+                        color: switch (widget.steps[index].type) {
+                          ZetaStepType.complete => _colors.green.shade50,
+                          ZetaStepType.disabled => _colors.borderSubtle,
+                          ZetaStepType.enabled => _colors.blue.shade50,
+                        },
+                      ),
+                    ),
+                  ),
+              ],
+            ];
+
+            final List<Widget> stepPanels = <Widget>[];
+            for (int i = 0; i < widget.steps.length; i += 1) {
+              stepPanels.add(
+                Visibility(
+                  maintainState: true,
+                  visible: i == widget.currentStep,
+                  child: widget.steps[i].content ?? const SizedBox(),
+                ),
+              );
+            }
+
+            return Column(
+              children: [
+                Material(
+                  color: Colors.transparent,
+                  child: Container(
+                    margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.m),
+                    child: Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: children,
+                    ),
+                  ),
+                ),
+                Expanded(
+                  child: AnimatedSize(
+                    curve: Curves.fastOutSlowIn,
+                    duration: kThemeAnimationDuration,
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.stretch,
+                      children: stepPanels,
+                    ),
+                  ),
+                ),
+              ],
+            );
+          },
+        ),
+    };
+  }
+}
+
+/// Zeta step used in [ZetaStepper]. The step can have a title and subtitle,
+/// an icon within its circle, some content and a state that governs its
+/// styling.
+class ZetaStep {
+  /// Creates a step for a [ZetaStepper].
+  const ZetaStep({
+    required this.title,
+    this.content,
+    this.subtitle,
+    this.type = ZetaStepType.disabled,
+  });
+
+  /// The content of the step that appears below the [title] and [subtitle].
+  final Widget? content;
+
+  /// The subtitle of the step that appears above the title.
+  final Widget? subtitle;
+
+  /// The title of the step that typically describes it.
+  final Widget title;
+
+  /// The type of the step which determines the styling of its components
+  /// and whether steps are interactive.
+  final ZetaStepType type;
+}
+
+/// The type of a [ZetaStep] which is used to control the style of the circle and text.
+enum ZetaStepType {
+  /// A step that is currently selected with primary color icon
+  enabled,
+
+  /// A step that displays a tick icon in its circle.
+  complete,
+
+  /// A step that is disabled and does not to react to taps.
+  disabled,
+}
+
+/// Defines the [ZetaStepper]'s main axis.
+enum ZetaStepperType {
+  /// A vertical layout of the steps with their content in-between the titles.
+  vertical,
+
+  /// A horizontal layout of the steps with their content below the titles.
+  horizontal,
+}
diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart
index 6ee239cc..468ce203 100644
--- a/lib/zeta_flutter.dart
+++ b/lib/zeta_flutter.dart
@@ -32,6 +32,7 @@ export 'src/components/progress/progress_bar.dart';
 export 'src/components/progress/progress_circle.dart';
 export 'src/components/radio/radio.dart';
 export 'src/components/snack_bar/snack_bar.dart';
+export 'src/components/stepper/stepper.dart';
 export 'src/components/switch/zeta_switch.dart';
 export 'src/components/tabs/tab.dart';
 export 'src/components/tabs/tab_bar.dart';