@samline/notify 0.2.5 → 0.2.6
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 +3 -3
- package/dist/index.cjs.js +6 -3
- package/dist/index.esm.js +6 -3
- package/dist/notify.umd.js +6 -3
- package/dist/styles.css +27 -2
- package/docs/browser.md +6 -6
- package/docs/vanilla.md +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -50,8 +50,8 @@ Use the browser build when your project loads scripts directly and cannot compil
|
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
```html
|
|
53
|
-
<script src="https://unpkg.com/@samline/notify@0.2.
|
|
54
|
-
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.
|
|
53
|
+
<script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>
|
|
54
|
+
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.6/dist/styles.css" />
|
|
55
55
|
|
|
56
56
|
<script>
|
|
57
57
|
// Always use an array of strings as the second argument
|
|
@@ -81,7 +81,7 @@ Choose the entrypoint matching your stack so you only import what you need.
|
|
|
81
81
|
| Use case | Import | Guide |
|
|
82
82
|
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
|
|
83
83
|
| Vanilla JS | `import { notify, initToasters } from '@samline/notify/vanilla'` | [docs/vanilla.md](docs/vanilla.md) |
|
|
84
|
-
| Browser / CDN | `<script src="https://unpkg.com/@samline/notify@0.2.
|
|
84
|
+
| Browser / CDN | `<script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>`<br/>`const api = window.notify; api.initToasters(...);` | [docs/browser.md](docs/browser.md) |
|
|
85
85
|
| React | `import { Toaster, notify } from '@samline/notify/react'` | [docs/react.md](docs/react.md) |
|
|
86
86
|
| Vue | `import { Toaster, notify } from '@samline/notify/vue'` | [docs/vue.md](docs/vue.md) |
|
|
87
87
|
| Svelte | `import Toaster, { notify } from '@samline/notify/svelte'` | [docs/svelte.md](docs/svelte.md) |
|
package/dist/index.cjs.js
CHANGED
|
@@ -1021,9 +1021,12 @@ function animate(target, keyframesOrOptions, options) {
|
|
|
1021
1021
|
// SVG Gooey Filter para animaciones morphing estilo Sileo
|
|
1022
1022
|
const gooeySVG = `<svg width="0" height="0" style="position:absolute">
|
|
1023
1023
|
<filter id="sileo-gooey">
|
|
1024
|
-
<feGaussianBlur in="SourceGraphic" stdDeviation="
|
|
1025
|
-
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0
|
|
1026
|
-
<
|
|
1024
|
+
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
|
|
1025
|
+
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -14" result="goo" />
|
|
1026
|
+
<feComponentTransfer in="goo" result="thresholded">
|
|
1027
|
+
<feFuncA type="table" tableValues="0 1" />
|
|
1028
|
+
</feComponentTransfer>
|
|
1029
|
+
<feBlend in="SourceGraphic" in2="thresholded" mode="normal" />
|
|
1027
1030
|
</filter>
|
|
1028
1031
|
</svg>`;
|
|
1029
1032
|
|
package/dist/index.esm.js
CHANGED
|
@@ -1017,9 +1017,12 @@ function animate(target, keyframesOrOptions, options) {
|
|
|
1017
1017
|
// SVG Gooey Filter para animaciones morphing estilo Sileo
|
|
1018
1018
|
const gooeySVG = `<svg width="0" height="0" style="position:absolute">
|
|
1019
1019
|
<filter id="sileo-gooey">
|
|
1020
|
-
<feGaussianBlur in="SourceGraphic" stdDeviation="
|
|
1021
|
-
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0
|
|
1022
|
-
<
|
|
1020
|
+
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
|
|
1021
|
+
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -14" result="goo" />
|
|
1022
|
+
<feComponentTransfer in="goo" result="thresholded">
|
|
1023
|
+
<feFuncA type="table" tableValues="0 1" />
|
|
1024
|
+
</feComponentTransfer>
|
|
1025
|
+
<feBlend in="SourceGraphic" in2="thresholded" mode="normal" />
|
|
1023
1026
|
</filter>
|
|
1024
1027
|
</svg>`;
|
|
1025
1028
|
|
package/dist/notify.umd.js
CHANGED
|
@@ -1023,9 +1023,12 @@
|
|
|
1023
1023
|
// SVG Gooey Filter para animaciones morphing estilo Sileo
|
|
1024
1024
|
const gooeySVG = `<svg width="0" height="0" style="position:absolute">
|
|
1025
1025
|
<filter id="sileo-gooey">
|
|
1026
|
-
<feGaussianBlur in="SourceGraphic" stdDeviation="
|
|
1027
|
-
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0
|
|
1028
|
-
<
|
|
1026
|
+
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
|
|
1027
|
+
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -14" result="goo" />
|
|
1028
|
+
<feComponentTransfer in="goo" result="thresholded">
|
|
1029
|
+
<feFuncA type="table" tableValues="0 1" />
|
|
1030
|
+
</feComponentTransfer>
|
|
1031
|
+
<feBlend in="SourceGraphic" in2="thresholded" mode="normal" />
|
|
1029
1032
|
</filter>
|
|
1030
1033
|
</svg>`;
|
|
1031
1034
|
|
package/dist/styles.css
CHANGED
|
@@ -44,7 +44,11 @@
|
|
|
44
44
|
color: var(--sileo-foreground);
|
|
45
45
|
padding: 0.75rem 0.875rem;
|
|
46
46
|
border-radius: var(--sileo-roundness, 1rem);
|
|
47
|
-
|
|
47
|
+
/* Multiple layered shadows for depth (outer, mid, subtle glow) */
|
|
48
|
+
box-shadow:
|
|
49
|
+
0 0.75rem 1.6rem rgba(2,6,23,0.55),
|
|
50
|
+
0 0.25rem 0.6rem rgba(2,6,23,0.35),
|
|
51
|
+
inset 0 0.25rem 0.6rem rgba(255,255,255,0.02);
|
|
48
52
|
display: flex;
|
|
49
53
|
gap: 0.5rem;
|
|
50
54
|
align-items: center;
|
|
@@ -74,11 +78,32 @@
|
|
|
74
78
|
align-items: center;
|
|
75
79
|
justify-content: center;
|
|
76
80
|
margin-right: 0.5rem;
|
|
77
|
-
box-shadow: 0 0 0.5rem 0.
|
|
81
|
+
box-shadow: 0 0 0.5rem 0.08rem rgba(0,0,0,0.12), 0 0 0.25rem rgba(16,24,40,0.2) inset;
|
|
78
82
|
backdrop-filter: blur(2.5px);
|
|
79
83
|
animation: sileo-badge-pop 0.38s cubic-bezier(.22,1,.36,1) both;
|
|
80
84
|
}
|
|
81
85
|
|
|
86
|
+
/* Left accent / green rim similar to Sileo */
|
|
87
|
+
.sileo-toast::before{
|
|
88
|
+
content: '';
|
|
89
|
+
position: absolute;
|
|
90
|
+
left: 0;
|
|
91
|
+
top: 8%;
|
|
92
|
+
bottom: 8%;
|
|
93
|
+
width: 0.6rem;
|
|
94
|
+
border-radius: 999px;
|
|
95
|
+
background: linear-gradient(180deg, rgba(34,197,94,1) 0%, rgba(6,95,70,1) 100%);
|
|
96
|
+
box-shadow: 0 6px 18px rgba(16,185,129,0.18);
|
|
97
|
+
transform: translateX(-8%);
|
|
98
|
+
pointer-events: none;
|
|
99
|
+
mix-blend-mode: screen;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Slight top badge overlap to create the 'pill' effect */
|
|
103
|
+
.sileo-toast[data-type="success"] .sileo-toast-badge{
|
|
104
|
+
box-shadow: 0 6px 18px rgba(16,185,129,0.12), 0 0 0.25rem rgba(0,0,0,0.18) inset;
|
|
105
|
+
}
|
|
106
|
+
|
|
82
107
|
@keyframes sileo-badge-pop {
|
|
83
108
|
0% { transform: scale(0.7); opacity: 0; }
|
|
84
109
|
60% { transform: scale(1.15); opacity: 1; }
|
package/docs/browser.md
CHANGED
|
@@ -8,8 +8,8 @@ Use this package directly in the browser when you cannot use npm modules or a bu
|
|
|
8
8
|
Add the stylesheet and UMD bundle to your HTML:
|
|
9
9
|
|
|
10
10
|
```html
|
|
11
|
-
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.
|
|
12
|
-
<script src="https://unpkg.com/@samline/notify@0.2.
|
|
11
|
+
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.6/dist/styles.css">
|
|
12
|
+
<script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>
|
|
13
13
|
<script>
|
|
14
14
|
document.addEventListener('DOMContentLoaded', () => {
|
|
15
15
|
const api = window.notify; // or window.notifications for legacy
|
|
@@ -40,8 +40,8 @@ Add the stylesheet and UMD bundle to your HTML:
|
|
|
40
40
|
|
|
41
41
|
### Advanced Options
|
|
42
42
|
|
|
43
|
-
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.
|
|
44
|
-
<script src="https://unpkg.com/@samline/notify@0.2.
|
|
43
|
+
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.6/dist/styles.css">
|
|
44
|
+
<script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>
|
|
45
45
|
| Property | Type | Default | Description |
|
|
46
46
|
| ------------- | -------------------------------------- | ----------- | ------------------------------------------- |
|
|
47
47
|
| `title` | string | — | Toast title |
|
|
@@ -55,8 +55,8 @@ Add the stylesheet and UMD bundle to your HTML:
|
|
|
55
55
|
| `styles` | { title, description, badge, button } | — | Custom class overrides for sub-elements |
|
|
56
56
|
| `roundness` | number | 16 | Border radius in pixels |
|
|
57
57
|
| `autopilot` | boolean \| object | true | Auto expand/collapse timing |
|
|
58
|
-
<script src="https://unpkg.com/@samline/notify@0.2.
|
|
59
|
-
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.
|
|
58
|
+
<script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>
|
|
59
|
+
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.6/dist/styles.css" />
|
|
60
60
|
|
|
61
61
|
```js
|
|
62
62
|
api.success({
|
package/docs/vanilla.md
CHANGED
|
@@ -178,8 +178,8 @@ notify.success({
|
|
|
178
178
|
If you are not using a bundler, use the [Browser guide](./browser.md) for CDN usage. Example:
|
|
179
179
|
|
|
180
180
|
```html
|
|
181
|
-
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.
|
|
182
|
-
<script src="https://unpkg.com/@samline/notify@0.2.
|
|
181
|
+
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.6/dist/styles.css">
|
|
182
|
+
<script src="https://unpkg.com/@samline/notify@0.2.6/dist/notify.umd.js"></script>
|
|
183
183
|
<script>
|
|
184
184
|
document.addEventListener('DOMContentLoaded', () => {
|
|
185
185
|
const api = window.notify;
|
package/package.json
CHANGED