feat(toast): introduce Toast component

.changeset/shaggy-beers-breathe.md

@@ -0,0 +1,7 @@
+---
+"@nextui-org/shared-icons": patch
+"@nextui-org/toast": patch
+"@nextui-org/theme": patch
+---
+
+Introducing the toast component(#2560)

apps/docs/app/examples/toast/color/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+import {addToast, Button, ToastProvider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <>
+      <ToastProvider />
+      <div className="flex flex-wrap gap-x-2">
+        {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+          <Button
+            key={color}
+            className="w-fit m-2"
+            // @ts-ignore
+            color={color}
+            variant={"bordered"}
+            onPress={() =>
+              addToast({
+                title: "Toast title",
+                description: "Toast displayed successfully",
+                // @ts-ignore
+                color: color,
+              })
+            }
+          >
+            Show {color} toast
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}

apps/docs/app/examples/toast/custom-icon/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+import {addToast, Button, ToastProvider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <>
+      <ToastProvider />
+      <Button
+        className="w-fit m-2"
+        onPress={() =>
+          addToast({
+            title: "Toast title",
+            description: "Toast displayed successfully",
+            icon: (
+              <svg height={24} viewBox="0 0 24 24" width={24}>
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeMiterlimit={10}
+                  strokeWidth={1.5}
+                >
+                  <path
+                    d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
+                    data-name="Stroke 1"
+                  />
+                  <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
+                </g>
+              </svg>
+            ),
+          })
+        }
+      >
+        Show toast with custom icon
+      </Button>
+    </>
+  );
+}

apps/docs/app/examples/toast/custom-style/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import {addToast, Button, cn, ToastProvider} from "@nextui-org/react";
+
+const CustomToastComponent = () => {
+  return (
+    <>
+      <Button
+        className="m-2"
+        onPress={() => {
+          addToast({
+            title: "Sucessful!",
+            description: "Document uploaded to cloud successful.",
+            classNames: {
+              base: cn([
+                "bg-default-50 dark:bg-background shadow-sm",
+                "border-1",
+                "relative before:content-[''] before:absolute before:z-10",
+                "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+                "rounded-l-none border-l-0",
+                "min-w-[350px]",
+                "rounded-md",
+                "flex flex-col items-start",
+                "before:bg-primary border-primary-200 dark:border-primary-100",
+                ,
+              ]),
+              icon: "w-6 h-6 fill-current",
+            },
+            endContent: (
+              <div className="ms-11 my-2 flex gap-x-2">
+                <Button color={"primary"} size="sm" variant="bordered">
+                  View Document
+                </Button>
+                <Button className="underline-offset-2" color={"primary"} size="sm" variant="light">
+                  Maybe Later
+                </Button>
+              </div>
+            ),
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+    </>
+  );
+};
+
+export default function App() {
+  return (
+    <>
+      <ToastProvider />
+      <div className="flex gap-2">
+        <CustomToastComponent />
+      </div>
+    </>
+  );
+}

apps/docs/app/examples/toast/hidden-icon/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+import {addToast, Button, ToastProvider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <>
+      <ToastProvider />
+      <Button
+        className="w-fit m-2"
+        onPress={() =>
+          addToast({
+            title: "Toast title",
+            description: "Toast displayed successfully",
+            hideIcon: true,
+          })
+        }
+      >
+        Show toast with hidden icon
+      </Button>
+    </>
+  );
+}

apps/docs/app/examples/toast/position/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+import {addToast, Button, ToastProvider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <>
+      <ToastProvider position="center-bottom" />
+      <div className="flex flex-wrap gap-x-2">
+        <Button
+          className="w-fit m-2"
+          onPress={() =>
+            addToast({
+              title: "Toast title",
+              description: "Toast displayed successfully",
+            })
+          }
+        >
+          Show toast at right-top
+        </Button>
+      </div>
+    </>
+  );
+}

apps/docs/app/examples/toast/radius/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import {addToast, Button, ToastProvider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <>
+      <ToastProvider />
+      <div className="flex flex-wrap gap-x-2">
+        {["none", "sm", "md", "lg", "full"].map((radius) => (
+          <Button
+            key={radius}
+            className="w-fit m-2"
+            variant={"bordered"}
+            onPress={() =>
+              addToast({
+                title: "Toast title",
+                description: "Toast displayed successfully",
+                // @ts-ignore
+                radius: radius,
+                color: "primary",
+              })
+            }
+          >
+            Show radius-{radius} toast
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}

apps/docs/app/examples/toast/usage/page.tsx

@@ -0,0 +1,21 @@
+"use client";
+import {addToast, Button, ToastProvider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <>
+      <ToastProvider />
+      <Button
+        className="w-fit m-2"
+        onPress={() =>
+          addToast({
+            title: "Toast title",
+            description: "Toast displayed successfully",
+          })
+        }
+      >
+        Show toast
+      </Button>
+    </>
+  );
+}

apps/docs/app/examples/toast/variant/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+import {addToast, Button, ToastProvider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <>
+      <ToastProvider />
+      <div className="flex flex-wrap gap-x-2">
+        {["solid", "bordered", "flat", "faded"].map((variant) => (
+          <Button
+            key={variant}
+            className="w-fit m-2"
+            variant={"bordered"}
+            onPress={() =>
+              addToast({
+                title: "Toast title",
+                description: "Toast displayed successfully",
+                // @ts-ignore
+                variant: variant,
+                color: "secondary",
+              })
+            }
+          >
+            Show {variant} toast
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}

apps/docs/app/examples/toast/with-action/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+import {addToast, Button, ToastProvider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <>
+      <ToastProvider />
+      <Button
+        className="w-fit m-2"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            endContent: (
+              <Button color="warning" size="sm" variant="flat">
+                Upgrade
+              </Button>
+            ),
+            color: "warning",
+            variant: "faded",
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+    </>
+  );
+}

apps/docs/app/examples/toast/with-timeout/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+import {addToast, Button, ToastProvider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <>
+      <ToastProvider />
+      <Button
+        className="w-fit m-2"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            timeout: 3000,
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+    </>
+  );
+}

apps/docs/config/routes.json

@@ -423,7 +423,7 @@
           "title": "Toast",
           "keywords": "toast, notification, message",
           "path": "/docs/components/toast.mdx",
-          "comingSoon": true
+          "newPost": true
         },
         {
           "key": "textarea",

apps/docs/content/components/toast/color.raw.jsx

@@ -0,0 +1,30 @@
+import {addToast, Button, ToastProvider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <>
+      <ToastProvider />
+      <div className="flex flex-wrap gap-x-2">
+        {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+          <Button
+            key={color}
+            className="w-fit m-2"
+            // @ts-ignore
+            color={color}
+            variant={"bordered"}
+            onPress={() =>
+              addToast({
+                title: "Toast title",
+                description: "Toast displayed successfully",
+                // @ts-ignore
+                color: color,
+              })
+            }
+          >
+            Show {color} toast
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}

apps/docs/content/components/toast/color.ts

@@ -0,0 +1,9 @@
+import App from "./color.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};