docs: add animationOnClose playground component

website/src/components/playground/toastAnimation.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { toast, type ToastAnimations } from "@pheralb/toast";
+
+import { Button } from "@/ui/button";
+import CodeblockClient from "@/components/codeblock/client";
+import { ArrowDownUpIcon, ArrowRightLeftIcon, CheckIcon } from "lucide-react";
+import { useDocsStore } from "@/store";
+
+const ToastAnimation = () => {
+  const { toastAnimation, setToastAnimation } = useDocsStore();
+
+  const handleChangeAnimation = (animation: ToastAnimations) => {
+    setToastAnimation(animation);
+    toast.default({
+      text: `A default toast 🚀`,
+      description: `✨ @pheralb/toast`,
+    });
+  };
+
+  return (
+    <div className="my-2 flex flex-col space-y-2">
+      <div className="flex items-center space-x-2 overflow-y-auto">
+        <Button
+          variant="outline"
+          onClick={() => handleChangeAnimation("default")}
+        >
+          {toastAnimation === "default" ? (
+            <CheckIcon size={14} />
+          ) : (
+            <ArrowDownUpIcon size={14} />
+          )}
+          <span>Default</span>
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => handleChangeAnimation("swipe")}
+        >
+          {toastAnimation === "swipe" ? (
+            <CheckIcon size={14} />
+          ) : (
+            <ArrowRightLeftIcon size={14} />
+          )}
+          <span>Swipe</span>
+        </Button>
+      </div>
+      <CodeblockClient
+        code={`<Toaster
+  toastOptions={{
+    animationOnClose: "${toastAnimation}",
+  }}
+/>`}
+        lang="tsx"
+      />
+    </div>
+  );
+};
+
+export default ToastAnimation;

website/src/docs/options.mdx

@@ -52,6 +52,12 @@ import { Info, CircleX, CircleAlert, CircleCheck, Loader } from "lucide-react";
 
 > 💡 To modify the icon of a **single** toast: [`toast - Custom Icon`](/toast#custom-icon)
 
+## `animationOnClose`
+
+By default, the animation when closing a toast is `default` (`slide-down`). You can change this value using the `animationOnClose` property:
+
+<ToastAnimation />
+
 ## Actions buttons
 
 - `defaultActionContent`: Default content for the action button. It can be a string or a `ReactNode`.

website/src/mdx/components.tsx

@@ -13,6 +13,9 @@ import {
   ToastLoadingExample,
 } from "@/components/playground/toast";
 import { Positions, ThemeExamples } from "@/components/playground/toaster";
+import ToastAnimation from "@/components/playground/toastAnimation";
+
+// Local Components:
 import CodeblockMDX from "@/components/codeblock/mdx";
 
 interface MDXComponentsProps {
@@ -35,6 +38,7 @@ export function MDX(props: MDXComponentsProps) {
         ToastVariantExamples,
         ToastActionsExamples,
         ToastLoadingExample,
+        ToastAnimation,
       }}
     />
   );

website/src/providers/toasterProvider.tsx

@@ -10,14 +10,16 @@ import { useDocsStore } from "@/store";
 import { useTheme } from "next-themes";
 
 const ToasterProvider = (props: ToasterProperties) => {
-  const { applyCustomTheme, toastPosition, toastTheme } = useDocsStore();
+  const { applyCustomTheme, toastPosition, toastTheme, toastAnimation } =
+    useDocsStore();
   const { theme } = useTheme();
   return (
     <Toaster
       position={toastPosition}
       theme={toastTheme ?? (theme as ToastTheme)}
       toastOptions={{
         font: applyCustomTheme ? applyCustomTheme.font : "font-sans",
+        animationOnClose: toastAnimation,
         ...applyCustomTheme,
       }}
       {...props}

website/src/store/index.ts

@@ -1,4 +1,5 @@
 import type {
+  ToastAnimations,
   ToastOptions,
   ToastPosition,
   ToastTheme,
@@ -11,19 +12,23 @@ interface DocsStore {
   toastVariant: ToastVariant;
   toastTheme: ToastTheme | undefined;
   applyCustomTheme: ToastOptions | undefined;
+  toastAnimation: ToastAnimations;
   setApplyCustomTheme: (properties: ToastOptions | undefined) => void;
   setToastPosition: (position: ToastPosition) => void;
   setToastVariant: (variant: ToastVariant) => void;
   setToastTheme: (theme: ToastTheme | undefined) => void;
+  setToastAnimation: (animation: ToastAnimations) => void;
 }
 
 export const useDocsStore = create<DocsStore>((set) => ({
   toastPosition: "bottom-right",
   toastVariant: "success",
   toastTheme: undefined,
   applyCustomTheme: false,
+  toastAnimation: "default",
   setApplyCustomTheme: (apply) => set({ applyCustomTheme: apply }),
   setToastPosition: (position) => set({ toastPosition: position }),
   setToastVariant: (variant) => set({ toastVariant: variant }),
   setToastTheme: (theme) => set({ toastTheme: theme }),
+  setToastAnimation: (animation) => set({ toastAnimation: animation }),
 }));