feat: add center-center position

src/assets.tsx

@@ -23,7 +23,7 @@ export const getAsset = (type: ToastTypes): JSX.Element | null => {
 
 const bars = Array(12).fill(0);
 
-export const Loader = ({ visible, className }: { visible: boolean, className?: string }) => {
+export const Loader = ({ visible, className }: { visible: boolean; className?: string }) => {
   return (
     <div className={['sonner-loading-wrapper', className].filter(Boolean).join(' ')} data-visible={visible}>
       <div className="sonner-spinner">

src/styles.css

@@ -82,6 +82,11 @@
   bottom: max(var(--offset), env(safe-area-inset-bottom));
 }
 
+:where([data-sonner-toaster][data-x-position='center'][data-y-position='center']) {
+  top: calc(50% - calc(var(--front-toast-height) / 2));
+  left: 50%;
+}
+
 :where([data-sonner-toast]) {
   --y: translateY(100%);
   --lift-amount: calc(var(--lift) * var(--gap));

src/types.ts

@@ -84,7 +84,14 @@ export function isAction(action: Action | React.ReactNode): action is Action {
   return (action as Action).label !== undefined;
 }
 
-export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+export type Position =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'top-center'
+  | 'bottom-center'
+  | 'center-center';
 export interface HeightT {
   height: number;
   toastId: number | string;

website/src/components/Position/index.tsx

@@ -2,7 +2,15 @@ import { toast, useSonner } from 'sonner';
 import { CodeBlock } from '../CodeBlock';
 import React from 'react';
 
-const positions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'] as const;
+const positions = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right',
+  'center-center',
+] as const;
 
 export type Position = (typeof positions)[number];
 
@@ -33,7 +41,7 @@ export const Position = ({
                 setPosition(position);
                 removeAllToasts();
               }
-			  
+
               toast('Event has been created', {
                 description: 'Monday, January 3rd at 6:00pm',
               });

website/src/pages/toast.mdx

@@ -147,7 +147,7 @@ function. It will not affect the positioning of other toasts.
 
 ```jsx
 // Available positions:
-// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
+// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right, center-center
 toast('Hello World', {
   position: 'top-center',
 });

website/src/pages/toaster.mdx

@@ -21,7 +21,7 @@ Changes the place where all toasts will be rendered.
 
 ```jsx
 // Available positions:
-// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
+// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right, center-center
 <Toaster position="top-center" />
 ```