@cookified/toastify 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/lib/index.cjs +503 -178
- package/lib/index.css +312 -0
- package/lib/index.d.cts +5 -2
- package/lib/index.d.ts +5 -2
- package/lib/index.js +467 -118
- package/lib/styles.css +312 -0
- package/package.json +5 -9
package/lib/index.css
ADDED
|
@@ -0,0 +1,312 @@
|
|
|
1
|
+
/* Toastify Standalone CSS */
|
|
2
|
+
@keyframes toastify-spin {
|
|
3
|
+
from {
|
|
4
|
+
transform: rotate(0deg);
|
|
5
|
+
}
|
|
6
|
+
to {
|
|
7
|
+
transform: rotate(360deg);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.toastify-spin {
|
|
12
|
+
animation: toastify-spin 1s linear infinite;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.toastify-toaster {
|
|
16
|
+
position: fixed;
|
|
17
|
+
z-index: 9999;
|
|
18
|
+
width: 356px;
|
|
19
|
+
max-width: calc(100vw - 32px);
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
22
|
+
margin: 0;
|
|
23
|
+
padding: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.toastify-toaster *,
|
|
27
|
+
.toastify-toaster *::before,
|
|
28
|
+
.toastify-toaster *::after {
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Positions */
|
|
33
|
+
.toastify-pos-top-left {
|
|
34
|
+
top: 24px;
|
|
35
|
+
left: 24px;
|
|
36
|
+
}
|
|
37
|
+
.toastify-pos-top-center {
|
|
38
|
+
top: 24px;
|
|
39
|
+
left: 0;
|
|
40
|
+
right: 0;
|
|
41
|
+
margin-left: auto;
|
|
42
|
+
margin-right: auto;
|
|
43
|
+
}
|
|
44
|
+
.toastify-pos-top-right {
|
|
45
|
+
top: 24px;
|
|
46
|
+
right: 24px;
|
|
47
|
+
}
|
|
48
|
+
.toastify-pos-bottom-left {
|
|
49
|
+
bottom: 24px;
|
|
50
|
+
left: 24px;
|
|
51
|
+
}
|
|
52
|
+
.toastify-pos-bottom-center {
|
|
53
|
+
bottom: 24px;
|
|
54
|
+
left: 0;
|
|
55
|
+
right: 0;
|
|
56
|
+
margin-left: auto;
|
|
57
|
+
margin-right: auto;
|
|
58
|
+
}
|
|
59
|
+
.toastify-pos-bottom-right {
|
|
60
|
+
bottom: 24px;
|
|
61
|
+
right: 24px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.toastify-pointer-auto {
|
|
65
|
+
pointer-events: auto;
|
|
66
|
+
}
|
|
67
|
+
.toastify-pointer-none {
|
|
68
|
+
pointer-events: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Toast List Container */
|
|
72
|
+
.toastify-list {
|
|
73
|
+
position: relative;
|
|
74
|
+
width: 100%;
|
|
75
|
+
height: 100%;
|
|
76
|
+
display: flex;
|
|
77
|
+
}
|
|
78
|
+
.toastify-list-col {
|
|
79
|
+
flex-direction: column;
|
|
80
|
+
}
|
|
81
|
+
.toastify-list-col-reverse {
|
|
82
|
+
flex-direction: column-reverse;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Individual Toast Item wrapper */
|
|
86
|
+
.toastify-item {
|
|
87
|
+
position: absolute;
|
|
88
|
+
height: 56px;
|
|
89
|
+
width: 100%;
|
|
90
|
+
user-select: none;
|
|
91
|
+
cursor: grab;
|
|
92
|
+
}
|
|
93
|
+
.toastify-item:active {
|
|
94
|
+
cursor: grabbing;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Toast Card with Tactile Micro-bevels */
|
|
98
|
+
.toastify-toast {
|
|
99
|
+
display: flex;
|
|
100
|
+
height: 56px;
|
|
101
|
+
width: 100%;
|
|
102
|
+
user-select: none;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: space-between;
|
|
105
|
+
gap: 12px;
|
|
106
|
+
border-radius: 8px;
|
|
107
|
+
padding: 0 14px;
|
|
108
|
+
box-sizing: border-box;
|
|
109
|
+
transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
|
|
110
|
+
border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
|
|
111
|
+
box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
|
|
112
|
+
color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
113
|
+
|
|
114
|
+
/* Light theme default */
|
|
115
|
+
background-color: #ffffff;
|
|
116
|
+
border: 1px solid rgba(229, 231, 235, 0.9);
|
|
117
|
+
color: #111827;
|
|
118
|
+
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Dark theme overrides */
|
|
122
|
+
.toastify-toaster.dark .toastify-toast,
|
|
123
|
+
[data-theme="dark"] .toastify-toast,
|
|
124
|
+
.dark .toastify-toast {
|
|
125
|
+
background-color: #171717;
|
|
126
|
+
border: 1px solid rgba(38, 38, 38, 0.9);
|
|
127
|
+
color: #f5f5f5;
|
|
128
|
+
box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* System dark theme preference when theme="system" */
|
|
132
|
+
@media (prefers-color-scheme: dark) {
|
|
133
|
+
.toastify-toaster.system .toastify-toast {
|
|
134
|
+
background-color: #171717;
|
|
135
|
+
border: 1px solid rgba(38, 38, 38, 0.9);
|
|
136
|
+
color: #f5f5f5;
|
|
137
|
+
box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);
|
|
138
|
+
}
|
|
139
|
+
.toastify-toaster.system .toastify-badge {
|
|
140
|
+
background-color: #ffffff;
|
|
141
|
+
color: #0a0a0a;
|
|
142
|
+
}
|
|
143
|
+
.toastify-toaster.system .toastify-title {
|
|
144
|
+
color: #f5f5f5;
|
|
145
|
+
}
|
|
146
|
+
.toastify-toaster.system .toastify-description {
|
|
147
|
+
color: #a3a3a3;
|
|
148
|
+
}
|
|
149
|
+
.toastify-toaster.system .toastify-btn-cancel {
|
|
150
|
+
color: #a3a3a3;
|
|
151
|
+
}
|
|
152
|
+
.toastify-toaster.system .toastify-btn-cancel:hover {
|
|
153
|
+
background-color: #262626;
|
|
154
|
+
color: #f5f5f5;
|
|
155
|
+
}
|
|
156
|
+
.toastify-toaster.system .toastify-btn-action {
|
|
157
|
+
background-color: #f5f5f5;
|
|
158
|
+
color: #171717;
|
|
159
|
+
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);
|
|
160
|
+
}
|
|
161
|
+
.toastify-toaster.system .toastify-btn-action:hover {
|
|
162
|
+
background-color: #e5e5e5;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
/* Badge Icon Wrapper */
|
|
167
|
+
.toastify-badge {
|
|
168
|
+
display: flex;
|
|
169
|
+
height: 20px;
|
|
170
|
+
width: 20px;
|
|
171
|
+
flex-shrink: 0;
|
|
172
|
+
align-items: center;
|
|
173
|
+
justify-content: center;
|
|
174
|
+
border-radius: 9999px;
|
|
175
|
+
background-color: #171717;
|
|
176
|
+
color: #ffffff;
|
|
177
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.toastify-toaster.dark .toastify-badge,
|
|
181
|
+
[data-theme="dark"] .toastify-badge,
|
|
182
|
+
.dark .toastify-badge {
|
|
183
|
+
background-color: #ffffff;
|
|
184
|
+
color: #0a0a0a;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* Content Area */
|
|
188
|
+
.toastify-content {
|
|
189
|
+
display: flex;
|
|
190
|
+
min-width: 0;
|
|
191
|
+
flex: 1 1 0%;
|
|
192
|
+
align-items: center;
|
|
193
|
+
gap: 12px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.toastify-text-group {
|
|
197
|
+
display: flex;
|
|
198
|
+
min-width: 0;
|
|
199
|
+
flex-direction: column;
|
|
200
|
+
justify-content: center;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.toastify-title {
|
|
204
|
+
overflow: hidden;
|
|
205
|
+
text-overflow: ellipsis;
|
|
206
|
+
white-space: nowrap;
|
|
207
|
+
font-size: 13px;
|
|
208
|
+
font-weight: 500;
|
|
209
|
+
line-height: 16px;
|
|
210
|
+
color: #171717;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.toastify-toaster.dark .toastify-title,
|
|
214
|
+
[data-theme="dark"] .toastify-title,
|
|
215
|
+
.dark .toastify-title {
|
|
216
|
+
color: #f5f5f5;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.toastify-description {
|
|
220
|
+
margin-top: 2px;
|
|
221
|
+
overflow: hidden;
|
|
222
|
+
text-overflow: ellipsis;
|
|
223
|
+
white-space: nowrap;
|
|
224
|
+
font-size: 12px;
|
|
225
|
+
line-height: 16px;
|
|
226
|
+
color: #737373;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.toastify-toaster.dark .toastify-description,
|
|
230
|
+
[data-theme="dark"] .toastify-description,
|
|
231
|
+
.dark .toastify-description {
|
|
232
|
+
color: #a3a3a3;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/* Action Area */
|
|
236
|
+
.toastify-actions {
|
|
237
|
+
display: flex;
|
|
238
|
+
flex-shrink: 0;
|
|
239
|
+
align-items: center;
|
|
240
|
+
gap: 8px;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.toastify-btn-cancel {
|
|
244
|
+
cursor: pointer;
|
|
245
|
+
border: none;
|
|
246
|
+
background: transparent;
|
|
247
|
+
border-radius: 4px;
|
|
248
|
+
padding: 4px 8px;
|
|
249
|
+
font-size: 12px;
|
|
250
|
+
font-weight: 500;
|
|
251
|
+
color: #525252;
|
|
252
|
+
transition: background-color 0.15s, color 0.15s;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.toastify-btn-cancel:hover {
|
|
256
|
+
background-color: #f5f5f5;
|
|
257
|
+
color: #171717;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.toastify-toaster.dark .toastify-btn-cancel,
|
|
261
|
+
[data-theme="dark"] .toastify-btn-cancel,
|
|
262
|
+
.dark .toastify-btn-cancel {
|
|
263
|
+
color: #a3a3a3;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.toastify-toaster.dark .toastify-btn-cancel:hover,
|
|
267
|
+
[data-theme="dark"] .toastify-btn-cancel:hover,
|
|
268
|
+
.dark .toastify-btn-cancel:hover {
|
|
269
|
+
background-color: #262626;
|
|
270
|
+
color: #f5f5f5;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.toastify-btn-action {
|
|
274
|
+
cursor: pointer;
|
|
275
|
+
border: none;
|
|
276
|
+
border-radius: 4px;
|
|
277
|
+
padding: 4px 10px;
|
|
278
|
+
font-size: 12px;
|
|
279
|
+
font-weight: 500;
|
|
280
|
+
background-color: #171717;
|
|
281
|
+
color: #ffffff;
|
|
282
|
+
transition: background-color 0.15s, box-shadow 0.15s;
|
|
283
|
+
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.08);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.toastify-btn-action:hover {
|
|
287
|
+
background-color: #262626;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.toastify-btn-action:active {
|
|
291
|
+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.toastify-toaster.dark .toastify-btn-action,
|
|
295
|
+
[data-theme="dark"] .toastify-btn-action,
|
|
296
|
+
.dark .toastify-btn-action {
|
|
297
|
+
background-color: #f5f5f5;
|
|
298
|
+
color: #171717;
|
|
299
|
+
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.toastify-toaster.dark .toastify-btn-action:hover,
|
|
303
|
+
[data-theme="dark"] .toastify-btn-action:hover,
|
|
304
|
+
.dark .toastify-btn-action:hover {
|
|
305
|
+
background-color: #e5e5e5;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.toastify-toaster.dark .toastify-btn-action:active,
|
|
309
|
+
[data-theme="dark"] .toastify-btn-action:active,
|
|
310
|
+
.dark .toastify-btn-action:active {
|
|
311
|
+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
|
|
312
|
+
}
|
package/lib/index.d.cts
CHANGED
|
@@ -57,6 +57,7 @@ type ToasterProps = {
|
|
|
57
57
|
animation?: AnimationPreset | ToastAnimationComponent;
|
|
58
58
|
springConfig?: SpringConfig;
|
|
59
59
|
icons?: Partial<Record<ToastType, ReactNode>>;
|
|
60
|
+
unstyled?: boolean;
|
|
60
61
|
toastOptions?: {
|
|
61
62
|
className?: string;
|
|
62
63
|
style?: CSSProperties;
|
|
@@ -78,7 +79,7 @@ type ToastData = {
|
|
|
78
79
|
createdAt: number;
|
|
79
80
|
};
|
|
80
81
|
|
|
81
|
-
declare function Toaster({ position, duration, autoClose, theme, className, style, visibleToasts, closeOnClick, animation, springConfig, icons, toastOptions, }: ToasterProps): react.JSX.Element;
|
|
82
|
+
declare function Toaster({ position, duration, autoClose, theme, className, style, visibleToasts, closeOnClick, animation, springConfig, icons, unstyled, toastOptions, }: ToasterProps): react.JSX.Element;
|
|
82
83
|
declare const ToastContainer: typeof Toaster;
|
|
83
84
|
|
|
84
85
|
type ToastProps = {
|
|
@@ -152,4 +153,6 @@ declare const toast: typeof toastFn & {
|
|
|
152
153
|
}): void;
|
|
153
154
|
};
|
|
154
155
|
|
|
155
|
-
|
|
156
|
+
declare const toastifyStyles = "\n/* Toastify Standalone CSS */\n@keyframes toastify-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.toastify-spin {\n animation: toastify-spin 1s linear infinite;\n}\n\n.toastify-toaster {\n position: fixed;\n z-index: 9999;\n width: 356px;\n max-width: calc(100vw - 32px);\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\n.toastify-toaster *,\n.toastify-toaster *::before,\n.toastify-toaster *::after {\n box-sizing: border-box;\n}\n\n/* Positions */\n.toastify-pos-top-left {\n top: 24px;\n left: 24px;\n}\n.toastify-pos-top-center {\n top: 24px;\n left: 0;\n right: 0;\n margin-left: auto;\n margin-right: auto;\n}\n.toastify-pos-top-right {\n top: 24px;\n right: 24px;\n}\n.toastify-pos-bottom-left {\n bottom: 24px;\n left: 24px;\n}\n.toastify-pos-bottom-center {\n bottom: 24px;\n left: 0;\n right: 0;\n margin-left: auto;\n margin-right: auto;\n}\n.toastify-pos-bottom-right {\n bottom: 24px;\n right: 24px;\n}\n\n.toastify-pointer-auto {\n pointer-events: auto;\n}\n.toastify-pointer-none {\n pointer-events: none;\n}\n\n/* Toast List Container */\n.toastify-list {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n}\n.toastify-list-col {\n flex-direction: column;\n}\n.toastify-list-col-reverse {\n flex-direction: column-reverse;\n}\n\n/* Individual Toast Item wrapper */\n.toastify-item {\n position: absolute;\n height: 56px;\n width: 100%;\n user-select: none;\n cursor: grab;\n}\n.toastify-item:active {\n cursor: grabbing;\n}\n\n/* Toast Card with Tactile Micro-bevels */\n.toastify-toast {\n display: flex;\n height: 56px;\n width: 100%;\n user-select: none;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n border-radius: 8px;\n padding: 0 14px;\n box-sizing: border-box;\n transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n color 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n \n /* Light theme default */\n background-color: #ffffff;\n border: 1px solid rgba(229, 231, 235, 0.9);\n color: #111827;\n box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);\n}\n\n/* Dark theme overrides */\n.toastify-toaster.dark .toastify-toast,\n[data-theme=\"dark\"] .toastify-toast,\n.dark .toastify-toast {\n background-color: #171717;\n border: 1px solid rgba(38, 38, 38, 0.9);\n color: #f5f5f5;\n box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);\n}\n\n/* System dark theme preference when theme=\"system\" */\n@media (prefers-color-scheme: dark) {\n .toastify-toaster.system .toastify-toast {\n background-color: #171717;\n border: 1px solid rgba(38, 38, 38, 0.9);\n color: #f5f5f5;\n box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);\n }\n .toastify-toaster.system .toastify-badge {\n background-color: #ffffff;\n color: #0a0a0a;\n }\n .toastify-toaster.system .toastify-title {\n color: #f5f5f5;\n }\n .toastify-toaster.system .toastify-description {\n color: #a3a3a3;\n }\n .toastify-toaster.system .toastify-btn-cancel {\n color: #a3a3a3;\n }\n .toastify-toaster.system .toastify-btn-cancel:hover {\n background-color: #262626;\n color: #f5f5f5;\n }\n .toastify-toaster.system .toastify-btn-action {\n background-color: #f5f5f5;\n color: #171717;\n box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);\n }\n .toastify-toaster.system .toastify-btn-action:hover {\n background-color: #e5e5e5;\n }\n}\n\n/* Badge Icon Wrapper */\n.toastify-badge {\n display: flex;\n height: 20px;\n width: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background-color: #171717;\n color: #ffffff;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.toastify-toaster.dark .toastify-badge,\n[data-theme=\"dark\"] .toastify-badge,\n.dark .toastify-badge {\n background-color: #ffffff;\n color: #0a0a0a;\n}\n\n/* Content Area */\n.toastify-content {\n display: flex;\n min-width: 0;\n flex: 1 1 0%;\n align-items: center;\n gap: 12px;\n}\n\n.toastify-text-group {\n display: flex;\n min-width: 0;\n flex-direction: column;\n justify-content: center;\n}\n\n.toastify-title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 13px;\n font-weight: 500;\n line-height: 16px;\n color: #171717;\n}\n\n.toastify-toaster.dark .toastify-title,\n[data-theme=\"dark\"] .toastify-title,\n.dark .toastify-title {\n color: #f5f5f5;\n}\n\n.toastify-description {\n margin-top: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 12px;\n line-height: 16px;\n color: #737373;\n}\n\n.toastify-toaster.dark .toastify-description,\n[data-theme=\"dark\"] .toastify-description,\n.dark .toastify-description {\n color: #a3a3a3;\n}\n\n/* Action Area */\n.toastify-actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 8px;\n}\n\n.toastify-btn-cancel {\n cursor: pointer;\n border: none;\n background: transparent;\n border-radius: 4px;\n padding: 4px 8px;\n font-size: 12px;\n font-weight: 500;\n color: #525252;\n transition: background-color 0.15s, color 0.15s;\n}\n\n.toastify-btn-cancel:hover {\n background-color: #f5f5f5;\n color: #171717;\n}\n\n.toastify-toaster.dark .toastify-btn-cancel,\n[data-theme=\"dark\"] .toastify-btn-cancel,\n.dark .toastify-btn-cancel {\n color: #a3a3a3;\n}\n\n.toastify-toaster.dark .toastify-btn-cancel:hover,\n[data-theme=\"dark\"] .toastify-btn-cancel:hover,\n.dark .toastify-btn-cancel:hover {\n background-color: #262626;\n color: #f5f5f5;\n}\n\n.toastify-btn-action {\n cursor: pointer;\n border: none;\n border-radius: 4px;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n background-color: #171717;\n color: #ffffff;\n transition: background-color 0.15s, box-shadow 0.15s;\n box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n.toastify-btn-action:hover {\n background-color: #262626;\n}\n\n.toastify-btn-action:active {\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);\n}\n\n.toastify-toaster.dark .toastify-btn-action,\n[data-theme=\"dark\"] .toastify-btn-action,\n.dark .toastify-btn-action {\n background-color: #f5f5f5;\n color: #171717;\n box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n\n.toastify-toaster.dark .toastify-btn-action:hover,\n[data-theme=\"dark\"] .toastify-btn-action:hover,\n.dark .toastify-btn-action:hover {\n background-color: #e5e5e5;\n}\n\n.toastify-toaster.dark .toastify-btn-action:active,\n[data-theme=\"dark\"] .toastify-btn-action:active,\n.dark .toastify-btn-action:active {\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);\n}\n";
|
|
157
|
+
|
|
158
|
+
export { type AnimationPreset, DefaultToastIcon, FadeAnimation, FolderStackAnimation, SlideAnimation, type SpringConfig, Toast, type ToastAction, ToastAnimation, type ToastAnimationComponent, type ToastAnimationProps, ToastContainer, type ToastData, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastTheme, type ToastType, Toaster, type ToasterProps, defaultSpring, toast, toastStore, toastifyStyles };
|
package/lib/index.d.ts
CHANGED
|
@@ -57,6 +57,7 @@ type ToasterProps = {
|
|
|
57
57
|
animation?: AnimationPreset | ToastAnimationComponent;
|
|
58
58
|
springConfig?: SpringConfig;
|
|
59
59
|
icons?: Partial<Record<ToastType, ReactNode>>;
|
|
60
|
+
unstyled?: boolean;
|
|
60
61
|
toastOptions?: {
|
|
61
62
|
className?: string;
|
|
62
63
|
style?: CSSProperties;
|
|
@@ -78,7 +79,7 @@ type ToastData = {
|
|
|
78
79
|
createdAt: number;
|
|
79
80
|
};
|
|
80
81
|
|
|
81
|
-
declare function Toaster({ position, duration, autoClose, theme, className, style, visibleToasts, closeOnClick, animation, springConfig, icons, toastOptions, }: ToasterProps): react.JSX.Element;
|
|
82
|
+
declare function Toaster({ position, duration, autoClose, theme, className, style, visibleToasts, closeOnClick, animation, springConfig, icons, unstyled, toastOptions, }: ToasterProps): react.JSX.Element;
|
|
82
83
|
declare const ToastContainer: typeof Toaster;
|
|
83
84
|
|
|
84
85
|
type ToastProps = {
|
|
@@ -152,4 +153,6 @@ declare const toast: typeof toastFn & {
|
|
|
152
153
|
}): void;
|
|
153
154
|
};
|
|
154
155
|
|
|
155
|
-
|
|
156
|
+
declare const toastifyStyles = "\n/* Toastify Standalone CSS */\n@keyframes toastify-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.toastify-spin {\n animation: toastify-spin 1s linear infinite;\n}\n\n.toastify-toaster {\n position: fixed;\n z-index: 9999;\n width: 356px;\n max-width: calc(100vw - 32px);\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\n.toastify-toaster *,\n.toastify-toaster *::before,\n.toastify-toaster *::after {\n box-sizing: border-box;\n}\n\n/* Positions */\n.toastify-pos-top-left {\n top: 24px;\n left: 24px;\n}\n.toastify-pos-top-center {\n top: 24px;\n left: 0;\n right: 0;\n margin-left: auto;\n margin-right: auto;\n}\n.toastify-pos-top-right {\n top: 24px;\n right: 24px;\n}\n.toastify-pos-bottom-left {\n bottom: 24px;\n left: 24px;\n}\n.toastify-pos-bottom-center {\n bottom: 24px;\n left: 0;\n right: 0;\n margin-left: auto;\n margin-right: auto;\n}\n.toastify-pos-bottom-right {\n bottom: 24px;\n right: 24px;\n}\n\n.toastify-pointer-auto {\n pointer-events: auto;\n}\n.toastify-pointer-none {\n pointer-events: none;\n}\n\n/* Toast List Container */\n.toastify-list {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n}\n.toastify-list-col {\n flex-direction: column;\n}\n.toastify-list-col-reverse {\n flex-direction: column-reverse;\n}\n\n/* Individual Toast Item wrapper */\n.toastify-item {\n position: absolute;\n height: 56px;\n width: 100%;\n user-select: none;\n cursor: grab;\n}\n.toastify-item:active {\n cursor: grabbing;\n}\n\n/* Toast Card with Tactile Micro-bevels */\n.toastify-toast {\n display: flex;\n height: 56px;\n width: 100%;\n user-select: none;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n border-radius: 8px;\n padding: 0 14px;\n box-sizing: border-box;\n transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n color 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n \n /* Light theme default */\n background-color: #ffffff;\n border: 1px solid rgba(229, 231, 235, 0.9);\n color: #111827;\n box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);\n}\n\n/* Dark theme overrides */\n.toastify-toaster.dark .toastify-toast,\n[data-theme=\"dark\"] .toastify-toast,\n.dark .toastify-toast {\n background-color: #171717;\n border: 1px solid rgba(38, 38, 38, 0.9);\n color: #f5f5f5;\n box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);\n}\n\n/* System dark theme preference when theme=\"system\" */\n@media (prefers-color-scheme: dark) {\n .toastify-toaster.system .toastify-toast {\n background-color: #171717;\n border: 1px solid rgba(38, 38, 38, 0.9);\n color: #f5f5f5;\n box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);\n }\n .toastify-toaster.system .toastify-badge {\n background-color: #ffffff;\n color: #0a0a0a;\n }\n .toastify-toaster.system .toastify-title {\n color: #f5f5f5;\n }\n .toastify-toaster.system .toastify-description {\n color: #a3a3a3;\n }\n .toastify-toaster.system .toastify-btn-cancel {\n color: #a3a3a3;\n }\n .toastify-toaster.system .toastify-btn-cancel:hover {\n background-color: #262626;\n color: #f5f5f5;\n }\n .toastify-toaster.system .toastify-btn-action {\n background-color: #f5f5f5;\n color: #171717;\n box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);\n }\n .toastify-toaster.system .toastify-btn-action:hover {\n background-color: #e5e5e5;\n }\n}\n\n/* Badge Icon Wrapper */\n.toastify-badge {\n display: flex;\n height: 20px;\n width: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background-color: #171717;\n color: #ffffff;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.toastify-toaster.dark .toastify-badge,\n[data-theme=\"dark\"] .toastify-badge,\n.dark .toastify-badge {\n background-color: #ffffff;\n color: #0a0a0a;\n}\n\n/* Content Area */\n.toastify-content {\n display: flex;\n min-width: 0;\n flex: 1 1 0%;\n align-items: center;\n gap: 12px;\n}\n\n.toastify-text-group {\n display: flex;\n min-width: 0;\n flex-direction: column;\n justify-content: center;\n}\n\n.toastify-title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 13px;\n font-weight: 500;\n line-height: 16px;\n color: #171717;\n}\n\n.toastify-toaster.dark .toastify-title,\n[data-theme=\"dark\"] .toastify-title,\n.dark .toastify-title {\n color: #f5f5f5;\n}\n\n.toastify-description {\n margin-top: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 12px;\n line-height: 16px;\n color: #737373;\n}\n\n.toastify-toaster.dark .toastify-description,\n[data-theme=\"dark\"] .toastify-description,\n.dark .toastify-description {\n color: #a3a3a3;\n}\n\n/* Action Area */\n.toastify-actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 8px;\n}\n\n.toastify-btn-cancel {\n cursor: pointer;\n border: none;\n background: transparent;\n border-radius: 4px;\n padding: 4px 8px;\n font-size: 12px;\n font-weight: 500;\n color: #525252;\n transition: background-color 0.15s, color 0.15s;\n}\n\n.toastify-btn-cancel:hover {\n background-color: #f5f5f5;\n color: #171717;\n}\n\n.toastify-toaster.dark .toastify-btn-cancel,\n[data-theme=\"dark\"] .toastify-btn-cancel,\n.dark .toastify-btn-cancel {\n color: #a3a3a3;\n}\n\n.toastify-toaster.dark .toastify-btn-cancel:hover,\n[data-theme=\"dark\"] .toastify-btn-cancel:hover,\n.dark .toastify-btn-cancel:hover {\n background-color: #262626;\n color: #f5f5f5;\n}\n\n.toastify-btn-action {\n cursor: pointer;\n border: none;\n border-radius: 4px;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n background-color: #171717;\n color: #ffffff;\n transition: background-color 0.15s, box-shadow 0.15s;\n box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n.toastify-btn-action:hover {\n background-color: #262626;\n}\n\n.toastify-btn-action:active {\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);\n}\n\n.toastify-toaster.dark .toastify-btn-action,\n[data-theme=\"dark\"] .toastify-btn-action,\n.dark .toastify-btn-action {\n background-color: #f5f5f5;\n color: #171717;\n box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n\n.toastify-toaster.dark .toastify-btn-action:hover,\n[data-theme=\"dark\"] .toastify-btn-action:hover,\n.dark .toastify-btn-action:hover {\n background-color: #e5e5e5;\n}\n\n.toastify-toaster.dark .toastify-btn-action:active,\n[data-theme=\"dark\"] .toastify-btn-action:active,\n.dark .toastify-btn-action:active {\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);\n}\n";
|
|
157
|
+
|
|
158
|
+
export { type AnimationPreset, DefaultToastIcon, FadeAnimation, FolderStackAnimation, SlideAnimation, type SpringConfig, Toast, type ToastAction, ToastAnimation, type ToastAnimationComponent, type ToastAnimationProps, ToastContainer, type ToastData, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastTheme, type ToastType, Toaster, type ToasterProps, defaultSpring, toast, toastStore, toastifyStyles };
|