robot-toast 2.1.2 → 2.1.3
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 +153 -86
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
# 🤖 robot-toast
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<video autoplay loop muted width="100%" style="max-width: 100%;">
|
|
4
|
+
<source src="https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/toasts.mp4" type="video/mp4">
|
|
5
|
+
</video>
|
|
6
|
+
|
|
7
|
+
Lightweight toast notifications with complete control.
|
|
8
|
+
|
|
9
|
+
robot-toast gives you a canvas, not a prescription — bring your own robot, colors, buttons, and timing. 16 tree-shakeable robots, fully draggable, zero dependencies.
|
|
4
10
|
|
|
5
11
|
<p align="left">
|
|
6
12
|
<a href="https://robot-toast-client.vercel.app/" style="color:#e53935; font-weight:600; text-decoration:none;">Demo & Playground →</a>
|
|
@@ -14,7 +20,62 @@ Lightweight toast notifications with an animated robot companion. 16 tree-shakea
|
|
|
14
20
|
<img src="https://img.shields.io/bundlephobia/minzip/robot-toast?style=flat-square" />
|
|
15
21
|
</p>
|
|
16
22
|
|
|
17
|
-
|
|
23
|
+
## 🤖 Built-in Robots
|
|
24
|
+
|
|
25
|
+
<table>
|
|
26
|
+
<tr>
|
|
27
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><path d="M 25 60 Q 15 65, 20 80" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 95 45, 85 25" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="20" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="20" x2="50" y2="10" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="8" r="4" fill="#FF6B6B" stroke="#2B3A55" stroke-width="2"/><circle cx="40" cy="38" r="4" fill="#2B3A55"/><path d="M 55 38 Q 60 33, 65 38" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/></svg><br/><strong>wave</strong></td>
|
|
28
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><path d="M 25 60 Q 15 70, 25 85" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 85 70, 75 85" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="20" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="20" x2="50" y2="10" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="8" r="4" fill="#4D96FF" stroke="#2B3A55" stroke-width="2"/><circle cx="40" cy="38" r="4" fill="#2B3A55"/><circle cx="60" cy="38" r="4" fill="#2B3A55"/><line x1="45" y1="46" x2="55" y2="46" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/></svg><br/><strong>base</strong></td>
|
|
29
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#FFFFFF" /><stop offset="100%" stop-color="#D0E3FF" /></linearGradient><linearGradient id="darkGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#A8B2C1" /><stop offset="100%" stop-color="#7B8CA5" /></linearGradient></defs><line x1="50" y1="20" x2="50" y2="6" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="6" r="5" fill="#FFD93D" stroke="#2B3A55" stroke-width="3"/><path d="M 32 60 Q 15 65, 18 80" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="18" cy="80" r="4" fill="url(#darkGrad)" stroke="#2B3A55" stroke-width="3"/><path d="M 68 60 Q 85 65, 82 80" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="82" cy="80" r="4" fill="url(#darkGrad)" stroke="#2B3A55" stroke-width="3"/><rect x="42" y="48" width="16" height="12" fill="url(#darkGrad)" stroke="#2B3A55" stroke-width="4"/><path d="M 36 56 L 64 56 L 68 85 C 68 90, 62 94, 50 94 C 38 94, 32 90, 32 85 Z" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4" stroke-linejoin="round"/><rect x="42" y="66" width="16" height="8" rx="4" fill="#4D96FF" stroke="#2B3A55" stroke-width="3"/><rect x="16" y="28" width="10" height="16" rx="3" fill="url(#darkGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="74" y="28" width="10" height="16" rx="3" fill="url(#darkGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="22" y="20" width="56" height="34" rx="14" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><circle cx="36" cy="38" r="4" fill="#2B3A55"/><circle cx="64" cy="38" r="4" fill="#2B3A55"/><ellipse cx="28" cy="43" rx="4" ry="2" fill="#FF6B6B" opacity="0.5"/><ellipse cx="72" cy="43" rx="4" ry="2" fill="#FF6B6B" opacity="0.5"/><path d="M 46 44 Q 50 48, 54 44" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/></svg><br/><strong>base2</strong></td>
|
|
30
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><circle cx="20" cy="20" r="3" fill="#FF6B6B" /><rect x="80" y="25" width="6" height="6" fill="#4D96FF" transform="rotate(45 80 25)"/><circle cx="75" cy="10" r="2" fill="#FFD93D" /><path d="M 25 55 Q 10 40, 20 20" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 55 Q 90 40, 80 20" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="50" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="15" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="15" x2="50" y2="5" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="3" r="4" fill="#4ECB71" stroke="#2B3A55" stroke-width="2"/><path d="M 35 32 Q 40 25, 45 32" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/><path d="M 55 32 Q 60 25, 65 32" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/></svg><br/><strong>success</strong></td>
|
|
31
|
+
</tr>
|
|
32
|
+
<tr>
|
|
33
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><path d="M 85 15 L 95 35 L 75 35 Z" fill="#FF6B6B" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/><text x="85" y="32" font-family="sans-serif" font-size="14" fill="#FFF" font-weight="bold" text-anchor="middle">!</text><path d="M 25 55 Q 10 50, 20 35" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 90 70, 80 85" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="23" y="20" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="48" y1="20" x2="40" y2="10" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="40" cy="8" r="4" fill="#FF6B6B" stroke="#2B3A55" stroke-width="2"/><path d="M 34 34 L 42 42 M 42 34 L 34 42" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/><path d="M 54 34 L 62 42 M 62 34 L 54 42" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/><path d="M 38 48 L 42 45 L 46 48 L 50 45 L 54 48 L 58 45" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg><br/><strong>error</strong></td>
|
|
34
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><path d="M 20 30 Q 10 25, 15 15 Q 25 10, 30 20" fill="none" stroke="#A8B2C1" stroke-width="3" stroke-linecap="round"/><path d="M 80 30 Q 90 25, 85 15 Q 75 10, 70 20" fill="none" stroke="#A8B2C1" stroke-width="3" stroke-linecap="round"/><path d="M 25 60 L 15 75" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="15" cy="75" r="5" fill="#2B3A55"/><path d="M 75 60 L 85 75" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="85" cy="75" r="5" fill="#2B3A55"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="25" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="25" x2="50" y2="15" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="13" r="4" fill="#FF3333" stroke="#2B3A55" stroke-width="2"/><path d="M 32 35 L 48 42" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 68 35 L 52 42" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="40" y="48" width="20" height="6" rx="2" fill="#FFF" stroke="#2B3A55" stroke-width="2"/><line x1="45" y1="48" x2="45" y2="54" stroke="#2B3A55" stroke-width="2"/><line x1="50" y1="48" x2="50" y2="54" stroke="#2B3A55" stroke-width="2"/><line x1="55" y1="48" x2="55" y2="54" stroke="#2B3A55" stroke-width="2"/></svg><br/><strong>angry</strong></td>
|
|
35
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><path d="M 15 30 Q 10 20, 20 15 M 20 35 Q 15 25, 25 20" fill="none" stroke="#FF6B6B" stroke-width="3" stroke-linecap="round" opacity="0.7"/><path d="M 85 30 Q 90 20, 80 15 M 80 35 Q 85 25, 75 20" fill="none" stroke="#FF6B6B" stroke-width="3" stroke-linecap="round" opacity="0.7"/><path d="M 25 60 L 20 80" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 L 80 80" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="20" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="20" x2="50" y2="10" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="8" r="4" fill="#FF6B6B" stroke="#2B3A55" stroke-width="2"/><circle cx="40" cy="38" r="3" fill="#2B3A55"/><circle cx="60" cy="38" r="3" fill="#2B3A55"/><path d="M 32 32 L 45 36 M 68 32 L 55 36" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 40 50 Q 50 44, 60 50" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/></svg><br/><strong>angry2</strong></td>
|
|
36
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><path d="M 75 15 Q 95 15, 95 30 Q 95 45, 80 45 L 70 50 L 72 42 Q 60 40, 60 30 Q 60 15, 75 15 Z" fill="#FFF" stroke="#2B3A55" stroke-width="3"/><path d="M 25 60 Q 15 70, 30 80" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 85 40, 70 25" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="20" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="20" x2="50" y2="10" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="8" r="4" fill="#4D96FF" stroke="#2B3A55" stroke-width="2"/><circle cx="40" cy="36" r="4" fill="#2B3A55"/><circle cx="60" cy="36" r="4" fill="#2B3A55"/><ellipse cx="50" cy="46" rx="6" ry="3" fill="#2B3A55"/></svg><br/><strong>shock</strong></td>
|
|
37
|
+
</tr>
|
|
38
|
+
<tr>
|
|
39
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><circle cx="80" cy="20" r="10" fill="#FFF" stroke="#2B3A55" stroke-width="3"/><text x="80" y="25" font-family="sans-serif" font-size="14" fill="#2B3A55" font-weight="bold" text-anchor="middle">?</text><path d="M 25 60 Q 15 65, 20 80" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 85 55, 65 50" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><g transform="rotate(-5 50 37)"><rect x="25" y="20" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="20" x2="50" y2="10" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="8" r="4" fill="#FFD93D" stroke="#2B3A55" stroke-width="2"/><circle cx="40" cy="38" r="4" fill="#2B3A55"/><circle cx="60" cy="38" r="4" fill="#2B3A55"/></g></svg><br/><strong>think</strong></td>
|
|
40
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><path d="M 40 38 L 10 20 A 30 30 0 0 0 10 56 Z" fill="#4ECB71" opacity="0.3"/><path d="M 25 60 Q 15 70, 25 85" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 85 70, 75 85" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="20" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="20" x2="50" y2="10" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="8" r="4" fill="#4ECB71" stroke="#2B3A55" stroke-width="2"/><circle cx="60" cy="38" r="4" fill="#2B3A55"/><circle cx="40" cy="38" r="6" fill="none" stroke="#4ECB71" stroke-width="2"/><circle cx="40" cy="38" r="2" fill="#4ECB71"/></svg><br/><strong>search</strong></td>
|
|
41
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><g stroke="#2B3A55" stroke-width="2" fill="#FFD93D"><circle cx="85" cy="30" r="6" /><path d="M85 22V24 M85 36V38 M93 30H91 M77 30H79" stroke-linecap="round"/><circle cx="15" cy="75" r="5" fill="#A8B2C1"/><path d="M15 68V70 M15 80V82 M22 75H20 M8 75H10" stroke-linecap="round"/></g><path d="M 25 60 Q 15 55, 30 45" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 28 43 L 22 37 M 32 47 L 36 43" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 85 65, 80 80" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="20" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="20" x2="50" y2="10" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="8" r="4" fill="#FFD93D" stroke="#2B3A55" stroke-width="2"/><circle cx="40" cy="38" r="4" fill="#2B3A55"/><circle cx="60" cy="38" r="4" fill="#2B3A55"/></svg><br/><strong>loading</strong></td>
|
|
42
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><text x="75" y="25" font-family="sans-serif" font-size="12" fill="#2B3A55" font-weight="bold">Z</text><text x="85" y="15" font-family="sans-serif" font-size="10" fill="#2B3A55" font-weight="bold">z</text><path d="M 25 60 Q 15 70, 25 85" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 85 70, 75 85" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="25" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><path d="M 50 25 Q 45 15, 35 12" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="35" cy="12" r="4" fill="#A8B2C1" stroke="#2B3A55" stroke-width="2"/><path d="M 35 42 Q 40 46, 45 42" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/><path d="M 55 42 Q 60 46, 65 42" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/></svg><br/><strong>sleep</strong></td>
|
|
43
|
+
</tr>
|
|
44
|
+
<tr>
|
|
45
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><path d="M 25 60 Q 20 40, 35 35" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 80 70, 78 85" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="22" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><path d="M 50 22 Q 55 12, 65 15" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="65" cy="15" r="4" fill="#A8B2C1" stroke="#2B3A55" stroke-width="2"/><path d="M 55 40 Q 60 36, 65 40" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/><rect x="30" y="28" width="20" height="20" rx="8" fill="#E2F0FF" stroke="#2B3A55" stroke-width="4" transform="rotate(-10 40 38)"/><line x1="55" y1="50" x2="65" y2="50" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/></svg><br/><strong>headPalm</strong></td>
|
|
46
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><rect x="30" y="80" width="40" height="10" rx="2" fill="#A8B2C1" stroke="#2B3A55" stroke-width="3"/><line x1="35" y1="85" x2="65" y2="85" stroke="#2B3A55" stroke-width="2" stroke-dasharray="4 2"/><path d="M 25 60 Q 25 75, 40 80" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 75 75, 60 80" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="22" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="22" x2="50" y2="12" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="10" r="4" fill="#4D96FF" stroke="#2B3A55" stroke-width="2"/><ellipse cx="40" cy="40" rx="4" ry="2" fill="#2B3A55"/><ellipse cx="60" cy="40" rx="4" ry="2" fill="#2B3A55"/></svg><br/><strong>typing</strong></td>
|
|
47
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><path d="M 25 60 Q 15 70, 25 85" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 85 50, 85 35" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="80" cy="32" r="5" fill="#B8D8FF" stroke="#2B3A55" stroke-width="3"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="20" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="20" x2="50" y2="10" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="8" r="4" fill="#4ECB71" stroke="#2B3A55" stroke-width="2"/><circle cx="40" cy="36" r="4" fill="#2B3A55"/><path d="M 55 36 Q 60 31, 65 36" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/><path d="M 40 46 Q 50 52, 60 46" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/></svg><br/><strong>validation</strong></td>
|
|
48
|
+
<td align="center" width="25%"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"><defs><linearGradient id="roboGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E2F0FF" /><stop offset="100%" stop-color="#B8D8FF" /></linearGradient></defs><path d="M 25 60 Q 15 70, 25 85" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 75 60 Q 85 55, 85 45" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><path d="M 85 45 C 80 45, 78 40, 80 35 C 82 30, 88 30, 90 35 C 92 40, 95 40, 95 48 C 95 52, 90 55, 85 52" fill="#E2F0FF" stroke="#2B3A55" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><rect x="35" y="55" width="30" height="30" rx="8" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><rect x="25" y="20" width="50" height="35" rx="12" fill="url(#roboGrad)" stroke="#2B3A55" stroke-width="4"/><line x1="50" y1="20" x2="50" y2="10" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="8" r="4" fill="#4ECB71" stroke="#2B3A55" stroke-width="2"/><path d="M 35 36 Q 40 42, 45 36" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/><path d="M 55 36 Q 60 42, 65 36" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/></svg><br/><strong>validation2</strong></td>
|
|
49
|
+
</tr>
|
|
50
|
+
</table>
|
|
51
|
+
|
|
52
|
+
[**See them animated in the playground →**](https://robot-toast-client.vercel.app/features)
|
|
53
|
+
|
|
54
|
+
## 🎨 Features in Action
|
|
55
|
+
|
|
56
|
+
<table>
|
|
57
|
+
<tr>
|
|
58
|
+
<td align="center" width="50%">
|
|
59
|
+
<img src="https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/ad.png" alt="Light Mode" width="100%">
|
|
60
|
+
</td>
|
|
61
|
+
<td align="center" width="50%">
|
|
62
|
+
<img src="https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/darkmode.png" alt="Dark Mode" width="100%">
|
|
63
|
+
</td>
|
|
64
|
+
</tr>
|
|
65
|
+
<tr>
|
|
66
|
+
<td align="center" width="50%">
|
|
67
|
+
<img src="https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/lightmode.png" alt="Light Mode" width="100%">
|
|
68
|
+
</td>
|
|
69
|
+
<td align="center" width="50%">
|
|
70
|
+
<img src="https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/custom.png" alt="Custom Styling" width="100%">
|
|
71
|
+
</td>
|
|
72
|
+
</tr>
|
|
73
|
+
<tr>
|
|
74
|
+
<td align="center" colspan="2">
|
|
75
|
+
<img src="https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/questions_and_new_styles.png" alt="Styles & Questions" width="100%">
|
|
76
|
+
</td>
|
|
77
|
+
</tr>
|
|
78
|
+
</table>
|
|
18
79
|
|
|
19
80
|
## Install
|
|
20
81
|
|
|
@@ -25,38 +86,36 @@ npm install robot-toast
|
|
|
25
86
|
## Quick Start
|
|
26
87
|
|
|
27
88
|
```ts
|
|
28
|
-
import { toast } from
|
|
29
|
-
import { wave } from
|
|
89
|
+
import { toast } from "robot-toast";
|
|
90
|
+
import { wave } from "robot-toast/robots";
|
|
30
91
|
|
|
31
|
-
toast({ message:
|
|
32
|
-
toast.success(
|
|
33
|
-
toast.error(
|
|
92
|
+
toast({ message: "Hello! 🤖", robotVariant: wave });
|
|
93
|
+
toast.success("Operation successful!");
|
|
94
|
+
toast.error("Something went wrong");
|
|
34
95
|
```
|
|
35
96
|
|
|
36
|
-
**Explore all features & interactive demos →** [Full Playground](https://robot-toast-client.vercel.app/features)
|
|
37
|
-
|
|
38
97
|
## Features at a Glance
|
|
39
98
|
|
|
40
|
-
| Robots
|
|
41
|
-
|
|
42
|
-
| 16 built-in variants
|
|
43
|
-
| Tree-shakeable imports
|
|
44
|
-
| Custom images (SVG/PNG) | Progress bar
|
|
45
|
-
| | | | React hook included
|
|
99
|
+
| Robots | Layout | Styling | Behavior |
|
|
100
|
+
| ----------------------- | ------------------ | --------------------- | --------------------- |
|
|
101
|
+
| 16 built-in variants | 6 position options | 3 themes | Fully draggable |
|
|
102
|
+
| Tree-shakeable imports | Auto-queuing | Custom inline styles | Typewriter effect |
|
|
103
|
+
| Custom images (SVG/PNG) | Progress bar | Transitions (4 types) | Promise helpers |
|
|
104
|
+
| Custom image paths | Multi-toast queue | CSS overrides | React hook included |
|
|
46
105
|
|
|
47
106
|
---
|
|
48
107
|
|
|
49
|
-
##
|
|
108
|
+
## Usage
|
|
50
109
|
|
|
51
110
|
### Basic Usage
|
|
52
111
|
|
|
53
112
|
```ts
|
|
54
|
-
import { toast } from
|
|
55
|
-
import { wave, success, error } from
|
|
113
|
+
import { toast } from "robot-toast";
|
|
114
|
+
import { wave, success, error } from "robot-toast/robots";
|
|
56
115
|
|
|
57
|
-
toast(
|
|
58
|
-
toast({ message:
|
|
59
|
-
toast.success(
|
|
116
|
+
toast("Simple notification");
|
|
117
|
+
toast({ message: "With options", type: "success", robotVariant: wave });
|
|
118
|
+
toast.success("Shorthand");
|
|
60
119
|
```
|
|
61
120
|
|
|
62
121
|
### All Options
|
|
@@ -65,19 +124,19 @@ toast.success('Shorthand');
|
|
|
65
124
|
toast({
|
|
66
125
|
// Content
|
|
67
126
|
message: 'Notification text',
|
|
68
|
-
|
|
127
|
+
|
|
69
128
|
// Appearance
|
|
70
129
|
type: 'default' | 'info' | 'success' | 'warning' | 'error',
|
|
71
130
|
theme: 'light' | 'dark' | 'colored',
|
|
72
131
|
transition: 'bounce' | 'flip' | 'zoom' | 'slide',
|
|
73
|
-
position: 'top-left' | 'top-center' | 'top-right' |
|
|
132
|
+
position: 'top-left' | 'top-center' | 'top-right' |
|
|
74
133
|
'bottom-left' | 'bottom-center' | 'bottom-right',
|
|
75
|
-
|
|
134
|
+
|
|
76
135
|
// Robot & Styling
|
|
77
136
|
robotVariant: wave | base | success | error | '...' | 'default' | '/path.svg',
|
|
78
137
|
nearScreen: true,
|
|
79
138
|
style: { background: '...', color: '...' },
|
|
80
|
-
|
|
139
|
+
|
|
81
140
|
// Timing & Behavior
|
|
82
141
|
autoClose: 5000 | false,
|
|
83
142
|
typeSpeed: 30,
|
|
@@ -86,11 +145,11 @@ toast({
|
|
|
86
145
|
pauseOnHover: true,
|
|
87
146
|
pauseOnFocusLoss: true,
|
|
88
147
|
rtl: false,
|
|
89
|
-
|
|
148
|
+
|
|
90
149
|
// Multi-toast
|
|
91
150
|
limit: 0,
|
|
92
151
|
newestOnTop: false,
|
|
93
|
-
|
|
152
|
+
|
|
94
153
|
// Buttons & Callbacks
|
|
95
154
|
buttons: [{ label: 'Undo', onClick: () => {...} }],
|
|
96
155
|
onOpen: () => {...},
|
|
@@ -98,34 +157,16 @@ toast({
|
|
|
98
157
|
});
|
|
99
158
|
```
|
|
100
159
|
|
|
101
|
-
### Built-in Robots
|
|
102
|
-
|
|
103
|
-
Import any of the 16 built-in robots from `robot-toast/robots`:
|
|
104
|
-
|
|
105
|
-
```ts
|
|
106
|
-
import {
|
|
107
|
-
wave, base, base2, success, error,
|
|
108
|
-
angry, angry2, shock, think, search,
|
|
109
|
-
loading, sleep, headPalm, typing,
|
|
110
|
-
validation, validation2,
|
|
111
|
-
} from 'robot-toast/robots';
|
|
112
|
-
|
|
113
|
-
// Or import directly for guaranteed tree-shaking:
|
|
114
|
-
import { wave } from 'robot-toast/robots/wave';
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
Custom images are supported: pass any SVG/PNG/JPG/GIF/WebP path to `robotVariant`.
|
|
118
|
-
|
|
119
160
|
### Inline Buttons
|
|
120
161
|
|
|
121
162
|
Add undo/confirm/cancel style buttons to toasts:
|
|
122
163
|
|
|
123
164
|
```ts
|
|
124
165
|
toast({
|
|
125
|
-
message:
|
|
166
|
+
message: "File deleted",
|
|
126
167
|
buttons: [
|
|
127
|
-
{ label:
|
|
128
|
-
{ label:
|
|
168
|
+
{ label: "Undo", onClick: () => restoreFile() },
|
|
169
|
+
{ label: "Keep", onClick: () => {}, style: { color: "gray" } },
|
|
129
170
|
],
|
|
130
171
|
});
|
|
131
172
|
```
|
|
@@ -135,33 +176,81 @@ toast({
|
|
|
135
176
|
Attach loading/success/error messages to any promise:
|
|
136
177
|
|
|
137
178
|
```ts
|
|
138
|
-
toast.promise(
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
}
|
|
179
|
+
toast.promise(
|
|
180
|
+
fetch("/api/save").then((r) => r.json()),
|
|
181
|
+
{
|
|
182
|
+
loading: "Saving…",
|
|
183
|
+
success: (data) => `Saved as ${data.name}`,
|
|
184
|
+
error: (err) => `Failed: ${err.message}`,
|
|
185
|
+
},
|
|
186
|
+
);
|
|
143
187
|
```
|
|
144
188
|
|
|
145
189
|
### React Bindings
|
|
146
190
|
|
|
147
191
|
```tsx
|
|
148
|
-
import { useRobotToast, useToastOnMount } from
|
|
192
|
+
import { useRobotToast, useToastOnMount } from "robot-toast/react";
|
|
149
193
|
|
|
150
194
|
function App() {
|
|
151
195
|
const toast = useRobotToast();
|
|
152
|
-
return <button onClick={() => toast.success(
|
|
196
|
+
return <button onClick={() => toast.success("Saved!")}>Save</button>;
|
|
153
197
|
}
|
|
154
198
|
|
|
155
199
|
function InitBanner() {
|
|
156
|
-
useToastOnMount({ message:
|
|
200
|
+
useToastOnMount({ message: "Welcome!", autoClose: false });
|
|
157
201
|
return null;
|
|
158
202
|
}
|
|
159
203
|
```
|
|
160
204
|
|
|
205
|
+
### Complete Example
|
|
206
|
+
|
|
207
|
+
Combine robots, buttons, theming, and promises in one powerful toast:
|
|
208
|
+
|
|
209
|
+
```tsx
|
|
210
|
+
import { useRobotToast } from "robot-toast/react";
|
|
211
|
+
import { success, error, loading } from "robot-toast/robots";
|
|
212
|
+
|
|
213
|
+
function CompleteExample() {
|
|
214
|
+
const toast = useRobotToast();
|
|
215
|
+
|
|
216
|
+
const handleUpload = () => {
|
|
217
|
+
toast.promise(
|
|
218
|
+
fetch("/api/upload").then((r) => r.json()),
|
|
219
|
+
{
|
|
220
|
+
loading: {
|
|
221
|
+
message: "Uploading your file...",
|
|
222
|
+
robotVariant: loading,
|
|
223
|
+
theme: "dark",
|
|
224
|
+
},
|
|
225
|
+
success: {
|
|
226
|
+
message: "File uploaded! Ready to go? 🎉",
|
|
227
|
+
robotVariant: success,
|
|
228
|
+
theme: "colored",
|
|
229
|
+
style: { background: "#10b981", color: "white" },
|
|
230
|
+
buttons: [
|
|
231
|
+
{ label: "View", onClick: () => window.open("/files") },
|
|
232
|
+
{ label: "Done", onClick: () => {} },
|
|
233
|
+
],
|
|
234
|
+
},
|
|
235
|
+
error: {
|
|
236
|
+
message: "Upload failed. Try again?",
|
|
237
|
+
robotVariant: error,
|
|
238
|
+
theme: "dark",
|
|
239
|
+
style: { background: "#ef4444" },
|
|
240
|
+
buttons: [{ label: "Retry", onClick: handleUpload }],
|
|
241
|
+
},
|
|
242
|
+
},
|
|
243
|
+
);
|
|
244
|
+
};
|
|
245
|
+
|
|
246
|
+
return <button onClick={handleUpload}>Upload File</button>;
|
|
247
|
+
}
|
|
248
|
+
```
|
|
249
|
+
|
|
161
250
|
### Programmatic Control
|
|
162
251
|
|
|
163
252
|
```ts
|
|
164
|
-
const id = toast(
|
|
253
|
+
const id = toast("Working…");
|
|
165
254
|
toast.closeById(id);
|
|
166
255
|
toast.closeAll();
|
|
167
256
|
```
|
|
@@ -169,14 +258,14 @@ toast.closeAll();
|
|
|
169
258
|
### Themes & Custom Styles
|
|
170
259
|
|
|
171
260
|
```ts
|
|
172
|
-
toast({ message:
|
|
173
|
-
toast({ message:
|
|
174
|
-
toast({
|
|
175
|
-
message:
|
|
261
|
+
toast({ message: "Light", theme: "light" });
|
|
262
|
+
toast({ message: "Dark", theme: "dark" });
|
|
263
|
+
toast({
|
|
264
|
+
message: "Custom gradient",
|
|
176
265
|
style: {
|
|
177
|
-
background:
|
|
178
|
-
color:
|
|
179
|
-
borderRadius:
|
|
266
|
+
background: "linear-gradient(135deg, #667eea, #764ba2)",
|
|
267
|
+
color: "#fff",
|
|
268
|
+
borderRadius: "16px",
|
|
180
269
|
},
|
|
181
270
|
});
|
|
182
271
|
```
|
|
@@ -187,25 +276,3 @@ toast({
|
|
|
187
276
|
- Other types: `role="status"` + `aria-live="polite"`
|
|
188
277
|
- `aria-atomic="true"` ensures full message re-announcement
|
|
189
278
|
- Labeled close button for screen readers
|
|
190
|
-
|
|
191
|
-
### Framework Examples
|
|
192
|
-
|
|
193
|
-
**React / Next.js**
|
|
194
|
-
```tsx
|
|
195
|
-
'use client';
|
|
196
|
-
import { useRobotToast } from 'robot-toast/react';
|
|
197
|
-
import { wave } from 'robot-toast/robots';
|
|
198
|
-
|
|
199
|
-
export default function App() {
|
|
200
|
-
const toast = useRobotToast();
|
|
201
|
-
|
|
202
|
-
return (
|
|
203
|
-
<button onClick={() => toast.success({
|
|
204
|
-
message: 'Deployed!',
|
|
205
|
-
robotVariant: wave
|
|
206
|
-
})}>
|
|
207
|
-
Deploy
|
|
208
|
-
</button>
|
|
209
|
-
);
|
|
210
|
-
}
|
|
211
|
-
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "robot-toast",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3",
|
|
4
4
|
"description": "A lightweight, framework-agnostic toast notification library with an animated robot character. Tree-shakeable robots, draggable with swipe-to-dismiss, toast.promise(), and an optional React hook.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|