Toast

import {  Button,  ToastProvider,  ToastRegion,  useToastManager,} from "moduix";export function App() {  return (    <ToastProvider>      <AppShell />      <ToastRegion />    </ToastProvider>  );}function AppShell() {  const toastManager = useToastManager();  function showToast() {    toastManager.add({      title: "Saved",      description: "Changes were saved successfully.",    });  }  return <Button onClick={showToast}>Save changes</Button>;}

import { ToastProvider, ToastRegion, useToastManager, Button } from "moduix";export function App() {  return (    <ToastProvider>      <UploadButton />      <ToastRegion />    </ToastProvider>  );}function UploadButton() {  const toastManager = useToastManager();  return (    <Button      onClick={() =>        toastManager.add({          title: "File uploaded",          description: "The file is ready to share.",          actionProps: {            children: "Undo",            onClick: () => toastManager.add({ description: "Upload reverted." }),          },        })      }    >      Create action toast    </Button>  );}

import {  ToastPlacement,  ToastProvider,  ToastRegion,  useToastManager,  Button,} from "moduix";import { useState } from "react";export function App() {  const [placement, setPlacement] = useState("bottom-right" as ToastPlacement);  return (    <ToastProvider>      <AppShell placement={placement} onPlacementChange={setPlacement} />      <ToastRegion placement={placement} />    </ToastProvider>  );}function AppShell({  placement,  onPlacementChange,}: {  placement: ToastPlacement;  onPlacementChange: (placement: ToastPlacement) => void;}) {  const toastManager = useToastManager();  return (    <div>      {placements.map((item) => (        <button          key={item}          type="button"          aria-pressed={item === placement}          onClick={() => onPlacementChange(item)}        >          {item}        </button>      ))}      <Button        onClick={() =>          toastManager.add({            title: "Placement",            description: `Current placement: ${placement}`,          })        }      >        Show toast      </Button>    </div>  );}

const placements: ToastPlacement[] = [  "top-left",  "top-center",  "top-right",  "bottom-left",  "bottom-center",  "bottom-right",];

import { ToastProvider, ToastRegion, useToastManager, Button } from "moduix";export function App() {  return (    <ToastProvider>      <AppShell />      <ToastRegion placement="bottom-right" stackBehavior="expanded" />    </ToastProvider>  );}function AppShell() {  const toastManager = useToastManager();  return (    <Button      onClick={() =>        toastManager.add({          title: "Background task",          description: "Create several notifications to compare the expanded stack.",        })      }    >      Create toast    </Button>  );}

import { createToastManager, ToastProvider, ToastRegion, Button } from "moduix";const toastManager = createToastManager();export function App() {  return (    <ToastProvider toastManager={toastManager}>      <AppShell />      <ToastRegion />    </ToastProvider>  );}function notifyFromService() {  toastManager.add({    title: "Global toast",    description: "Created with createToastManager().",  });}function AppShell() {  return <Button onClick={notifyFromService}>Create global toast</Button>;}

import {  Button,  CloseLineIcon,  InfoIcon,  ToastProvider,  ToastRegion,  ToastRoot,  ToastContent,  ToastTitle,  ToastDescription,  ToastClose,  useToastManager,} from "moduix";import styles from "./custom-toast.module.css";export function App() {  return (    <ToastProvider>      <CreateToastButton />      <ToastRegion        renderToast={(toast) => (          <ToastRoot toast={toast} className={styles.toast}>            <ToastContent className={styles.content}>              <InfoIcon className={styles.icon} />              <ToastTitle />              <ToastDescription />              <ToastClose aria-label="Close toast">                <CloseLineIcon className={styles.closeIcon} />              </ToastClose>            </ToastContent>          </ToastRoot>        )}      />    </ToastProvider>  );}function CreateToastButton() {  const toastManager = useToastManager();  return (    <Button      onClick={() =>        toastManager.add({          title: "Custom composition",          description: "Every important part accepts className and custom children.",        })      }    >      Create custom toast    </Button>  );}

.toast {  --toast-bg: var(--color-primary);  --toast-color: var(--color-primary-foreground);  --toast-border-color: var(--color-primary);  --toast-description-color: color-mix(    in srgb,    var(--color-primary-foreground) 72%,    transparent  );  --toast-close-color: var(--color-primary-foreground);  --toast-close-color-hover: var(--color-primary-foreground);  --toast-close-bg-hover: color-mix(    in srgb,    var(--color-primary-foreground) 14%,    transparent  );}.content {  grid-template-columns: auto minmax(0, 1fr);  column-gap: var(--spacing-3);  padding-right: 1.75rem;}.icon {  grid-row: span 2;  inline-size: 1.125rem;  block-size: 1.125rem;  color: currentColor;}.closeIcon {  inline-size: var(--toast-close-icon-size, 1rem);  block-size: var(--toast-close-icon-size, 1rem);  flex: none;}

import {  Button,  ToastAnchoredRegion,  ToastProvider,  useAnchoredToastManager,} from "moduix";import { useRef } from "react";export function App() {  return (    <ToastProvider>      <CopyButton />      <ToastAnchoredRegion />    </ToastProvider>  );}function CopyButton() {  const buttonRef = useRef(null as HTMLButtonElement | null);  const anchoredToast = useAnchoredToastManager();  function showCopiedToast() {    if (!buttonRef.current) {      return;    }    anchoredToast.show({      anchor: buttonRef.current,      description: "Copied",      timeout: 1800,    });  }  return (    <Button ref={buttonRef} onClick={showCopiedToast}>      Copy    </Button>  );}

import {  Button,  ToastAnchoredRegion,  ToastProvider,  ToastRegion,  useAnchoredToastManager,  useToastManager,} from "moduix";import { useRef } from "react";export function App() {  return (    <ToastProvider>      <SaveButton />      <CopyButton />      <ToastRegion />      <ToastAnchoredRegion />    </ToastProvider>  );}function SaveButton() {  const toastManager = useToastManager();  return (    <Button      onClick={() =>        toastManager.add({          title: "Saved",          description: "Changes were saved successfully.",        })      }    >      Save changes    </Button>  );}function CopyButton() {  const buttonRef = useRef(null as HTMLButtonElement | null);  const anchoredToast = useAnchoredToastManager();  function showCopiedToast() {    if (!buttonRef.current) {      return;    }    anchoredToast.show({      anchor: buttonRef.current,      description: "Copied",      timeout: 1800,    });  }  return (    <Button ref={buttonRef} variant="outline" onClick={showCopiedToast}>      Copy    </Button>  );}