Toast

1import { cva } from "class-variance-authority";
2import { ActivityIndicator, View } from "react-native";
3import * as ToastPrimitive from "sonner-native";
4import { useUniwind } from "uniwind";
5import { cn } from "@/lib/utils";
6import {
7  CircleAlertIcon,
8  CircleCheckIcon,
9  InfoIcon,
10  TriangleAlertIcon,
11} from "./icons";
12import { Text } from "./text";
13 
14// Types
15type ToastVariant =
16  | "default"
17  | "success"
18  | "error"
19  | "warning"
20  | "info"
21  | "loading";
22 
23type ToastIconProps = {
24  variant: ToastVariant;
25};
26 
27type ToastOptions = NonNullable<
28  Parameters<typeof ToastPrimitive.toast.custom>[1]
29>;
30 
31type PromiseOptions = {
32  loading: string;
33  success: string | ((result: unknown) => string);
34  error: string | ((error: unknown) => string);
35} & Omit<ToastOptions, "description" | "icon">;
36 
37// Components
38const ToastIcon = ({ variant }: ToastIconProps) => {
39  const iconClassName = iconVariants({ variant });
40 
41  if (variant === "loading") {
42    return (
43      <View className="size-5 items-center justify-center">
44        <ActivityIndicator className="accent-muted-foreground" size="small" />
45      </View>
46    );
47  }
48 
49  if (variant === "success") {
50    return <CircleCheckIcon className={iconClassName} />;
51  }
52 
53  if (variant === "error") {
54    return <TriangleAlertIcon className={iconClassName} />;
55  }
56 
57  if (variant === "warning") {
58    return <CircleAlertIcon className={iconClassName} />;
59  }
60 
61  return <InfoIcon className={iconClassName} />;
62};
63 
64type TetraToastProps = {
65  variant: ToastVariant;
66  title: string;
67  description?: string;
68  icon?: React.ReactNode;
69};
70 
71const TetraToast = ({ variant, title, description, icon }: TetraToastProps) => (
72  <View className="mx-4 justify-center rounded-2xl border border-border/80 bg-popover p-4 shadow-md">
73    <View
74      className={cn(
75        "flex-row gap-4",
76        description ? "items-start" : "items-center"
77      )}
78    >
79      {icon ?? <ToastIcon variant={variant} />}
80      <View className="flex-1">
81        <Text className={titleVariants({ variant })}>{title}</Text>
82        {description ? (
83          <Text className="text-muted-foreground text-sm">{description}</Text>
84        ) : null}
85      </View>
86    </View>
87  </View>
88);
89 
90export const Toaster = (props: Omit<ToastPrimitive.ToasterProps, "theme">) => {
91  const { theme: uniwindTheme } = useUniwind();
92  const theme = uniwindTheme === "dark" ? "dark" : "light";
93 
94  return (
95    <ToastPrimitive.Toaster {...props} enableStacking gap={4} theme={theme} />
96  );
97};
98 
99// Utils
100// … truncated