feat: add toast.warn() function

site/components/sections/toast-example.tsx

@@ -27,6 +27,14 @@ const examples: Array<{
       toast.error("This didn't work.");
     },
   },
+  {
+    title: 'Warning',
+    emoji: '⚠️',
+    snippet: "toast.warn('Roadblocks ahead')",
+    action: () => {
+      toast.warn('Roadblocks ahead');
+    },
+  },
   {
     title: 'Promise',
     emoji: '⏳',

site/pages/docs/styling.mdx

@@ -41,6 +41,11 @@ You can style your notifications globally with the `toastOptions` inside the Toa
         background: 'red',
       },
     },
+    warn: {
+      style: {
+        background: 'yellow',
+      },
+    },
   }}
 />
 ```

site/pages/docs/toast.mdx

@@ -65,6 +65,14 @@ toast.error('This is an error!');
 
 Creates a notification with an animated error icon. It can be themed with the `iconTheme` option.
 
+### Warning
+
+```js
+toast.warn("I'm warning you!");
+```
+
+Creates a notification with an animated warning icon. It can be themed with the `iconTheme` option.
+
 ### Custom (JSX)
 
 ```js
@@ -132,6 +140,7 @@ Every type has its own duration. You can overwrite them `duration` with the toas
 | `blank`   | 4000     |
 | `error`   | 4000     |
 | `success` | 2000     |
+| `warn`    | 3000     |
 | `custom`  | 4000     |
 | `loading` | Infinity |
 

site/pages/docs/toaster.mdx

@@ -72,7 +72,7 @@ These will act as default options for all toasts. See [`toast()`](/docs/toast) f
 
 #### Type specific options
 
-You can change the defaults for a specific type by adding, `success: {}`, `error: {}`, `loading: {}` or `custom: {}`.
+You can change the defaults for a specific type by adding, `success: {}`, `error: {}`, `loading: {}`, `warn: {}` or `custom: {}`.
 
 ## Using a custom render function
 

src/components/toast-icon.tsx

@@ -5,6 +5,7 @@ import { Toast } from '../core/types';
 import { ErrorIcon, ErrorTheme } from './error';
 import { LoaderIcon, LoaderTheme } from './loader';
 import { CheckmarkIcon, CheckmarkTheme } from './checkmark';
+import { WarnIcon, WarnTheme } from './warn';
 
 const StatusWrapper = styled('div')`
   position: absolute;
@@ -42,6 +43,7 @@ export type IconThemes = Partial<{
   success: CheckmarkTheme;
   error: ErrorTheme;
   loading: LoaderTheme;
+  warn: WarnTheme;
 }>;
 
 export const ToastIcon: React.FC<{
@@ -60,18 +62,21 @@ export const ToastIcon: React.FC<{
     return null;
   }
 
+  const renderIcon = (type: Toast['type']) => {
+    switch (type) {
+      case 'error':
+        return <ErrorIcon {...iconTheme} />;
+      case 'warn':
+        return <WarnIcon {...iconTheme} />;
+      default:
+        return <CheckmarkIcon {...iconTheme} />;
+    }
+  };
+
   return (
     <IndicatorWrapper>
       <LoaderIcon {...iconTheme} />
-      {type !== 'loading' && (
-        <StatusWrapper>
-          {type === 'error' ? (
-            <ErrorIcon {...iconTheme} />
-          ) : (
-            <CheckmarkIcon {...iconTheme} />
-          )}
-        </StatusWrapper>
-      )}
+      {type !== 'loading' && <StatusWrapper>{renderIcon(type)}</StatusWrapper>}
     </IndicatorWrapper>
   );
 };

src/components/warn.tsx

@@ -0,0 +1,82 @@
+import { styled, keyframes } from 'goober';
+
+const circleAnimation = keyframes`
+from {
+  transform: scale(0);
+	opacity: 0;
+}
+to {
+  transform: scale(1);
+	opacity: 1;
+}`;
+
+const lineAnimation = keyframes`
+from {
+  transform: translateX(-50%) scale(0);
+	opacity: 0;
+  height: 0;
+}
+to {
+  transform: translateX(-50%) scale(1);
+  opacity: 1;
+  height: 8px;
+}`;
+
+const dotAnimation = keyframes`
+from {
+  transform: translateX(-50%) scale(0);
+	opacity: 0;
+  height: 0;
+}
+to {
+  transform: translateX(-50%) scale(1);
+  opacity: 1;
+  height: 2px;
+}`;
+
+export interface WarnTheme {
+  primary?: string;
+  secondary?: string;
+}
+
+export const WarnIcon = styled('div')<WarnTheme>`
+  width: 20px;
+  opacity: 0;
+  height: 20px;
+  border-radius: 50%;
+  background: ${(p) => p.primary || '#ffd00e'};
+  position: relative;
+
+  animation: ${circleAnimation} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    forwards;
+  animation-delay: 100ms;
+
+  &:before,
+  &:after {
+    content: '';
+    box-sizing: border-box;
+    animation-delay: 200ms;
+    position: absolute;
+    display: block;
+    transform: translateX(-50%);
+    left: 50%;
+    border: solid ${(p) => p.secondary || '#000'};
+    border-width: 0 2px 0 0;
+    width: 2px;
+    opacity: 0;
+  }
+
+  &:before {
+    top: 4px;
+    animation: ${lineAnimation} 0.2s ease-out forwards;
+    animation-delay: 150ms;
+    border-radius: 3px;
+  }
+
+  &:after {
+    bottom: 4px;
+    animation: ${dotAnimation} 0.2s ease-out forwards;
+    animation-delay: 180ms;
+    border-radius: 50%;
+  }
+`;

src/core/store.ts

@@ -174,6 +174,7 @@ const defaultTimeouts: {
   success: 2000,
   loading: Infinity,
   custom: 4000,
+  warn: 3000,
 };
 
 export const useStore = (toastOptions: DefaultToastOptions = {}): State => {

src/core/toast.ts

@@ -47,6 +47,7 @@ toast.error = createHandler('error');
 toast.success = createHandler('success');
 toast.loading = createHandler('loading');
 toast.custom = createHandler('custom');
+toast.warn = createHandler('warn');
 
 toast.dismiss = (toastId?: string) => {
   dispatch({

src/core/types.ts

@@ -1,6 +1,12 @@
 import { CSSProperties } from 'react';
 
-export type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
+export type ToastType =
+  | 'success'
+  | 'error'
+  | 'loading'
+  | 'blank'
+  | 'custom'
+  | 'warn';
 export type ToastPosition =
   | 'top-left'
   | 'top-center'

src/index.ts

@@ -8,6 +8,7 @@ export { Toaster } from './components/toaster';
 export { CheckmarkIcon } from './components/checkmark';
 export { ErrorIcon } from './components/error';
 export { LoaderIcon } from './components/loader';
+export { WarnIcon } from './components/warn';
 
 export { toast };
 export default toast;