chore: nits

packages/components/toast/package.json

@@ -43,6 +43,7 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
+    "@nextui-org/progress": "workspace:*",
     "@react-aria/button": "3.9.5",
     "@react-aria/toast": "3.0.0-beta.15",
     "@react-aria/utils": "3.24.1",

packages/components/toast/src/toast-provider.tsx

@@ -27,7 +27,7 @@ export const ToastProvider = ({maxVisibleToasts = 5}: ToastProviderProps) => {
     return null;
   }
 
-  return <>{<ToastRegion toastQueue={toastQueue} />}</>;
+  return <ToastRegion toastQueue={toastQueue} />;
 };
 
 export const addToast = ({

packages/components/toast/src/toast-region.tsx

@@ -18,7 +18,7 @@ export function ToastRegion<T extends ToastType>({toastQueue, ...props}: ToastRe
       <div
         {...regionProps}
         ref={ref}
-        className="fixed bottom-0 left-0 w-screen flex flex-col items-center justify-center"
+        className="fixed bottom-6 right-6 w-screen flex flex-col items-end justify-center"
       >
         {toastQueue.visibleToasts.map((toast: QueuedToast<ToastType>) => {
           return (

packages/components/toast/src/toast.tsx

@@ -2,8 +2,7 @@ import {forwardRef} from "@nextui-org/system";
 import {Button, ButtonProps} from "@nextui-org/button";
 import {CloseIcon} from "@nextui-org/shared-icons";
 import {motion, AnimatePresence} from "framer-motion";
-
-import {Progress} from "../../../core/react/src";
+import {Progress} from "@nextui-org/progress";
 
 import {UseToastProps, useToast} from "./use-toast";
 

packages/components/toast/src/use-toast.ts

@@ -149,8 +149,8 @@ export function useToast<T extends ToastType>(originalProps: UseToastProps<T>) {
   const isProgressBarHidden = toast.timeout ? "block" : "hidden";
   const progressBarProps = {
     classNames: {
-      track: "bg-default-200",
-      indicator: "bg-default-700/40",
+      track: slots.progressTrack({class: clsx(classNames?.progressTrack)}),
+      indicator: "bg-default-600",
     },
     radius: "none",
     isDisabled: true,

packages/components/toast/stories/toast.stories.tsx

@@ -58,7 +58,13 @@ export const Default = {
   render: Template,
   args: {
     ...defaultProps,
-    variant: "bordered",
-    color: "danger",
+  },
+};
+
+export const WithTimeout = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    timeout: 3000,
   },
 };

packages/core/theme/src/components/toast.ts

@@ -43,9 +43,10 @@ const toast = tv({
       "bottom-0",
       "w-full",
       "overflow-hidden",
-      "bg-black-500",
+      "bg-green-500",
       "rounded-none",
     ],
+    progressTrack: ["bg-default-200"],
     closeButton: [
       "w-4 h-4 min-w-4 p-0.5 absolute -right-1 -top-1 flex items-center justify-center bg-default-100 hover:bg-default-200 text-default-400 hover:text-default-600 border border-1 border-default-400",
     ],
@@ -62,12 +63,23 @@ const toast = tv({
     },
     color: {
       default: "",
-      primary: "",
-      secondary: "",
-      success: "",
-      warning: "",
-      danger: "",
+      primary: {
+        progressTrack: "bg-primary-200",
+      },
+      secondary: {
+        progressTrack: "bg-secondary-200",
+      },
+      success: {
+        progressTrack: "bg-success-200",
+      },
+      warning: {
+        progressTrack: "bg-warning-200",
+      },
+      danger: {
+        progressTrack: "bg-danger-200",
+      },
     },
+    position: {},
   },
   defaultVariants: {
     size: "xs",
@@ -80,34 +92,40 @@ const toast = tv({
       color: "primary",
       class: {
         base: "bg-primary-100/40 text-primary-400",
+        closeButton: "bg-primary-100 hover:bg-primary-200 border-primary-400 text-primary-400",
       },
     },
     {
       variant: "flat",
       color: "secondary",
       class: {
         base: "bg-secondary-100/40 text-secondary-400",
+        closeButton:
+          "bg-secondary-100 hover:bg-secondary-200 border-secondary-400 text-secondary-400",
       },
     },
     {
-      variant: "faded",
+      variant: "flat",
       color: "success",
       class: {
         base: "bg-success-100/40 text-success-400",
+        closeButton: "bg-success-100 hover:bg-success-200 border-success-400 text-success-400",
       },
     },
     {
-      variant: "faded",
+      variant: "flat",
       color: "warning",
       class: {
         base: "bg-warning-100/40 text-warning-400",
+        closeButton: "bg-warning-100 hover:bg-warning-200 border-warning-400 text-warning-400",
       },
     },
     {
-      variant: "faded",
+      variant: "flat",
       color: "danger",
       class: {
         base: "bg-danger-100/40 text-danger-400",
+        closeButton: "bg-danger-100 hover:bg-danger-200 border-danger-400 text-danger-400",
       },
     },
     // faded and color
@@ -158,8 +176,7 @@ const toast = tv({
       color: "primary",
       class: {
         base: "border-primary-400 text-primary-400",
-        closeButton:
-          "bg-secondary-100 hover:bg-secondary-200 border-secondary-400 text-secondary-400",
+        closeButton: "bg-primary-100 hover:bg-primary-200 border-primary-400 text-primary-400",
       },
     },
     {