feat: Dial Pad

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @benken @mikecoomber @thelukewalton

example/lib/home.dart

@@ -8,6 +8,7 @@ import 'package:zeta_example/pages/components/bottom_sheet_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/dialpad_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';
@@ -32,9 +33,9 @@ final List<Component> components = [
   Component(ButtonExample.name, (context) => const ButtonExample()),
   Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
   Component(ChipExample.name, (context) => const ChipExample()),
-  Component(
-      PasswordInputExample.name, (context) => const PasswordInputExample()),
-  Component(ProgressExample.name, (context) => const ProgressExample())
+  Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
+  Component(ProgressExample.name, (context) => const ProgressExample()),
+  Component(DialPadExample.name, (context) => const DialPadExample()),
 ];
 
 final List<Component> theme = [
@@ -96,27 +97,21 @@ class _HomeState extends State<Home> {
               title: Text('Widgets'),
               backgroundColor: Zeta.of(context).colors.warm.shade30,
               children: _components
-                  .map((item) => ListTile(
-                      title: Text(item.name),
-                      onTap: () => context.go('/${item.name}')))
+                  .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
                   .toList(),
             ),
             ExpansionTile(
               title: Text('Theme'),
               backgroundColor: Zeta.of(context).colors.warm.shade30,
               children: _theme
-                  .map((item) => ListTile(
-                      title: Text(item.name),
-                      onTap: () => context.go('/${item.name}')))
+                  .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
                   .toList(),
             ),
             ExpansionTile(
               title: Text('Assets'),
               backgroundColor: Zeta.of(context).colors.warm.shade30,
               children: _assets
-                  .map((item) => ListTile(
-                      title: Text(item.name),
-                      onTap: () => context.go('/${item.name}')))
+                  .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
                   .toList(),
             ),
           ],

example/lib/pages/components/dialpad_example.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class DialPadExample extends StatelessWidget {
+  static const String name = 'DialPad';
+
+  const DialPadExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: name,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              ZetaDialPad(),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

example/lib/pages/components/progress_example.dart

@@ -28,11 +28,7 @@ class ProgressExampleState extends State<ProgressExample> {
               SizedBox(
                 height: 20,
               ),
-              Wrapper(
-                  stepsCompleted: 0,
-                  type: ZetaBarType.standard,
-                  isThin: false,
-                  stateChangeable: true),
+              Wrapper(stepsCompleted: 0, type: ZetaBarType.standard, isThin: false, stateChangeable: true),
               SizedBox(
                 height: 20,
               ),
@@ -94,9 +90,7 @@ class _WrapperState extends State<Wrapper> {
 
   void setLoading() {
     setState(() {
-      type = type == ZetaBarType.buffering
-          ? ZetaBarType.standard
-          : ZetaBarType.buffering;
+      type = type == ZetaBarType.buffering ? ZetaBarType.standard : ZetaBarType.buffering;
     });
   }
 
@@ -108,25 +102,17 @@ class _WrapperState extends State<Wrapper> {
         SizedBox(
           width: 400,
           child: ZetaProgressBar(
-              progress: progress,
-              rounded: widget.rounded,
-              type: type,
-              isThin: widget.isThin,
-              label: widget.label),
+              progress: progress, rounded: widget.rounded, type: type, isThin: widget.isThin, label: widget.label),
         ),
         const SizedBox(width: 40),
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             widget.type != ZetaBarType.indeterminate
-                ? FilledButton(
-                    onPressed: increasePercentage, child: Text("Increase"))
+                ? FilledButton(onPressed: increasePercentage, child: Text("Increase"))
                 : Container(),
             const SizedBox(width: 40),
-            widget.stateChangeable
-                ? FilledButton(
-                    onPressed: setLoading, child: Text("Start Buffering"))
-                : Container()
+            widget.stateChangeable ? FilledButton(onPressed: setLoading, child: Text("Start Buffering")) : Container()
           ],
         )
       ],

example/web/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <!--
     If you are serving your web app in a path other than the root, change the
@@ -18,7 +19,7 @@
 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="Demonstrates how to use the zeta_flutter plugin.">
+  <meta name="description" content="Demonstrates how to use the zeta_flutter library.">
 
   <!-- iOS meta tags & icons -->
   <meta name="apple-mobile-web-app-capable" content="yes">
@@ -27,33 +28,35 @@
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
-  <link rel="icon" type="image/png" href="favicon.png"/>
+  <link rel="icon" type="image/png" href="favicon.png" />
 
   <title>zeta_flutter_example</title>
   <link rel="manifest" href="manifest.json">
 
   <script>
     // The value below is injected by flutter build, do not touch.
-    var serviceWorkerVersion = null;
+    const serviceWorkerVersion = null;
   </script>
   <!-- This script adds the flutter initialization JS code -->
   <script src="flutter.js" defer></script>
 </head>
+
 <body>
   <script>
-    window.addEventListener('load', function(ev) {
+    window.addEventListener('load', function (ev) {
       // Download main.dart.js
       _flutter.loader.loadEntrypoint({
         serviceWorker: {
           serviceWorkerVersion: serviceWorkerVersion,
         },
-        onEntrypointLoaded: function(engineInitializer) {
-          engineInitializer.initializeEngine().then(function(appRunner) {
+        onEntrypointLoaded: function (engineInitializer) {
+          engineInitializer.initializeEngine({ useColorEmoji: true, }).then(function (appRunner) {
             appRunner.runApp();
           });
         }
       });
     });
   </script>
 </body>
-</html>
+
+</html>

example/widgetbook/pages/components/dial_pad_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';
+
+WidgetbookComponent dialPadWidgetbook() {
+  return WidgetbookComponent(
+    isInitiallyExpanded: false,
+    name: 'Dial Pad',
+    useCases: [
+      WidgetbookUseCase(
+        name: 'Dial Pad',
+        builder: (context) {
+          return WidgetbookTestWidget(
+            widget: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                ZetaDialPad(
+                  buttonValues: context.knobs.boolean(label: 'Change to emoji')
+                      ? {
+                          '😀': '',
+                          '🥲': '',
+                          '🥳': '',
+                          '🤠': '',
+                          '😨': '',
+                          '👀': '',
+                          '🐤': '',
+                          '🐞': '',
+                          '🦊': '',
+                          '🏆': '',
+                          '⛺️': '',
+                          '🧽': ''
+                        }
+                      : null,
+                  buttonsPerRow: context.knobs.int.slider(label: 'Buttons per row', initialValue: 3, min: 1, max: 9),
+                ),
+              ],
+            ).paddingAll(ZetaSpacing.l),
+          );
+        },
+      ),
+    ],
+  );
+}

example/widgetbook/widgetbook.dart

@@ -9,6 +9,7 @@ import 'pages/components/badges_widgetbook.dart';
 import 'pages/components/bottom_sheet_widgetbook.dart';
 import 'pages/components/button_widgetbook.dart';
 import 'pages/components/checkbox_widgetbook.dart';
+import 'pages/components/dial_pad_widgetbook.dart';
 import 'pages/theme/color_widgetbook.dart';
 import 'pages/components/banner_widgetbook.dart';
 import 'pages/components/chip_widgetbook.dart';
@@ -39,6 +40,7 @@ class HotReload extends StatelessWidget {
             chipWidgetBook(),
             passwordInputWidgetBook(),
             bottomSheetWidgetBook(),
+            dialPadWidgetbook(),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),
         WidgetbookCategory(