feat(toast): introduce Toast component

.changeset/shaggy-beers-breathe.md

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

apps/docs/config/routes.json

@@ -436,7 +436,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,24 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+        <Button
+          key={color}
+          color={color}
+          variant={"flat"}
+          onPress={() =>
+            addToast({
+              title: "Toast title",
+              description: "Toast displayed successfully",
+              color: color,
+            })
+          }
+        >
+          {color}
+        </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,
+};

apps/docs/content/components/toast/custom-close-icon.raw.jsx

@@ -0,0 +1,44 @@
+import {addToast, Button} from "@heroui/react";
+
+const CustomToastComponent = () => {
+  return (
+    <Button
+      variant="flat"
+      onPress={() => {
+        addToast({
+          hideIcon: true,
+          title: "Toast Title",
+          description: "Toast Description",
+          classNames: {
+            closeButton: "opacity-100 absolute right-4 top-1/2 -translate-y-1/2",
+          },
+          closeIcon: (
+            <svg
+              fill="none"
+              height="32"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              width="32"
+            >
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          ),
+        });
+      }}
+    >
+      Show Toast
+    </Button>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <CustomToastComponent />
+    </div>
+  );
+}

apps/docs/content/components/toast/custom-close-icon.ts

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

apps/docs/content/components/toast/custom-styles.raw.jsx

@@ -0,0 +1,50 @@
+import {addToast, Button, cn} from "@heroui/react";
+
+const CustomToastComponent = () => {
+  return (
+    <Button
+      variant="flat"
+      onPress={() => {
+        addToast({
+          title: "Successfull!",
+          description: "Document uploaded to cloud successfully.",
+          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 (
+    <div className="flex gap-2">
+      <CustomToastComponent />
+    </div>
+  );
+}

apps/docs/content/components/toast/custom-styles.ts

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

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

@@ -0,0 +1,17 @@
+import color from "./color";
+import variants from "./variants";
+import customStyles from "./custom-styles";
+import radius from "./radius";
+import placement from "./placement";
+import usage from "./usage";
+import customCloseIcon from "./custom-close-icon";
+
+export const toastContent = {
+  color,
+  variants,
+  customStyles,
+  radius,
+  placement,
+  usage,
+  customCloseIcon,
+};

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

@@ -0,0 +1,36 @@
+import {addToast, Button, ToastProvider} from "@heroui/react";
+import React from "react";
+
+export default function App() {
+  const [placement, setPlacement] = React.useState("right-bottom");
+
+  return (
+    <>
+      <ToastProvider placement={placement} toastOffset={placement.includes("top") ? 60 : 0} />
+      <div className="flex flex-wrap gap-2">
+        {[
+          "left-top",
+          "right-top",
+          "center-top",
+          "left-bottom",
+          "right-bottom",
+          "center-bottom",
+        ].map((position) => (
+          <Button
+            key={position}
+            variant={"flat"}
+            onPress={() => {
+              setPlacement(position);
+              addToast({
+                title: "Toast title",
+                description: "Toast displayed successfully",
+              });
+            }}
+          >
+            {position}
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,24 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {["none", "sm", "md", "lg", "full"].map((radius) => (
+        <Button
+          key={radius}
+          radius={radius}
+          variant={"flat"}
+          onPress={() =>
+            addToast({
+              title: "Toast title",
+              description: "Toast displayed successfully",
+              radius: radius,
+            })
+          }
+        >
+          {radius}
+        </Button>
+      ))}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,118 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+          });
+        }}
+      >
+        Default
+      </Button>
+
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+          });
+        }}
+      >
+        With Description
+      </Button>
+
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            hideIcon: true,
+          });
+        }}
+      >
+        Hidden Icon
+      </Button>
+
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            promise: new Promise((resolve) => setTimeout(resolve, 3000)),
+          });
+        }}
+      >
+        Promise (3000ms)
+      </Button>
+
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            endContent: (
+              <Button size="sm" variant="flat">
+                Upgrade
+              </Button>
+            ),
+            variant: "faded",
+          });
+        }}
+      >
+        With endContent
+      </Button>
+
+      <Button
+        variant="flat"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            timeout: 3000,
+            shouldShowTimeoutProgess: true,
+          });
+        }}
+      >
+        Show Timeout Progress (3000ms)
+      </Button>
+
+      <Button
+        variant="flat"
+        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>
+            ),
+          })
+        }
+      >
+        Custom Icon
+      </Button>
+    </div>
+  );
+}

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

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