Refactor/use geist from google fonts

docs/src/content/docs/packages.md

@@ -32,3 +32,7 @@ The intl package provides internationalization and localization facilities, incl
 ### [universal_image](https://pub.dev/packages/universal_image)
 
 Support multiple image formats. Used by the [ShadAvatar](../components/avatar) component.
+
+## [google_fonts](https://pub.dev/packages/google_fonts)
+
+The google_fonts package allows you to easily use any of the fonts from fonts.google.com in your Flutter app.

example/lib/pages/typography.dart

@@ -7,7 +7,7 @@ import 'package:shadcn_ui/shadcn_ui.dart';
 // Example of extension on ShadTextTheme with a custom style.
 // which can be retrieved with `ShadTheme.of(context).textTheme.myCustomStyle`.
 extension CustomStyleExtension on ShadTextTheme {
-  TextStyle get myCustomStyle => custom['myCustomStyle']!;
+  TextStyle? get myCustomStyle => custom['myCustomStyle'];
 }
 
 class TypographyPage extends StatelessWidget {

example/pubspec.yaml

@@ -15,7 +15,6 @@ dependencies:
     path: ..
   flutter_solidart: ^2.1.0
   awesome_flutter_extensions: ^2.0.1
-  google_fonts: 6.3.2
   collection: ^1.18.0
   get: ^4.6.6
   boxy: ^2.2.1
@@ -28,5 +27,11 @@ dev_dependencies:
 
 flutter:
   uses-material-design: true
+  fonts:
+    - family: UbuntuMono
+      fonts:
+        - asset: fonts/UbuntuMono-Regular.ttf
+        - asset: fonts/UbuntuMono-Bold.ttf
+          weight: 700
   assets:
     - assets/

lib/shadcn_ui.dart

@@ -16,6 +16,7 @@ export 'package:boxy/utils.dart';
 export 'package:flutter_animate/flutter_animate.dart' hide Effect;
 // External libraries
 export 'package:flutter_svg/flutter_svg.dart';
+export 'package:google_fonts/google_fonts.dart';
 export 'package:intl/intl.dart' hide TextDirection;
 export 'package:lucide_icons_flutter/lucide_icons.dart';
 export 'package:two_dimensional_scrollables/two_dimensional_scrollables.dart';

lib/src/components/input_otp.dart

@@ -1,9 +1,10 @@
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:shadcn_ui/src/components/disabled.dart';
 import 'package:shadcn_ui/src/components/input.dart';
 import 'package:shadcn_ui/src/theme/components/decorator.dart';
-import 'package:shadcn_ui/src/theme/text_theme/text_styles_default.dart';
+import 'package:shadcn_ui/src/theme/text_theme/theme.dart';
 import 'package:shadcn_ui/src/theme/theme.dart';
 import 'package:shadcn_ui/src/utils/border.dart';
 import 'package:shadcn_ui/src/utils/provider.dart';
@@ -299,13 +300,7 @@ class ShadInputOTPSlot extends StatefulWidget {
   final TextInputType? keyboardType;
 
   /// {@template ShadInputOTPSlot.style}
-  /// The style for the input of the slot, defaults to
-  /// ```dart
-  /// textTheme.muted.copyWith(
-  ///    color: theme.colorScheme.foreground,
-  ///    fontFamily: kDefaultFontFamilyMono,
-  ///  )
-  /// ```
+  /// The style for the input of the slot.
   /// {@endtemplate}
   final TextStyle? style;
 
@@ -425,10 +420,11 @@ class _ShadInputOTPSlotState extends State<ShadInputOTPSlot> {
     final defaultStyle =
         widget.style ??
         theme.inputOTPTheme.style ??
-        theme.textTheme.muted.copyWith(
-          color: theme.colorScheme.foreground,
-          fontFamily: kDefaultFontFamilyMono,
-        );
+        GoogleFonts.geistMono()
+            .merge(theme.textTheme.muted.omitFamilyAndPackage)
+            .copyWith(
+              color: theme.colorScheme.foreground,
+            );
 
     final firstRadius =
         widget.firstRadius ??

lib/src/theme/text_theme/text_styles_default.dart

@@ -1,214 +1,163 @@
 import 'package:flutter/widgets.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:shadcn_ui/src/utils/extensions/text_style.dart';
 
-const kDefaultFontFamily = 'packages/shadcn_ui/Geist';
-const kDefaultFontFamilyMono = 'packages/shadcn_ui/GeistMono';
+const kDefaultFontFamily = 'Geist';
 
 abstract class ShadTextDefaultTheme {
-  static TextStyle h1Large({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle h1Large() {
+    return GoogleFonts.geist(
       fontSize: 48,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w800,
       height: 48 / 48,
       letterSpacing: -0.4,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle h1({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle h1() {
+    return GoogleFonts.geist(
       fontSize: 36,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w800,
       height: 40 / 36,
       letterSpacing: -0.4,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle h2({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle h2() {
+    return GoogleFonts.geist(
       fontSize: 30,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w600,
       height: 36 / 30,
       letterSpacing: -0.4,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle h3({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle h3() {
+    return GoogleFonts.geist(
       fontSize: 24,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w600,
       height: 32 / 24,
       letterSpacing: -0.4,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle h4({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle h4() {
+    return GoogleFonts.geist(
       fontSize: 20,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w600,
       height: 28 / 20,
       letterSpacing: -0.4,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle p({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle p() {
+    return GoogleFonts.geist(
       fontSize: 16,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w400,
       height: 28 / 16,
       letterSpacing: 0,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle blockquote({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle blockquote() {
+    return GoogleFonts.geist(
       fontSize: 16,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.italic,
       fontWeight: FontWeight.w400,
       height: 24 / 16,
       letterSpacing: 0,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle table({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle table() {
+    return GoogleFonts.geist(
       fontSize: 16,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w700,
       height: 24 / 16,
       letterSpacing: 0,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle list({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle list() {
+    return GoogleFonts.geist(
       fontSize: 16,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w400,
       height: 24 / 16,
       letterSpacing: 0,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle lead({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle lead() {
+    return GoogleFonts.geist(
       fontSize: 20,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w400,
       height: 28 / 20,
       letterSpacing: 0,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle large({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle large() {
+    return GoogleFonts.geist(
       fontSize: 18,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w600,
       height: 28 / 18,
       letterSpacing: 0,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle small({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle small() {
+    return GoogleFonts.geist(
       fontSize: 14,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w500,
       height: 14 / 14,
       letterSpacing: 0,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 
-  static TextStyle muted({
-    required String family,
-  }) {
-    return TextStyle(
+  static TextStyle muted() {
+    return GoogleFonts.geist(
       fontSize: 14,
       decoration: TextDecoration.none,
       fontStyle: FontStyle.normal,
       fontWeight: FontWeight.w400,
       height: 20 / 14,
       letterSpacing: 0,
-      fontFamily: family,
       textBaseline: TextBaseline.alphabetic,
-      leadingDistribution: TextLeadingDistribution.even,
-    );
+    ).fallback(leadingDistribution: TextLeadingDistribution.even);
   }
 }