removed flutter hooks, implemented Tappable

forui/lib/forui.dart

@@ -20,4 +20,5 @@ export 'src/widgets/button/button.dart';
 export 'src/widgets/button/link_button.dart';
 export 'src/widgets/button/button_style.dart';
 export 'src/widgets/button/button_content_style.dart';
+export 'src/widgets/button/button_type_style.dart';
 export 'src/widgets/card/card.dart';

forui/lib/src/widgets/button/button.dart

@@ -3,14 +3,23 @@ import 'package:flutter/material.dart';
 import 'package:forui/forui.dart';
 import 'package:forui/src/widgets/button/button_content.dart';
 
+/// A [FButtonType] represents the possible states that a [FButton] can be in.
 enum FButtonType {
+  /// a primary button
   primary,
+
+  /// a secondary button
   secondary,
+
+  /// a destructive button
   destructive,
+
+  /// a outlined button
   outlined,
 }
 
-class Fbutton extends StatelessWidget {
+/// Represents a button widget.
+class FButton extends StatelessWidget {
   /// The type of button.
   final FButtonType type;
 
@@ -24,7 +33,7 @@ class Fbutton extends StatelessWidget {
   final FButtonStyle? style;
 
   /// Creates a [FButton] widget.
-  Fbutton({
+  FButton({
     required this.type,
     required this.onPressed,
     String? text,
@@ -33,80 +42,51 @@ class Fbutton extends StatelessWidget {
     super.key,
   }) : child = FButtonContent(text: text, icon: icon, style: style?.content);
 
-  /// Creates a [Fbutton].
-  const Fbutton.raw({required this.type, required this.onPressed, required this.child, this.style, super.key});
+  /// Creates a [FButton].
+  const FButton.raw({required this.type, required this.onPressed, required this.child, this.style, super.key});
 
   @override
   Widget build(BuildContext context) {
     final style = this.style ?? FTheme.of(context).widgets.button;
 
     switch (type) {
       case FButtonType.primary:
-        return _FlatButton(content: child, onPressed: onPressed, style: style.primary);
+        return _Button(onPressed: onPressed, style: style, type: style.primary, child: child);
       case FButtonType.secondary:
-        return _FlatButton(content: child, onPressed: onPressed, style: style.secondary);
+        return _Button(onPressed: onPressed, style: style, type: style.secondary, child: child);
       case FButtonType.destructive:
-        return _FlatButton(content: child, onPressed: onPressed, style: style.destructive);
+        return _Button(onPressed: onPressed, style: style, type: style.destructive, child: child);
       case FButtonType.outlined:
-        return _OutlinedButton(content: child, onPressed: onPressed, style: style.outlined);
+        return _Button(onPressed: onPressed, style: style, type: style.outlined, child: child);
     }
   }
 }
 
-class _FlatButton extends StatelessWidget {
-  final ButtonStyle style;
-  final Widget content;
+class _Button extends StatelessWidget {
+  final FButtonStyle style;
+  final FButtonTypeStyle type;
+  final Widget child;
   final VoidCallback? onPressed;
 
-  const _FlatButton({
-    required this.content,
-    required this.onPressed,
+  const _Button({
     required this.style,
-    super.key,
-  });
-
-  @override
-  Widget build(BuildContext context) => FTappable(
-        onPressed: onPressed,
-        builder: (context, onPressed) => ElevatedButton(
-          style: style,
-          onPressed: onPressed,
-          child: Padding(
-            padding: const EdgeInsets.symmetric(
-              horizontal: 5,
-              vertical: 17,
-            ),
-            child: content,
-          ),
-        ),
-      );
-}
-
-class _OutlinedButton extends StatelessWidget {
-  final ButtonStyle style;
-  final Widget content;
-  final VoidCallback? onPressed;
-
-  const _OutlinedButton({
-    required this.content,
+    required this.type,
     required this.onPressed,
-    required this.style,
+    required this.child,
     super.key,
   });
 
   @override
   Widget build(BuildContext context) => FTappable(
-        onPressed: onPressed,
-        builder: (context, onPressed) => OutlinedButton(
-          style: style,
-          onPressed: onPressed,
-          child: Padding(
-            padding: const EdgeInsets.symmetric(
-              horizontal: 5,
-              vertical: 17,
-            ),
-            child: content,
-          ),
+      onPressed: onPressed,
+      child: Container(
+        decoration: BoxDecoration(
+          border: Border.all(color: type.border),
+          borderRadius: style.borderRadius,
+          color: type.background,
         ),
-      );
+        padding: style.padding,
+        child: child,
+      ),
+    );
 }

forui/lib/src/widgets/button/button_content.dart

@@ -31,8 +31,13 @@ final class FButtonContent extends StatelessWidget {
     return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
       // [SvgTheme] provides a default color that overrides material's ButtonStyle foregroundColor
       // This is a workaround, the color of the icon is set here instead of the ButtonStyle.
-      if (icon != null) //...[icon(height: 20, color: style.color), const SizedBox(width: 10)],
-        if (text != null) Flexible(child: Text(text!, style: style.text)),
+      //if (icon != null) ...[icon(height: 20, color: style.color), const SizedBox(width: 10)],
+      if (text != null)
+        Flexible(
+            child: Text(text!,
+                //TODO: How do I make this specific to Button Type
+                style: style.text)),
+
       if (child != null) child!
     ]);
   }

forui/lib/src/widgets/button/button_content_style.dart

@@ -3,28 +3,23 @@ import 'package:forui/forui.dart';
 
 /// [FButtonContent]'s style.
 class FButtonContentStyle {
-  /// The padding.
-  final EdgeInsets padding;
-
   /// The title.
   final TextStyle text;
 
-  /// The icon color.
-  final Color color;
-
   /// Creates a [FButtonContentStyle].
-  const FButtonContentStyle({required this.padding, required this.text, required this.color});
+  const FButtonContentStyle({
+    required this.text,
+  });
 
   /// Creates a [FButtonContentStyle] that inherits its properties from [style] and [font].
   FButtonContentStyle.inherit({required FStyleData style, required FFontData font})
-      : padding = const EdgeInsets.fromLTRB(16, 12, 16, 16),
-        text = ScaledTextStyle(
+      : text = ScaledTextStyle(
           TextStyle(
             fontSize: 16,
             fontWeight: FontWeight.w600,
-            color: style.foreground,
+            //TODO: How do I make this specific to Button Type
+            color: style.primaryForeground,
           ),
           font,
-        ),
-        color = Colors.white;
+        );
 }

forui/lib/src/widgets/button/button_style.dart

@@ -14,23 +14,26 @@ const _textStyle = TextStyle(
 /// [FButtonStyle]'s style.
 class FButtonStyle {
   /// The primary style.
-  final ButtonStyle primary;
+  final FButtonTypeStyle primary;
 
   /// The secondary style.
-  final ButtonStyle secondary;
+  final FButtonTypeStyle secondary;
 
   /// The destructive style.
-  final ButtonStyle destructive;
+  final FButtonTypeStyle destructive;
 
   /// The outlined style.
-  final ButtonStyle outlined;
-
-  /// The link style.
-  final ButtonStyle link;
+  final FButtonTypeStyle outlined;
 
   /// The text.
   final TextStyle text;
 
+  /// The padding.
+  final EdgeInsets padding;
+
+  /// The padding.
+  final BorderRadius borderRadius;
+
   /// The text.
   final FButtonContentStyle content;
 
@@ -40,23 +43,48 @@ class FButtonStyle {
     required this.secondary,
     required this.destructive,
     required this.outlined,
-    required this.link,
     required this.text,
+    required this.padding,
+    required this.borderRadius,
     required this.content,
   });
 
   /// Creates a [FButtonStyle] that inherits its properties from [data] and [style].
   FButtonStyle.inherit({required FFontData font, required FStyleData style})
-      // TODO: How do I link the default buttonStyles to the corresponding Factory constructor
-      : primary = _primaryStyle,
-        secondary = _secondaryStyle,
-        destructive = _destructiveStyle,
-        outlined = _outlinedStyle,
-        link = _linkStyle,
+      : primary = FButtonTypeStyle(
+          background: style.primary,
+          foreground: style.primaryForeground,
+          disabled: style.mutedForeground,
+          border: style.background,
+        ),
+        secondary = FButtonTypeStyle(
+          background: style.secondary,
+          foreground: style.secondaryForeground,
+          disabled: style.mutedForeground,
+          border: style.background,
+        ),
+        destructive = FButtonTypeStyle(
+          background: style.destructive,
+          foreground: style.foreground,
+          disabled: style.mutedForeground,
+          border: style.background,
+        ),
+        outlined = FButtonTypeStyle(
+          background: style.background,
+          foreground: style.foreground,
+          disabled: style.mutedForeground,
+          border: style.background,
+        ),
         text = ScaledTextStyle(_textStyle, font),
+        padding = const EdgeInsets.symmetric(
+          horizontal: 5,
+          vertical: 17,
+        ),
+        borderRadius = style.borderRadius,
         content = FButtonContentStyle.inherit(style: style, font: font);
 }
 
+
 final _primaryStyle = ButtonStyle(
   backgroundColor: MaterialStateProperty.resolveWith(
     (states) => states.contains(MaterialState.disabled) ? const Color(0xFFBFBFBF) : Colors.black,

forui/lib/src/widgets/button/button_type_style.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+/// Represents the theme data that is inherited by [FButtonStyle] and used by child [FButton] widgets.
+class FButtonTypeStyle {
+  /// The background color.
+  final Color background;
+
+  /// The foreground color.
+  final Color foreground;
+
+  /// The primary color.
+  final Color disabled;
+
+  /// The border color.
+  final Color border;
+
+  /// Creates a [FButtonTypeStyle].
+  const FButtonTypeStyle({
+    required this.background,
+    required this.foreground,
+    required this.disabled,
+    required this.border,
+  });
+
+  /// Creates a copy of this [FButtonTypeStyle] with the given properties replaced.
+  FButtonTypeStyle copyWith({
+    Color? background,
+    Color? foreground,
+    Color? disabled,
+    Color? border,
+  }) =>
+      FButtonTypeStyle(
+        background: background ?? this.background,
+        foreground: foreground ?? this.foreground,
+        disabled: disabled ?? this.disabled,
+        border: border ?? this.border,
+      );
+}

forui/lib/src/widgets/button/link_button.dart

@@ -54,7 +54,6 @@ class FLinkButton extends StatelessWidget {
   Widget build(BuildContext context) {
     final style = this.style ?? FTheme.of(context).widgets.button;
     return TextButton(
-      style: style.link,
       onPressed: onPressed,
       child: Text(
         text,