feat : Progress Circle upload

example/widgetbook/pages/components/progress_widgetbook.dart

@@ -34,5 +34,6 @@ Widget progressCircleUseCase(BuildContext context) => WidgetbookTestWidget(
           options: ZetaCircleSizes.values,
           labelBuilder: enumLabelBuilder,
         ),
+        onCancel: context.knobs.boolean(label: "Can Cancel") ? () {} : null,
       ),
     );

lib/src/components/progress/progress_circle.dart

@@ -31,6 +31,7 @@ class ZetaProgressCircle extends ZetaProgress {
     super.progress = 0,
     this.size = ZetaCircleSizes.xl_1,
     this.rounded = true,
+    this.onCancel,
   });
 
   ///Size of [ZetaProgressCircle]
@@ -39,6 +40,9 @@ class ZetaProgressCircle extends ZetaProgress {
   ///{@macro zeta-component-rounded}
   final bool rounded;
 
+  /// Cancel function => cancel upload.
+  final VoidCallback? onCancel;
+
   @override
   State<ZetaProgressCircle> createState() => ZetaProgressCircleState();
 
@@ -48,14 +52,42 @@ class ZetaProgressCircle extends ZetaProgress {
     properties
       ..add(EnumProperty<ZetaCircleSizes>('size', size))
       ..add(DoubleProperty('progress', progress))
-      ..add(DiagnosticsProperty<bool>('rounded', rounded));
+      ..add(DiagnosticsProperty<bool>('rounded', rounded))
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onCancel', onCancel));
   }
 }
 
 ///Class definition for [ZetaProgressCircleState]
 class ZetaProgressCircleState extends ZetaProgressState<ZetaProgressCircle> {
+  final _controller = WidgetStatesController();
+
+  @override
+  void initState() {
+    super.initState();
+    _controller.addListener(() {
+      if (context.mounted && mounted && !_controller.value.contains(WidgetState.hovered)) {
+        setState(() {});
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
+    final textVal = '${(widget.progress * 100).round()}%';
+    final colors = Zeta.of(context).colors;
+    final textWidget = Text(
+      textVal,
+      style: widget.size != ZetaCircleSizes.s
+          ? ZetaTextStyles.labelSmall
+          : ZetaTextStyles.labelSmall.copyWith(fontSize: ZetaSpacing.small),
+    );
+
     return ConstrainedBox(
       constraints: BoxConstraints.tight(_getSize()),
       child: AnimatedBuilder(
@@ -68,6 +100,46 @@ class ZetaProgressCircleState extends ZetaProgressState<ZetaProgressCircle> {
               rounded: widget.rounded,
               colors: Zeta.of(context).colors,
             ),
+            child: Center(
+              child: widget.size == ZetaCircleSizes.xs
+                  ? null
+                  : widget.onCancel != null
+                      ? ListenableBuilder(
+                          listenable: _controller,
+                          builder: (context, _) {
+                            return MouseRegion(
+                              onEnter: (hover) {
+                                if (mounted) {
+                                  _controller.update(WidgetState.hovered, true);
+                                }
+                              },
+                              onExit: (hover) {
+                                _controller.update(WidgetState.hovered, false);
+                              },
+                              child: _controller.value.contains(WidgetState.hovered)
+                                  ? InkWell(
+                                      enableFeedback: false,
+                                      onTap: widget.onCancel,
+                                      borderRadius: ZetaRadius.full,
+                                      child: Container(
+                                        decoration: BoxDecoration(
+                                          color: colors.surfaceHover,
+                                          borderRadius: ZetaRadius.full,
+                                        ),
+                                        padding: const EdgeInsets.all(ZetaSpacing.small),
+                                        child: Icon(
+                                          widget.rounded ? ZetaIcons.close_round : ZetaIcons.close_sharp,
+                                          size:
+                                              widget.size == ZetaCircleSizes.s ? ZetaSpacing.medium : ZetaSpacing.large,
+                                        ),
+                                      ),
+                                    )
+                                  : textWidget,
+                            );
+                          },
+                        )
+                      : textWidget,
+            ),
           );
         },
       ),