From 6f37c36d8a6f1aaf3069af199789c52e2a47b96d Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Sat, 7 Sep 2024 21:59:28 +0800
Subject: [PATCH 1/3] feat: offset support

---
 example/src/App.tsx |  1 +
 src/animations.ts   | 25 +++++++++++++++++--------
 src/constants.ts    |  2 ++
 src/toaster.tsx     |  3 +++
 src/types.ts        |  1 +
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 27eff95..6fa8723 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -29,6 +29,7 @@ const App: React.FC = () => {
         </NavigationContainer>
         <Toaster
           position="top-center"
+          // offset={100}
           duration={3000}
           swipToDismissDirection="up"
           visibleToasts={4}
diff --git a/src/animations.ts b/src/animations.ts
index fb0a048..6d6b79c 100644
--- a/src/animations.ts
+++ b/src/animations.ts
@@ -7,28 +7,32 @@ import type { ToastPosition } from './types';
 export const ANIMATION_DURATION = 300;
 
 export const useToastLayoutAnimations = () => {
-  const { position } = useToastContext();
+  const { position, offset } = useToastContext();
 
   return React.useMemo(
     () => ({
       entering: () => {
         'worklet';
-        return getToastEntering({ position });
+        return getToastEntering({ position, offset });
       },
       exiting: () => {
         'worklet';
-        return getToastExiting({ position });
+        return getToastExiting({ position, offset });
       },
     }),
-    [position]
+    [offset, position]
   );
 };
 
 type GetToastAnimationParams = {
   position: ToastPosition;
+  offset: number;
 };
 
-export const getToastEntering = ({ position }: GetToastAnimationParams) => {
+export const getToastEntering = ({
+  position,
+  offset,
+}: GetToastAnimationParams) => {
   'worklet';
 
   const animations = {
@@ -36,7 +40,9 @@ export const getToastEntering = ({ position }: GetToastAnimationParams) => {
     transform: [
       { scale: withTiming(1, { easing: easeOutCirc }) },
       {
-        translateY: withTiming(0, { easing: easeOutCirc }),
+        translateY: withTiming(position === 'top-center' ? offset : -offset, {
+          easing: easeOutCirc,
+        }),
       },
     ],
   };
@@ -57,7 +63,10 @@ export const getToastEntering = ({ position }: GetToastAnimationParams) => {
   };
 };
 
-export const getToastExiting = ({ position }: GetToastAnimationParams) => {
+export const getToastExiting = ({
+  position,
+  offset,
+}: GetToastAnimationParams) => {
   'worklet';
 
   const animations = {
@@ -75,7 +84,7 @@ export const getToastExiting = ({ position }: GetToastAnimationParams) => {
     opacity: 1,
     transform: [
       {
-        translateY: 0,
+        translateY: position === 'top-center' ? offset : -offset,
       },
     ],
   };
diff --git a/src/constants.ts b/src/constants.ts
index 00028e1..fdbb85b 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -3,6 +3,7 @@ import type { ToastPosition, ToastSwipeDirection, ToastVariant } from './types';
 export const toastDefaultValues: {
   duration: number;
   position: ToastPosition;
+  offset: number;
   swipeToDismissDirection: ToastSwipeDirection;
   variant: ToastVariant;
   visibleToasts: number;
@@ -13,6 +14,7 @@ export const toastDefaultValues: {
 } = {
   duration: 4000,
   position: 'top-center',
+  offset: 0,
   swipeToDismissDirection: 'up',
   variant: 'info',
   visibleToasts: 3,
diff --git a/src/toaster.tsx b/src/toaster.tsx
index fd5c9a4..1be56e3 100644
--- a/src/toaster.tsx
+++ b/src/toaster.tsx
@@ -32,6 +32,7 @@ export const Toaster: React.FC<ToasterProps> = (props) => {
 export const ToasterUI: React.FC<ToasterProps> = ({
   duration = toastDefaultValues.duration,
   position = toastDefaultValues.position,
+  offset = toastDefaultValues.offset,
   visibleToasts = toastDefaultValues.visibleToasts,
   swipToDismissDirection = toastDefaultValues.swipeToDismissDirection,
   closeButton,
@@ -136,6 +137,7 @@ export const ToasterUI: React.FC<ToasterProps> = ({
     () => ({
       duration: duration ?? toastDefaultValues.duration,
       position: position ?? toastDefaultValues.position,
+      offset: offset ?? toastDefaultValues.offset,
       swipToDismissDirection:
         swipToDismissDirection ?? toastDefaultValues.swipeToDismissDirection,
       closeButton: closeButton ?? toastDefaultValues.closeButton,
@@ -149,6 +151,7 @@ export const ToasterUI: React.FC<ToasterProps> = ({
     [
       duration,
       position,
+      offset,
       swipToDismissDirection,
       closeButton,
       unstyled,
diff --git a/src/types.ts b/src/types.ts
index 3d51580..abede2c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -128,6 +128,7 @@ export type ToasterContextType = Required<
     | 'styles'
     | 'classNames'
     | 'icons'
+    | 'offset'
   >
 > & {
   addToast: AddToastContextHandler;

From 27ab03ceb3663aa0b978966c20df4bfd8b1c18f9 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Sat, 7 Sep 2024 22:00:56 +0800
Subject: [PATCH 2/3] docs: update

---
 docs/docs/Toaster.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/docs/Toaster.md b/docs/docs/Toaster.md
index 02162d6..872990c 100644
--- a/docs/docs/Toaster.md
+++ b/docs/docs/Toaster.md
@@ -60,6 +60,7 @@ You can provide default styles for all toasts by passing `style` and `className`
 | theme                    |                                          `light`, `dark`                                           |      `light` |
 | visibleToasts            |                                  Maximum number of visible toasts                                  |          `3` |
 | position                 |                              Place where the toasts will be rendered                               | `top-center` |
+| offset                   |                                   Offset from the top or bottom                                    |          `0` |
 | closeButton              |                                 Adds a close button to all toasts                                  |      `false` |
 | invert                   |                             Dark toasts in light mode and vice versa.                              |      `false` |
 | toastOptions             | These will act as default options for all toasts. See [toast()](/toast) for all available options. |         `{}` |

From 67e264c44c211aa5f340c4572de2047ffbc42e11 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Sat, 7 Sep 2024 22:43:01 +0800
Subject: [PATCH 3/3] docs: update

---
 docs/docs/sonner.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docs/sonner.md b/docs/docs/sonner.md
index 416ee3e..0eac2fe 100644
--- a/docs/docs/sonner.md
+++ b/docs/docs/sonner.md
@@ -43,7 +43,7 @@
 | dir                      | ❌                | ✅     |
 | richColors               | ❌                | ✅     |
 | expand                   | 🕸️                | ✅     |
-| offset                   | ❌                | ✅     |
+| offset                   | ✅                | ✅     |
 | hotkey                   | 🕸️                | ✅     |
 | loadingIcon              | ❌                | ✅     |
 | pauseWhenPageIsHidden    | ❌                | ✅     |