feat: warning variant

docs/docs/sonner.md

@@ -25,7 +25,7 @@
 | Headless           | ❌            | ✅         |
 | Dynamic position   | ❌            | ✅         |
 | important          | ❌            | ✅         |
-| warning variant    | ❌            | ✅         |
+| warning variant    | ✅            | ✅         |
 
 ## Toaster:
 

docs/docs/toast.md

@@ -48,6 +48,14 @@ Use the toast.error() function to display an error message. By default, it rende
 toast.error('My error toast');
 ```
 
+### Warning
+
+The toast.warning() function can be used to display a warning message. By default, it renders a warning icon in front of the message.
+
+```jsx
+toast.warning('My warning toast');
+```
+
 ### Action
 
 Renders an action button with a callback function. The action object should contain a label and an `onClick` function. The action and its label can be customized with the `actionButtonStyles` and `actionButtonTextStyles` params, respectively.

example/src/ToastDemo.tsx

@@ -324,6 +324,11 @@ export const ToastDemo: React.FC = () => {
         title="Loading variant"
         onPress={() => toast.loading('Loading...')}
       />
+      <Button
+        title="Dynamic position"
+        onPress={() => toast('Dynamic position', { position: 'bottom-center' })}
+      />
+      <Button title="Warning toast" onPress={() => toast.warning('Warning')} />
     </ScrollView>
   );
 };

src/toast-fns.ts

@@ -25,6 +25,14 @@ toast.error = (title: string, options = {}) => {
   });
 };
 
+toast.warning = (title: string, options = {}) => {
+  return getToastContext().addToast({
+    ...options,
+    title,
+    variant: 'warning',
+  });
+};
+
 toast.info = (title: string, options = {}) => {
   return getToastContext().addToast({
     title,

src/toast.tsx

@@ -1,4 +1,10 @@
-import { CircleCheck, CircleX, Info, X } from 'lucide-react-native';
+import {
+  CircleCheck,
+  CircleX,
+  Info,
+  TriangleAlert,
+  X,
+} from 'lucide-react-native';
 import * as React from 'react';
 import { ActivityIndicator, Pressable, Text, View } from 'react-native';
 import Animated from 'react-native-reanimated';
@@ -405,6 +411,8 @@ export const ToastIcon: React.FC<Pick<ToastProps, 'variant'>> = ({
       return <CircleCheck size={20} color={colors.success} />;
     case 'error':
       return <CircleX size={20} color={colors.error} />;
+    case 'warning':
+      return <TriangleAlert size={20} color={colors.warning} />;
     default:
     case 'info':
       return <Info size={20} color={colors.info} />;

src/types.ts

@@ -39,7 +39,7 @@ export type ToastTheme = 'light' | 'dark' | 'system';
 
 export type ToastSwipeDirection = 'left' | 'up';
 
-export type ToastVariant = 'success' | 'error' | 'info' | 'loading';
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info' | 'loading';
 
 export type ToastAction = {
   label: string;
@@ -106,6 +106,7 @@ export type ToasterProps = StyleProps & {
   icons?: {
     success?: React.ReactNode;
     error?: React.ReactNode;
+    warning?: React.ReactNode;
     info?: React.ReactNode;
     loading?: React.ReactNode;
   };
@@ -145,6 +146,7 @@ export declare const toast: ((
   success: (message: string, data?: ExternalToast) => string | number;
   info: (message: string, data?: ExternalToast) => string | number;
   error: (message: string, data?: ExternalToast) => string | number;
+  warning: (message: string, data?: ExternalToast) => string | number;
   custom: (jsx: React.ReactElement, data?: ExternalToast) => string | number;
   promise: <T>(
     promise: Promise<T>,

src/use-colors.ts

@@ -10,6 +10,7 @@ const light = {
   'border-secondary': '#e6e3e3',
   'success': '#3c8643',
   'error': '#ff3a41',
+  'warning': '#e37a00',
   'info': '#286efa',
 };
 
@@ -22,6 +23,7 @@ const dark: typeof light = {
   'border-secondary': '#302B2B',
   'success': '#9ED397',
   'error': '#FF999D',
+  'warning': '#ffd089',
   'info': '#B3CDFF',
 };