toaster.ts
3.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
const position = [
"top-left",
"top-center",
"top-right",
"bottom-left",
"bottom-center",
"bottom-right"
] as const
const swipeDirection = [
"up",
"right",
"down",
"left"
] as const
export default {
"slots": {
"viewport": "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
"base": "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[state=open]:data-[pulsing=odd]:animate-[toast-pulse-a_300ms_ease-out] data-[state=open]:data-[pulsing=even]:animate-[toast-pulse-b_300ms_ease-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
},
"variants": {
"position": {
"top-left": {
"viewport": "left-4"
},
"top-center": {
"viewport": "left-1/2 transform -translate-x-1/2"
},
"top-right": {
"viewport": "right-4"
},
"bottom-left": {
"viewport": "left-4"
},
"bottom-center": {
"viewport": "left-1/2 transform -translate-x-1/2"
},
"bottom-right": {
"viewport": "right-4"
}
},
"swipeDirection": {
"up": "data-[swipe=end]:animate-[toast-slide-up_200ms_ease-out]",
"right": "data-[swipe=end]:animate-[toast-slide-right_200ms_ease-out]",
"down": "data-[swipe=end]:animate-[toast-slide-down_200ms_ease-out]",
"left": "data-[swipe=end]:animate-[toast-slide-left_200ms_ease-out]"
}
},
"compoundVariants": [
{
"position": [
"top-left" as typeof position[number],
"top-center" as typeof position[number],
"top-right" as typeof position[number]
],
"class": {
"viewport": "top-4",
"base": "top-0 data-[state=open]:animate-[toast-slide-in-from-top_200ms_ease-in-out]"
}
},
{
"position": [
"bottom-left" as typeof position[number],
"bottom-center" as typeof position[number],
"bottom-right" as typeof position[number]
],
"class": {
"viewport": "bottom-4",
"base": "bottom-0 data-[state=open]:animate-[toast-slide-in-from-bottom_200ms_ease-in-out]"
}
},
{
"swipeDirection": [
"left" as typeof swipeDirection[number],
"right" as typeof swipeDirection[number]
],
"class": "data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=cancel]:translate-x-0"
},
{
"swipeDirection": [
"up" as typeof swipeDirection[number],
"down" as typeof swipeDirection[number]
],
"class": "data-[swipe=move]:translate-y-(--reka-toast-swipe-move-y) data-[swipe=end]:translate-y-(--reka-toast-swipe-end-y) data-[swipe=cancel]:translate-y-0"
}
],
"defaultVariants": {
"position": "bottom-right" as typeof position[number]
}
}