Toast

import { Toast } from "@/ui/Toast";

<Toast.Root open={open} onOpenChange={setOpen} variant="success">
  <Toast.Title>Saved successfully</Toast.Title>
  <Toast.Description>Your profile changes are now live.</Toast.Description>
  <Toast.Footer>
    <Toast.Close>Dismiss</Toast.Close>
  </Toast.Footer>
</Toast.Root>

import { useEffect, useState, type ReactNode } from "react";

function ToastRoot({ open, onOpenChange, children }: { open: boolean; onOpenChange: (open: boolean) => void; children: ReactNode }) {
  useEffect(() => {
    if (!open) return;
    const t = setTimeout(() => onOpenChange(false), 3000);
    return () => clearTimeout(t);
  }, [open, onOpenChange]);

  if (!open) return null;

  return (
    <div className="fixed right-4 top-4 z-50 w-full max-w-sm rounded-xl border border-slate-200 bg-white p-4 shadow-xl">
      {children}
    </div>
  );
}

type ToastCompound = typeof ToastRoot & { Root: typeof ToastRoot };
export const Toast = Object.assign(ToastRoot, { Root: ToastRoot }) as ToastCompound;