toaster

src/foundations/ui/modal/modal.tsx

@@ -24,6 +24,21 @@ const useDialogElement = (
 ) => {
   const ref = useRef<HTMLDialogElement>(null);
 
+  // Emit modal-open or modal-close custom event when the dialog is opened or closed,
+  // so other components can react to it
+  useEffect(() => {
+    const origin = ref.current;
+    if (!origin) return;
+
+    const openEvent = new CustomEvent(
+      open ? 'ui:modal-open' : 'ui:modal-close',
+      {
+        detail: { origin: ref.current },
+      }
+    );
+    window.dispatchEvent(openEvent);
+  }, [open]);
+
   useLayoutEffect(() => {
     const element = ref.current;
     if (!element) return;

src/foundations/ui/toaster/examples/toaster-description.preview.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@/foundations/ui/button/button';
+import { toast } from '@/foundations/ui/toaster/toaster';
+
+const ToasterDescriptionPreview = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() => {
+          toast({
+            title: 'This is a toast notification!',
+            description:
+              'A lightweight notification that appears temporarily to provide feedback about an action or event.',
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+    </div>
+  );
+};
+
+export default ToasterDescriptionPreview;

src/foundations/ui/toaster/examples/toaster-drawer.preview.tsx

@@ -0,0 +1,49 @@
+import { Button } from '@/foundations/ui/button/button';
+import { Drawer } from '@/foundations/ui/drawer/drawer';
+import { toast } from '@/foundations/ui/toaster/toaster';
+
+const ToasterDrawerPreview = () => {
+  return (
+    <div className="flex gap-2">
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() => {
+          toast({
+            title: 'This is a toast notification!',
+          });
+        }}
+      >
+        Emit Toast
+      </Button>
+      <Drawer>
+        <Drawer.Trigger asChild>
+          <Button size="sm" variant="outline">
+            Open Drawer
+          </Button>
+        </Drawer.Trigger>
+        <Drawer.Content>
+          <p>This is a drawer content.</p>
+
+          <div className="flex py-4">
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                toast({
+                  title: 'This is a toast notification!',
+                });
+              }}
+            >
+              Emit Toast
+            </Button>
+          </div>
+        </Drawer.Content>
+      </Drawer>
+    </div>
+  );
+};
+
+export default ToasterDrawerPreview;

src/foundations/ui/toaster/examples/toaster-duration.preview.tsx

@@ -0,0 +1,43 @@
+import { Button } from '@/foundations/ui/button/button';
+import { toast } from '@/foundations/ui/toaster/toaster';
+
+const ToasterDurationPreview = () => {
+  return (
+    <div className="flex gap-2">
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() => toast({ title: 'This is a 7 second toast!' })}
+      >
+        Default
+      </Button>
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() =>
+          toast({ title: 'This is a 3 second toast!', duration: 3000 })
+        }
+      >
+        Short
+      </Button>
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() =>
+          toast({
+            title: 'This is an infinity toast!',
+            description: 'It will not disappear until you dismiss it.',
+            duration: Infinity,
+          })
+        }
+      >
+        Infinite
+      </Button>
+    </div>
+  );
+};
+
+export default ToasterDurationPreview;

src/foundations/ui/toaster/examples/toaster-variants.preview.tsx

@@ -0,0 +1,47 @@
+import { Button } from '@/foundations/ui/button/button';
+import { toast } from '@/foundations/ui/toaster/toaster';
+
+const ToasterVariantsPreview = () => {
+  return (
+    <div className="flex gap-2">
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() =>
+          toast({ title: 'This is a toast notification!', variant: 'default' })
+        }
+      >
+        Default
+      </Button>
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() =>
+          toast({
+            title: 'This is a positive toast notification!',
+            variant: 'positive',
+          })
+        }
+      >
+        Positive
+      </Button>
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() =>
+          toast({
+            title: 'This is a negative toast notification!',
+            variant: 'negative',
+          })
+        }
+      >
+        Negative
+      </Button>
+    </div>
+  );
+};
+
+export default ToasterVariantsPreview;

src/foundations/ui/toaster/examples/toaster.preview.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@/foundations/ui/button/button';
+import { toast } from '@/foundations/ui/toaster/toaster';
+
+const ToasterPreview = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() => {
+          toast({
+            title: 'This is a toast notification!',
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+    </div>
+  );
+};
+
+export default ToasterPreview;

src/foundations/ui/toaster/page.mdx

@@ -0,0 +1,57 @@
+---
+title: Toaster
+description: A component for displaying transient messages to users, such as notifications or alerts.
+
+preview: toaster
+files:
+  - src/foundations/ui/toaster/toaster.tsx
+
+dependencies:
+  - name: motion
+    href: https://motion.dev
+
+folder: UI
+---
+
+> This component relies on custom events emitted by the `Modal` component. Ensure your `Modal` implementation dispatches the `ui:modal-open` and `ui:modal-close` events accordingly.
+
+## Usage
+
+Render the `Toaster` component at the root of your application.
+
+```tsx
+import { Toaster } from "@/components/ui/toaster";
+
+function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <Toaster />
+      </body>
+    </html>
+  );
+}
+```
+
+Then, you can use the `toast` function to display messages.
+
+```tsx
+import { toast } from "@/components/ui/toaster";
+
+toast({ title: "This is a toast message!" });
+```
+
+## Example
+
+### With Description
+
+<Preview slug="toaster-description" />
+
+### Variants
+
+<Preview slug="toaster-variants" />
+
+### Duration
+
+<Preview slug="toaster-duration" />