Toast

1import { cva, type VariantProps } from "class-variance-authority";
2import { html, LitElement, nothing } from "lit";
3import { customElement, state } from "lit/decorators.js";
4import { repeat } from "lit/directives/repeat.js";
5import { unsafeHTML } from "lit/directives/unsafe-html.js";
6import {
7  CircleCheck,
8  Info,
9  LoaderCircle,
10  OctagonX,
11  TriangleAlert,
12  X,
13} from "lucide-static";
14import { TW } from "@/lib/tailwindMixin";
15import "../button/button";
16 
17export const toastVariants = cva(
18  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-lg transition-all",
19  {
20    variants: {
21      variant: {
22        default: "bg-popover text-popover-foreground border",
23        outline: "bg-background text-foreground border",
24        destructive:
25          "bg-destructive text-destructive-foreground border-destructive",
26      },
27      state: {
28        open: "animate-in fade-in-0 slide-in-from-top-full duration-300 sm:slide-in-from-bottom-full",
29        closed: "animate-out fade-out-80 slide-out-to-right-full duration-300",
30      },
31    },
32    defaultVariants: {
33      variant: "default",
34    },
35  },
36);
37 
38type ToastVariants = VariantProps<typeof toastVariants>;
39 
40export type ToastType = "success" | "error" | "info" | "warning" | "loading";
41 
42export interface ToastOptions {
43  description?: string;
44  variant?: ToastVariants["variant"];
45  type?: ToastType;
46  duration?: number;
47  action?: {
48    label: string;
49    onClick: () => void;
50  };
51  onDismiss?: () => void;
52}
53 
54interface ToastData extends ToastOptions {
55  id: string;
56  message: string;
57  state: "open" | "closed";
58}
59 
60let toasterInstance: Toaster | null = null;
61let toastIdCounter = 0;
62 
63function ensureToaster(): Toaster {
64  if (!toasterInstance) {
65    toasterInstance = document.createElement("ui-toaster") as Toaster;
66    document.body.appendChild(toasterInstance);
67  }
68  return toasterInstance;
69}
70 
71export function toast(message: string, options: ToastOptions = {}) {
72  const toaster = ensureToaster();
73  return toaster.addToast(message, options);
74}
75 
76toast.success = (message: string, options: ToastOptions = {}) =>
77  toast(message, { ...options, type: "success" });
78 
79toast.error = (message: string, options: ToastOptions = {}) =>
80  toast(message, { ...options, type: "error" });
81 
82toast.warning = (message: string, options: ToastOptions = {}) =>
83  toast(message, { ...options, type: "warning" });
84 
85// … truncated