GS Alert

example/lib/home.dart

@@ -187,10 +187,14 @@ class _HomePageState extends State<HomePage> {
                   title: "GS Navigation Rail",
                   routePath: "/navigation-rail-preview",
                 ),
-                 const NavButton(
+                const NavButton(
                   title: "GS Slider",
                   routePath: "/slider-example",
                 ),
+                const NavButton(
+                  title: "GS Alert Box",
+                  routePath: "/alert-box-example",
+                ),
 
                 // // ===== Internal Testing Widgets =====
                 // const NavButton(

example/lib/routes/router.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:gluestack_ui_example/home.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/accordian_example.dart';
+import 'package:gluestack_ui_example/widgets/components/widgets/alert_box_example.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/bottom_sheet_example.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/navigation_rail_example.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/slider_example.dart';
@@ -199,6 +200,11 @@ final GoRouter router = GoRouter(
           builder: (context, state) => const SliderExample(),
         ),
 
+         GoRoute(
+          path: "alert-box-example",
+          builder: (context, state) => const AlertBoxExample(),
+        ),
+
         // Generate individual Storybook screens for every widget. This is referenced in docs website iframe.
         ...kStories.map(
           (item) => GoRoute(

example/lib/widgets/components/widgets/alert_box_example.dart

@@ -0,0 +1,93 @@
+import 'package:flutter/material.dart';
+import 'package:gluestack_ui/gluestack_ui.dart';
+import 'package:gluestack_ui_example/widgets/components/layout/base_layout.dart';
+import 'package:gluestack_ui_example/widgets/components/layout/custom_gs_layout.dart';
+import 'package:gluestack_ui_example/widgets/components/layout/drop_down.dart';
+
+class AlertBoxExample extends StatefulWidget {
+  const AlertBoxExample({super.key});
+
+  @override
+  State<AlertBoxExample> createState() => _AlertBoxExampleState();
+}
+
+class _AlertBoxExampleState extends State<AlertBoxExample> {
+  final List dropdownActionOptions = [
+    GSAlertBoxActions.success,
+    GSAlertBoxActions.info,
+    GSAlertBoxActions.error,
+    GSAlertBoxActions.warning,
+    GSAlertBoxActions.muted,
+  ];
+  GSAlertBoxActions selectedActionOption = GSAlertBoxActions.muted;
+
+  final List dropdownVariantOptions = [
+    GSAlertBoxVariants.solid,
+    GSAlertBoxVariants.outline,
+  ];
+  GSAlertBoxVariants selectedVariantOption = GSAlertBoxVariants.solid;
+  void updateVariantSelectedOption(dynamic newOption) {
+    setState(() {
+      selectedVariantOption = newOption;
+    });
+  }
+
+  void updateActionSelectedOption(dynamic newOption) {
+    setState(() {
+      selectedActionOption = newOption;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var code = '''
+  GSAlert(
+            description: const GSAlertText('Description of alert!'),
+            icon: const GSAlertBoxIcon(
+              iconData: Icons.info_outline,
+            ),
+            variant: $selectedVariantOption,
+            action: $selectedActionOption,
+          ),
+
+''';
+    return CustomGSLayout(
+      title: "AlertBox",
+      style: GSStyle(
+        dark: GSStyle(bg: $GSColors.black),
+      ),
+      body: BaseLayout(
+        code: code,
+        component: Center(
+          child: GSAlert(
+            description: const GSAlertText('Description of alert!'),
+            icon: const GSAlertBoxIcon(
+              iconData: Icons.info_outline,
+            ),
+            variant: selectedVariantOption,
+            action: selectedActionOption,
+          ),
+        ),
+        controls: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            CustomDropDown(
+              title: "action",
+              dropdownOptions: dropdownActionOptions,
+              selectedOption: selectedActionOption,
+              onChanged: updateActionSelectedOption,
+            ),
+            const SizedBox(height: 20),
+            CustomDropDown(
+              title: "variant",
+              dropdownOptions: dropdownVariantOptions,
+              selectedOption: selectedVariantOption,
+              onChanged: updateVariantSelectedOption,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/lib/widgets/storybook/widgets/alert_story.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:gluestack_ui/gluestack_ui.dart';
+import 'base_story_widget.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+final List<Option<int>> actionOptions =
+    generateEnumOptions(GSAlertBoxActions.values);
+final List<Option<int>> variantOptions =
+    generateEnumOptions(GSAlertBoxVariants.values);
+
+final class AlertStory extends StoryWidget {
+  @override
+  Story createStoryWidget() {
+    return Story(
+      name: storyName,
+      builder: (context) => GSAlert(
+        icon: const GSAlertBoxIcon(
+          iconData: Icons.info_outline,
+        ),
+        action: GSAlertBoxActions.values[context.knobs
+            .options(label: 'Action', initial: 0, options: actionOptions)],
+        variant: GSAlertBoxVariants.values[context.knobs
+            .options(label: 'Variant', initial: 0, options: variantOptions)],
+        style: GSStyle(),
+        description: const GSAlertText("Description of Alert!"),
+      ),
+    );
+  }
+
+  @override
+  String get routePath => "alert-preview";
+
+  @override
+  String get storyName => "Alert";
+}

example/lib/widgets/storybook/widgets/public.dart

@@ -1,3 +1,4 @@
+import 'package:gluestack_ui_example/widgets/storybook/widgets/alert_story.dart';
 import 'package:gluestack_ui_example/widgets/storybook/widgets/header_story.dart';
 import 'package:gluestack_ui_example/widgets/storybook/widgets/slider_story.dart';
 import 'package:gluestack_ui_example/widgets/storybook/widgets/tab_story.dart';
@@ -37,6 +38,7 @@ import 'accordion_story.dart';
 
 final List<StoryWidget> kStories = [
   AlertDialogStory(),
+  AlertStory(),
   AccordionStory(),
   AvatarStory(),
   BadgeStory(),

lib/gluestack_ui.dart

@@ -47,3 +47,4 @@ export 'src/widgets/gs_tabs/public.dart';
 export 'src/widgets/gs_layout/public.dart';
 export 'src/widgets/gs_header/public.dart';
 export 'src/widgets/gs_slider/public.dart';
+export 'src/widgets/gs_alert/public.dart';

lib/src/provider/gluestack_provider.dart

@@ -1,3 +1,7 @@
+import 'package:gluestack_ui/src/theme/config/alert_box/alert_box.dart';
+import 'package:gluestack_ui/src/theme/config/alert_box/alert_box_icon.dart';
+import 'package:gluestack_ui/src/theme/config/alert_box/alert_box_text.dart';
+
 import 'provider.dart';
 
 final getIt = GetIt.instance;
@@ -146,6 +150,11 @@ class GluestackCustomConfig {
   Map<String, dynamic>? sliderThumb;
   Map<String, dynamic>? sliderFilledTrack;
 
+  // AlertBox
+  Map<String, dynamic>? alert;
+  Map<String, dynamic>? alertIcon;
+  Map<String, dynamic>? alertText;
+
   //GS Layout
   Map<String, dynamic>? layout;
 
@@ -156,6 +165,12 @@ class GluestackCustomConfig {
     this.sliderTrack,
     this.sliderThumb,
     this.sliderFilledTrack,
+
+    // alertBox
+
+    this.alert,
+    this.alertIcon,
+    this.alertText,
     //tabs
     this.tabs,
     this.tabsTab,
@@ -316,6 +331,12 @@ class GluestackCustomConfig {
     sliderThumb = mergeConfigs(sliderThumbData, sliderThumb);
     sliderFilledTrack = mergeConfigs(sliderFilledTrackData, sliderFilledTrack);
 
+    // alert box
+
+    alert = mergeConfigs(alertBoxData, alert);
+    alertText = mergeConfigs(alertBoxTextData, alertText);
+    alertIcon = mergeConfigs(alertBoxIconData, alertIcon);
+
     //tabs
     tabs = mergeConfigs(tabsData, tabs);
     tabsTab = mergeConfigs(tabsTabData, tabsTab);

lib/src/theme/config/alert_box/alert_box.dart

@@ -0,0 +1,59 @@
+const Map<String, dynamic> alertBoxData = {
+  'alignItems': 'center',
+  'p': '\$3',
+  'flexDirection': 'row',
+  'borderRadius': '\$sm',
+  'variants': {
+    'action': {
+      'error': {
+        'bg': '\$backgroundError',
+        'borderColor': '\$error300',
+        '_icon': {
+          'color': '\$error500',
+        },
+      },
+      'warning': {
+        'bg': '\$backgroundWarning',
+        'borderColor': '\$warning300',
+        '_icon': {
+          'color': '\$warning500',
+        },
+      },
+      'success': {
+        'bg': '\$backgroundSuccess',
+        'borderColor': '\$success300',
+        '_icon': {
+          'color': '\$success500',
+        },
+      },
+      'info': {
+        'bg': '\$backgroundInfo',
+        'borderColor': '\$info300',
+        '_icon': {
+          'color': '\$info500',
+        },
+      },
+      'muted': {
+        'bg': '\$backgroundMuted',
+        'borderColor': '\$secondary300',
+        '_icon': {
+          'color': '\$secondary500',
+        },
+      },
+    },
+    'variant': {
+      'solid': {},
+      'outline': {
+        'borderWidth': '\$1',
+        'bg': '\$white',
+      },
+      'accent': {
+        'borderLeftWidth': '\$4',
+      },
+    },
+  },
+  'defaultProps': {
+    'variant': 'solid',
+    'action': 'info',
+  },
+};

lib/src/theme/config/alert_box/alert_box_icon.dart

@@ -0,0 +1,59 @@
+const Map<String, dynamic> alertBoxIconData = {
+  "variants": {
+    "size": {
+      "2xs": {
+        "h": "\$3",
+        "w": "\$3",
+        "props": {
+          // @ts-ignore
+          "size": 12,
+        },
+      },
+      "xs": {
+        "h": "\$3.5",
+        "w": "\$3.5",
+        "props": {
+          // @ts-ignore
+          "size": 14,
+        },
+      },
+      "sm": {
+        "h": "\$4",
+        "w": "\$4",
+        "props": {
+          // @ts-ignore
+          "size": 16,
+        },
+      },
+      "md": {
+        "h": "\$4.5",
+        "w": "\$4.5",
+        "props": {
+          // @ts-ignore
+          "size": 18,
+        },
+      },
+      "lg": {
+        "h": "\$5",
+        "w": "\$5",
+        "props": {
+          // @ts-ignore
+          "size": 20,
+        },
+      },
+      "xl": {
+        "h": "\$6",
+        "w": "\$6",
+        "props": {
+          // @ts-ignore
+          "size": 24,
+        },
+      },
+    },
+  },
+  "props": {
+    "size": "md",
+    // @ts-ignore
+    "fill": "none",
+  },
+};