perfect-toast 0.1.0
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/LICENSE +21 -0
- package/README.md +153 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/perfect-toast.js +366 -0
- package/dist/perfect-toast.umd.cjs +175 -0
- package/dist/styles.d.ts +23 -0
- package/dist/styles.d.ts.map +1 -0
- package/dist/toast.d.ts +40 -0
- package/dist/toast.d.ts.map +1 -0
- package/dist/types.d.ts +85 -0
- package/dist/types.d.ts.map +1 -0
- package/package.json +46 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Michael Kirsanov
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
# Perfect Toast
|
|
2
|
+
|
|
3
|
+
A Perfect Dark-inspired toast notification library with directional gradient sweep animations.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Directional color gradient reveal animation (like Perfect Dark's HUD)
|
|
8
|
+
- 9-point positioning grid
|
|
9
|
+
- 4 built-in color themes + custom hex support
|
|
10
|
+
- Light/dark mode support
|
|
11
|
+
- Pause on hover, click to dismiss
|
|
12
|
+
- TypeScript support
|
|
13
|
+
- Zero dependencies, ~3KB gzipped
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install perfect-toast
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
yarn add perfect-toast
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
pnpm add perfect-toast
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Quick Start
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { toast } from 'perfect-toast';
|
|
33
|
+
|
|
34
|
+
// Simple toast
|
|
35
|
+
toast('Objective complete.');
|
|
36
|
+
|
|
37
|
+
// Themed shortcuts
|
|
38
|
+
toast.success('Mission complete.');
|
|
39
|
+
toast.info('New intel received.');
|
|
40
|
+
toast.error('Connection lost.');
|
|
41
|
+
toast.warning('Low ammunition.');
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## API
|
|
45
|
+
|
|
46
|
+
### `toast(message, options?)`
|
|
47
|
+
|
|
48
|
+
Show a toast notification.
|
|
49
|
+
|
|
50
|
+
```typescript
|
|
51
|
+
const id = toast('Hello world', {
|
|
52
|
+
theme: 'green',
|
|
53
|
+
position: 'bottom-left',
|
|
54
|
+
direction: 'left',
|
|
55
|
+
duration: 4000,
|
|
56
|
+
});
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Themed Shortcuts
|
|
60
|
+
|
|
61
|
+
```typescript
|
|
62
|
+
toast.success(message, options?) // green theme
|
|
63
|
+
toast.info(message, options?) // cyan theme
|
|
64
|
+
toast.error(message, options?) // red theme
|
|
65
|
+
toast.warning(message, options?) // amber theme
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Management
|
|
69
|
+
|
|
70
|
+
```typescript
|
|
71
|
+
toast.dismiss(id) // Dismiss specific toast
|
|
72
|
+
toast.dismissAll() // Dismiss all toasts
|
|
73
|
+
toast.update(id, { message: 'Updated!' }) // Update toast message
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Configuration
|
|
77
|
+
|
|
78
|
+
Set global defaults:
|
|
79
|
+
|
|
80
|
+
```typescript
|
|
81
|
+
toast.configure({
|
|
82
|
+
position: 'bottom-left',
|
|
83
|
+
theme: 'green',
|
|
84
|
+
duration: 4000,
|
|
85
|
+
direction: 'left',
|
|
86
|
+
mode: 'auto',
|
|
87
|
+
});
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Options
|
|
91
|
+
|
|
92
|
+
| Option | Type | Default | Description |
|
|
93
|
+
|--------|------|---------|-------------|
|
|
94
|
+
| `theme` | `'green' \| 'cyan' \| 'red' \| 'amber' \| string` | `'green'` | Color theme or custom hex |
|
|
95
|
+
| `position` | `Position` | `'bottom-left'` | Screen position (9-point grid) |
|
|
96
|
+
| `mode` | `'dark' \| 'light' \| 'auto'` | `'auto'` | Background mode |
|
|
97
|
+
| `direction` | `'left' \| 'right' \| 'up' \| 'down'` | `'left'` | Animation sweep direction |
|
|
98
|
+
| `duration` | `number` | `4000` | Auto-dismiss time in ms (0 = persistent) |
|
|
99
|
+
| `animationSpeed` | `number` | `400` | Reveal animation duration in ms |
|
|
100
|
+
| `dismissible` | `boolean` | `true` | Click to dismiss |
|
|
101
|
+
| `pauseOnHover` | `boolean` | `true` | Pause timer on hover |
|
|
102
|
+
| `onShow` | `() => void` | - | Callback when toast appears |
|
|
103
|
+
| `onDismiss` | `() => void` | - | Callback when toast is dismissed |
|
|
104
|
+
|
|
105
|
+
## Positions
|
|
106
|
+
|
|
107
|
+
9-point positioning grid:
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
top-left top-center top-right
|
|
111
|
+
middle-left middle-center middle-right
|
|
112
|
+
bottom-left bottom-center bottom-right
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Global Config Options
|
|
116
|
+
|
|
117
|
+
Additional options available via `toast.configure()`:
|
|
118
|
+
|
|
119
|
+
| Option | Type | Default | Description |
|
|
120
|
+
|--------|------|---------|-------------|
|
|
121
|
+
| `fontFamily` | `string` | `'Courier New', Consolas, monospace` | Toast font |
|
|
122
|
+
| `fontSize` | `number` | `14` | Font size in pixels |
|
|
123
|
+
| `margin` | `number` | `16` | Margin from screen edges |
|
|
124
|
+
| `gap` | `number` | `6` | Gap between stacked toasts |
|
|
125
|
+
| `maxVisible` | `number` | `5` | Max visible toasts (0 = unlimited) |
|
|
126
|
+
|
|
127
|
+
## Color Themes
|
|
128
|
+
|
|
129
|
+
| Theme | Color | Use Case |
|
|
130
|
+
|-------|-------|----------|
|
|
131
|
+
| `green` | `#00ff00` | Success, confirmations |
|
|
132
|
+
| `cyan` | `#00ccff` | Info, neutral messages |
|
|
133
|
+
| `red` | `#ff3333` | Errors, warnings |
|
|
134
|
+
| `amber` | `#ffcc00` | Cautions, alerts |
|
|
135
|
+
|
|
136
|
+
Custom hex colors are also supported:
|
|
137
|
+
|
|
138
|
+
```typescript
|
|
139
|
+
toast('Custom color!', { theme: '#ff00ff' });
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## Browser Support
|
|
143
|
+
|
|
144
|
+
- Chrome 85+
|
|
145
|
+
- Firefox 75+
|
|
146
|
+
- Safari 15.4+
|
|
147
|
+
- Edge 85+
|
|
148
|
+
|
|
149
|
+
Requires CSS `@property` support for smooth gradient animations.
|
|
150
|
+
|
|
151
|
+
## License
|
|
152
|
+
|
|
153
|
+
MIT
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,GACL,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,366 @@
|
|
|
1
|
+
const f = {
|
|
2
|
+
green: { primary: "#00ff00", glow: "rgba(0, 255, 0, 0.5)" },
|
|
3
|
+
cyan: { primary: "#00ccff", glow: "rgba(0, 204, 255, 0.5)" },
|
|
4
|
+
red: { primary: "#ff3333", glow: "rgba(255, 51, 51, 0.5)" },
|
|
5
|
+
amber: { primary: "#ffcc00", glow: "rgba(255, 204, 0, 0.5)" }
|
|
6
|
+
}, b = {
|
|
7
|
+
dark: {
|
|
8
|
+
background: "rgba(0, 0, 0, 0.85)",
|
|
9
|
+
unfadedText: "transparent",
|
|
10
|
+
// Invisible until revealed
|
|
11
|
+
highlight: "#ffffff"
|
|
12
|
+
// White leading edge in dark mode
|
|
13
|
+
},
|
|
14
|
+
light: {
|
|
15
|
+
background: "rgba(255, 255, 255, 0.92)",
|
|
16
|
+
unfadedText: "transparent",
|
|
17
|
+
// Invisible until revealed
|
|
18
|
+
highlight: "#000000"
|
|
19
|
+
// Black leading edge in light mode
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
function y(e) {
|
|
23
|
+
return f[e] ? f[e] : {
|
|
24
|
+
primary: e,
|
|
25
|
+
glow: `${e}80`
|
|
26
|
+
// 50% opacity
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
function x(e, t) {
|
|
30
|
+
const r = {
|
|
31
|
+
position: "fixed"
|
|
32
|
+
};
|
|
33
|
+
return e.startsWith("top") ? r.top = `${t}px` : e.startsWith("middle") ? (r.top = "50%", r.transform = "translateY(-50%)") : r.bottom = `${t}px`, e.endsWith("left") ? r.left = `${t}px` : e.endsWith("center") ? (r.left = "50%", r.transform ? r.transform = "translate(-50%, -50%)" : r.transform = "translateX(-50%)") : r.right = `${t}px`, r;
|
|
34
|
+
}
|
|
35
|
+
function w(e) {
|
|
36
|
+
switch (e) {
|
|
37
|
+
case "left":
|
|
38
|
+
return 90;
|
|
39
|
+
// left to right
|
|
40
|
+
case "right":
|
|
41
|
+
return 270;
|
|
42
|
+
// right to left
|
|
43
|
+
case "up":
|
|
44
|
+
return 0;
|
|
45
|
+
// bottom to top
|
|
46
|
+
case "down":
|
|
47
|
+
return 180;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
let u = !1;
|
|
51
|
+
function k() {
|
|
52
|
+
if (u || typeof document > "u") return;
|
|
53
|
+
const e = document.createElement("style");
|
|
54
|
+
e.id = "perfect-toast-styles", e.textContent = `
|
|
55
|
+
.pt-container {
|
|
56
|
+
position: fixed;
|
|
57
|
+
z-index: 9999;
|
|
58
|
+
pointer-events: none;
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
align-items: flex-start;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.pt-container--top-left,
|
|
65
|
+
.pt-container--bottom-left,
|
|
66
|
+
.pt-container--middle-left {
|
|
67
|
+
align-items: flex-start;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.pt-container--top-center,
|
|
71
|
+
.pt-container--bottom-center,
|
|
72
|
+
.pt-container--middle-center {
|
|
73
|
+
align-items: center;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.pt-container--top-right,
|
|
77
|
+
.pt-container--bottom-right,
|
|
78
|
+
.pt-container--middle-right {
|
|
79
|
+
align-items: flex-end;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.pt-container--top-left,
|
|
83
|
+
.pt-container--top-center,
|
|
84
|
+
.pt-container--top-right {
|
|
85
|
+
flex-direction: column;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.pt-container--bottom-left,
|
|
89
|
+
.pt-container--bottom-center,
|
|
90
|
+
.pt-container--bottom-right {
|
|
91
|
+
flex-direction: column-reverse;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.pt-toast {
|
|
95
|
+
pointer-events: auto;
|
|
96
|
+
font-family: var(--pt-font-family, 'Courier New', Consolas, monospace);
|
|
97
|
+
font-size: var(--pt-font-size, 14px);
|
|
98
|
+
padding: 4px 8px;
|
|
99
|
+
margin: var(--pt-gap, 6px) 0;
|
|
100
|
+
background: var(--pt-bg);
|
|
101
|
+
border: 1px solid transparent;
|
|
102
|
+
position: relative;
|
|
103
|
+
max-width: 400px;
|
|
104
|
+
width: fit-content;
|
|
105
|
+
box-sizing: border-box;
|
|
106
|
+
/* Mask controls overall visibility - 40% gradient leading edge */
|
|
107
|
+
-webkit-mask-image: linear-gradient(
|
|
108
|
+
var(--pt-gradient-angle),
|
|
109
|
+
black calc(var(--pt-reveal, 0%) - 40%),
|
|
110
|
+
white var(--pt-reveal, 0%),
|
|
111
|
+
transparent calc(var(--pt-reveal, 0%) + 2%)
|
|
112
|
+
);
|
|
113
|
+
mask-image: linear-gradient(
|
|
114
|
+
var(--pt-gradient-angle),
|
|
115
|
+
black calc(var(--pt-reveal, 0%) - 40%),
|
|
116
|
+
white var(--pt-reveal, 0%),
|
|
117
|
+
transparent calc(var(--pt-reveal, 0%) + 2%)
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Border with 40% gradient to bright edge */
|
|
122
|
+
.pt-toast::before {
|
|
123
|
+
content: '';
|
|
124
|
+
position: absolute;
|
|
125
|
+
inset: -1px;
|
|
126
|
+
pointer-events: none;
|
|
127
|
+
/* Set border properties individually - shorthand resets border-image */
|
|
128
|
+
border-width: 1px;
|
|
129
|
+
border-style: solid;
|
|
130
|
+
border-color: transparent;
|
|
131
|
+
border-image: linear-gradient(
|
|
132
|
+
var(--pt-gradient-angle),
|
|
133
|
+
var(--pt-color) calc(var(--pt-reveal, 0%) - 40%),
|
|
134
|
+
var(--pt-highlight) var(--pt-reveal, 0%),
|
|
135
|
+
transparent calc(var(--pt-reveal, 0%) + 2%)
|
|
136
|
+
) 1;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.pt-toast--dismissible {
|
|
140
|
+
cursor: pointer;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* Text with 40% gradient to bright edge */
|
|
144
|
+
.pt-toast__text {
|
|
145
|
+
background: linear-gradient(
|
|
146
|
+
var(--pt-gradient-angle),
|
|
147
|
+
var(--pt-color) calc(var(--pt-reveal, 0%) - 40%),
|
|
148
|
+
var(--pt-highlight) var(--pt-reveal, 0%),
|
|
149
|
+
transparent calc(var(--pt-reveal, 0%) + 2%)
|
|
150
|
+
);
|
|
151
|
+
-webkit-background-clip: text;
|
|
152
|
+
background-clip: text;
|
|
153
|
+
-webkit-text-fill-color: transparent;
|
|
154
|
+
line-height: 1.3;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Enter animation - everything reveals together via --pt-reveal */
|
|
158
|
+
.pt-toast--entering {
|
|
159
|
+
animation: pt-reveal var(--pt-animation-speed, 400ms) ease-out forwards;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Visible state - keep gradient structure but fully revealed (no style switch = no brightness pop) */
|
|
163
|
+
.pt-toast--visible {
|
|
164
|
+
--pt-reveal: 150%;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* Exit animation - clean sweep to transparent (no bright edge) */
|
|
168
|
+
.pt-toast--exiting {
|
|
169
|
+
animation: pt-fade-out var(--pt-animation-speed, 400ms) ease-in forwards;
|
|
170
|
+
/* Mask: transparent sweeps left-to-right, no bright edge */
|
|
171
|
+
-webkit-mask-image: linear-gradient(
|
|
172
|
+
var(--pt-gradient-angle),
|
|
173
|
+
transparent calc(var(--pt-reveal, 0%) - 2%),
|
|
174
|
+
black calc(var(--pt-reveal, 0%) + 40%)
|
|
175
|
+
);
|
|
176
|
+
mask-image: linear-gradient(
|
|
177
|
+
var(--pt-gradient-angle),
|
|
178
|
+
transparent calc(var(--pt-reveal, 0%) - 2%),
|
|
179
|
+
black calc(var(--pt-reveal, 0%) + 40%)
|
|
180
|
+
);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.pt-toast--exiting::before {
|
|
184
|
+
/* Must set border properties individually - shorthand resets border-image */
|
|
185
|
+
border-width: 1px;
|
|
186
|
+
border-style: solid;
|
|
187
|
+
border-color: transparent;
|
|
188
|
+
border-image: linear-gradient(
|
|
189
|
+
var(--pt-gradient-angle),
|
|
190
|
+
transparent calc(var(--pt-reveal, 0%) - 2%),
|
|
191
|
+
var(--pt-color) calc(var(--pt-reveal, 0%) + 40%)
|
|
192
|
+
) 1;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.pt-toast--exiting .pt-toast__text {
|
|
196
|
+
background: linear-gradient(
|
|
197
|
+
var(--pt-gradient-angle),
|
|
198
|
+
transparent calc(var(--pt-reveal, 0%) - 2%),
|
|
199
|
+
var(--pt-color) calc(var(--pt-reveal, 0%) + 40%)
|
|
200
|
+
);
|
|
201
|
+
-webkit-background-clip: text;
|
|
202
|
+
background-clip: text;
|
|
203
|
+
-webkit-text-fill-color: transparent;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
@keyframes pt-reveal {
|
|
207
|
+
from { --pt-reveal: -40%; }
|
|
208
|
+
to { --pt-reveal: 105%; }
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
@keyframes pt-fade-out {
|
|
212
|
+
from { --pt-reveal: -40%; }
|
|
213
|
+
to { --pt-reveal: 105%; }
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* Register custom properties for animation */
|
|
217
|
+
@property --pt-reveal {
|
|
218
|
+
syntax: '<percentage>';
|
|
219
|
+
inherits: true;
|
|
220
|
+
initial-value: -40%;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
@property --pt-highlight {
|
|
224
|
+
syntax: '<color>';
|
|
225
|
+
inherits: true;
|
|
226
|
+
initial-value: white;
|
|
227
|
+
}
|
|
228
|
+
`, document.head.appendChild(e), u = !0;
|
|
229
|
+
}
|
|
230
|
+
const C = {
|
|
231
|
+
theme: "green",
|
|
232
|
+
position: "bottom-left",
|
|
233
|
+
mode: "auto",
|
|
234
|
+
direction: "left",
|
|
235
|
+
duration: 4e3,
|
|
236
|
+
animationSpeed: 400,
|
|
237
|
+
dismissible: !0,
|
|
238
|
+
pauseOnHover: !0,
|
|
239
|
+
onShow: () => {
|
|
240
|
+
},
|
|
241
|
+
onDismiss: () => {
|
|
242
|
+
},
|
|
243
|
+
fontFamily: "'Courier New', Consolas, monospace",
|
|
244
|
+
// Can set to '"Press Start 2P"' for pixel font
|
|
245
|
+
fontSize: 14,
|
|
246
|
+
margin: 16,
|
|
247
|
+
gap: 6,
|
|
248
|
+
maxVisible: 5
|
|
249
|
+
};
|
|
250
|
+
let o = { ...C };
|
|
251
|
+
const s = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map();
|
|
252
|
+
let T = 0;
|
|
253
|
+
function S() {
|
|
254
|
+
return `pt-${++T}-${Date.now()}`;
|
|
255
|
+
}
|
|
256
|
+
function E() {
|
|
257
|
+
return typeof window > "u" || window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
258
|
+
}
|
|
259
|
+
function I(e) {
|
|
260
|
+
return e === "auto" ? E() : e;
|
|
261
|
+
}
|
|
262
|
+
function $(e) {
|
|
263
|
+
if (d.has(e))
|
|
264
|
+
return d.get(e);
|
|
265
|
+
const t = document.createElement("div");
|
|
266
|
+
t.className = `pt-container pt-container--${e}`;
|
|
267
|
+
const r = x(e, o.margin);
|
|
268
|
+
return Object.assign(t.style, r), e.startsWith("middle") && (t.style.alignItems = e.endsWith("left") ? "flex-start" : e.endsWith("right") ? "flex-end" : "center"), document.body.appendChild(t), d.set(e, t), t;
|
|
269
|
+
}
|
|
270
|
+
function L(e) {
|
|
271
|
+
const { message: t, options: r } = e, a = y(r.theme), i = b[I(r.mode)], p = w(r.direction), n = document.createElement("div");
|
|
272
|
+
n.className = "pt-toast pt-toast--entering", r.dismissible && n.classList.add("pt-toast--dismissible"), n.style.setProperty("--pt-color", a.primary), n.style.setProperty("--pt-glow", a.glow), n.style.setProperty("--pt-highlight", i.highlight), n.style.setProperty("--pt-bg", i.background), n.style.setProperty("--pt-gradient-angle", `${p}deg`), n.style.setProperty("--pt-animation-speed", `${r.animationSpeed}ms`), n.style.setProperty("--pt-font-family", o.fontFamily), n.style.setProperty("--pt-font-size", `${o.fontSize}px`), n.style.setProperty("--pt-gap", `${o.gap}px`);
|
|
273
|
+
const l = document.createElement("span");
|
|
274
|
+
return l.className = "pt-toast__text", l.textContent = t, n.appendChild(l), r.dismissible && n.addEventListener("click", () => g(e.id)), r.pauseOnHover && (n.addEventListener("mouseenter", () => M(e.id)), n.addEventListener("mouseleave", () => O(e.id))), n;
|
|
275
|
+
}
|
|
276
|
+
function h(e) {
|
|
277
|
+
e.options.duration <= 0 || (e.timeoutId = window.setTimeout(() => {
|
|
278
|
+
g(e.id);
|
|
279
|
+
}, e.remainingTime));
|
|
280
|
+
}
|
|
281
|
+
function M(e) {
|
|
282
|
+
const t = s.get(e);
|
|
283
|
+
!t || t.phase !== "visible" || !t.timeoutId || (window.clearTimeout(t.timeoutId), t.pausedAt = Date.now(), t.timeoutId = null);
|
|
284
|
+
}
|
|
285
|
+
function O(e) {
|
|
286
|
+
const t = s.get(e);
|
|
287
|
+
if (!t || t.phase !== "visible" || !t.pausedAt) return;
|
|
288
|
+
const r = Date.now() - (t.options.duration - t.remainingTime);
|
|
289
|
+
t.remainingTime = Math.max(0, t.options.duration - r), t.pausedAt = null, h(t);
|
|
290
|
+
}
|
|
291
|
+
function c(e, t) {
|
|
292
|
+
k();
|
|
293
|
+
const r = S(), a = {
|
|
294
|
+
...o,
|
|
295
|
+
...t
|
|
296
|
+
}, i = {
|
|
297
|
+
id: r,
|
|
298
|
+
message: e,
|
|
299
|
+
options: a,
|
|
300
|
+
element: null,
|
|
301
|
+
timeoutId: null,
|
|
302
|
+
phase: "entering",
|
|
303
|
+
pausedAt: null,
|
|
304
|
+
remainingTime: a.duration
|
|
305
|
+
};
|
|
306
|
+
if (o.maxVisible > 0) {
|
|
307
|
+
const l = Array.from(s.values()).filter(
|
|
308
|
+
(m) => m.phase !== "exiting" && m.phase !== "removed"
|
|
309
|
+
);
|
|
310
|
+
if (l.length >= o.maxVisible) {
|
|
311
|
+
const m = l[0];
|
|
312
|
+
g(m.id);
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
s.set(r, i);
|
|
316
|
+
const p = $(a.position), n = L(i);
|
|
317
|
+
return i.element = n, a.position.startsWith("bottom") ? p.insertBefore(n, p.firstChild) : p.appendChild(n), setTimeout(() => {
|
|
318
|
+
i.phase === "entering" && (i.phase = "visible", n.classList.remove("pt-toast--entering"), n.classList.add("pt-toast--visible"), i.options.onShow?.(), h(i));
|
|
319
|
+
}, a.animationSpeed), r;
|
|
320
|
+
}
|
|
321
|
+
function g(e) {
|
|
322
|
+
const t = s.get(e);
|
|
323
|
+
!t || t.phase === "exiting" || t.phase === "removed" || (t.phase = "exiting", t.timeoutId && (window.clearTimeout(t.timeoutId), t.timeoutId = null), t.element ? (t.element.style.setProperty("--pt-reveal", "-40%"), t.element.classList.remove("pt-toast--visible"), t.element.classList.add("pt-toast--exiting"), setTimeout(() => {
|
|
324
|
+
v(e);
|
|
325
|
+
}, t.options.animationSpeed)) : v(e));
|
|
326
|
+
}
|
|
327
|
+
function v(e) {
|
|
328
|
+
const t = s.get(e);
|
|
329
|
+
if (!t) return;
|
|
330
|
+
t.phase = "removed", t.element?.remove(), t.options.onDismiss?.(), s.delete(e);
|
|
331
|
+
const r = d.get(t.options.position);
|
|
332
|
+
r && r.children.length === 0 && (r.remove(), d.delete(t.options.position));
|
|
333
|
+
}
|
|
334
|
+
function P() {
|
|
335
|
+
for (const e of s.keys())
|
|
336
|
+
g(e);
|
|
337
|
+
}
|
|
338
|
+
function _(e, t) {
|
|
339
|
+
const r = s.get(e);
|
|
340
|
+
if (!(!r || !r.element) && t.message) {
|
|
341
|
+
r.message = t.message;
|
|
342
|
+
const a = r.element.querySelector(".pt-toast__text");
|
|
343
|
+
a && (a.textContent = t.message);
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
function A(e) {
|
|
347
|
+
o = { ...o, ...e };
|
|
348
|
+
}
|
|
349
|
+
function W() {
|
|
350
|
+
return { ...o };
|
|
351
|
+
}
|
|
352
|
+
const z = Object.assign(c, {
|
|
353
|
+
dismiss: g,
|
|
354
|
+
dismissAll: P,
|
|
355
|
+
update: _,
|
|
356
|
+
configure: A,
|
|
357
|
+
getConfig: W,
|
|
358
|
+
// Themed shortcuts
|
|
359
|
+
success: (e, t) => c(e, { ...t, theme: "green" }),
|
|
360
|
+
info: (e, t) => c(e, { ...t, theme: "cyan" }),
|
|
361
|
+
error: (e, t) => c(e, { ...t, theme: "red" }),
|
|
362
|
+
warning: (e, t) => c(e, { ...t, theme: "amber" })
|
|
363
|
+
});
|
|
364
|
+
export {
|
|
365
|
+
z as toast
|
|
366
|
+
};
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
(function(l,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(l=typeof globalThis<"u"?globalThis:l||self,p(l.PerfectToast={}))})(this,(function(l){"use strict";const p={green:{primary:"#00ff00",glow:"rgba(0, 255, 0, 0.5)"},cyan:{primary:"#00ccff",glow:"rgba(0, 204, 255, 0.5)"},red:{primary:"#ff3333",glow:"rgba(255, 51, 51, 0.5)"},amber:{primary:"#ffcc00",glow:"rgba(255, 204, 0, 0.5)"}},y={dark:{background:"rgba(0, 0, 0, 0.85)",unfadedText:"transparent",highlight:"#ffffff"},light:{background:"rgba(255, 255, 255, 0.92)",unfadedText:"transparent",highlight:"#000000"}};function x(e){return p[e]?p[e]:{primary:e,glow:`${e}80`}}function w(e,t){const n={position:"fixed"};return e.startsWith("top")?n.top=`${t}px`:e.startsWith("middle")?(n.top="50%",n.transform="translateY(-50%)"):n.bottom=`${t}px`,e.endsWith("left")?n.left=`${t}px`:e.endsWith("center")?(n.left="50%",n.transform?n.transform="translate(-50%, -50%)":n.transform="translateX(-50%)"):n.right=`${t}px`,n}function k(e){switch(e){case"left":return 90;case"right":return 270;case"up":return 0;case"down":return 180}}let v=!1;function T(){if(v||typeof document>"u")return;const e=document.createElement("style");e.id="perfect-toast-styles",e.textContent=`
|
|
2
|
+
.pt-container {
|
|
3
|
+
position: fixed;
|
|
4
|
+
z-index: 9999;
|
|
5
|
+
pointer-events: none;
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
align-items: flex-start;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.pt-container--top-left,
|
|
12
|
+
.pt-container--bottom-left,
|
|
13
|
+
.pt-container--middle-left {
|
|
14
|
+
align-items: flex-start;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.pt-container--top-center,
|
|
18
|
+
.pt-container--bottom-center,
|
|
19
|
+
.pt-container--middle-center {
|
|
20
|
+
align-items: center;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.pt-container--top-right,
|
|
24
|
+
.pt-container--bottom-right,
|
|
25
|
+
.pt-container--middle-right {
|
|
26
|
+
align-items: flex-end;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.pt-container--top-left,
|
|
30
|
+
.pt-container--top-center,
|
|
31
|
+
.pt-container--top-right {
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.pt-container--bottom-left,
|
|
36
|
+
.pt-container--bottom-center,
|
|
37
|
+
.pt-container--bottom-right {
|
|
38
|
+
flex-direction: column-reverse;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.pt-toast {
|
|
42
|
+
pointer-events: auto;
|
|
43
|
+
font-family: var(--pt-font-family, 'Courier New', Consolas, monospace);
|
|
44
|
+
font-size: var(--pt-font-size, 14px);
|
|
45
|
+
padding: 4px 8px;
|
|
46
|
+
margin: var(--pt-gap, 6px) 0;
|
|
47
|
+
background: var(--pt-bg);
|
|
48
|
+
border: 1px solid transparent;
|
|
49
|
+
position: relative;
|
|
50
|
+
max-width: 400px;
|
|
51
|
+
width: fit-content;
|
|
52
|
+
box-sizing: border-box;
|
|
53
|
+
/* Mask controls overall visibility - 40% gradient leading edge */
|
|
54
|
+
-webkit-mask-image: linear-gradient(
|
|
55
|
+
var(--pt-gradient-angle),
|
|
56
|
+
black calc(var(--pt-reveal, 0%) - 40%),
|
|
57
|
+
white var(--pt-reveal, 0%),
|
|
58
|
+
transparent calc(var(--pt-reveal, 0%) + 2%)
|
|
59
|
+
);
|
|
60
|
+
mask-image: linear-gradient(
|
|
61
|
+
var(--pt-gradient-angle),
|
|
62
|
+
black calc(var(--pt-reveal, 0%) - 40%),
|
|
63
|
+
white var(--pt-reveal, 0%),
|
|
64
|
+
transparent calc(var(--pt-reveal, 0%) + 2%)
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Border with 40% gradient to bright edge */
|
|
69
|
+
.pt-toast::before {
|
|
70
|
+
content: '';
|
|
71
|
+
position: absolute;
|
|
72
|
+
inset: -1px;
|
|
73
|
+
pointer-events: none;
|
|
74
|
+
/* Set border properties individually - shorthand resets border-image */
|
|
75
|
+
border-width: 1px;
|
|
76
|
+
border-style: solid;
|
|
77
|
+
border-color: transparent;
|
|
78
|
+
border-image: linear-gradient(
|
|
79
|
+
var(--pt-gradient-angle),
|
|
80
|
+
var(--pt-color) calc(var(--pt-reveal, 0%) - 40%),
|
|
81
|
+
var(--pt-highlight) var(--pt-reveal, 0%),
|
|
82
|
+
transparent calc(var(--pt-reveal, 0%) + 2%)
|
|
83
|
+
) 1;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.pt-toast--dismissible {
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Text with 40% gradient to bright edge */
|
|
91
|
+
.pt-toast__text {
|
|
92
|
+
background: linear-gradient(
|
|
93
|
+
var(--pt-gradient-angle),
|
|
94
|
+
var(--pt-color) calc(var(--pt-reveal, 0%) - 40%),
|
|
95
|
+
var(--pt-highlight) var(--pt-reveal, 0%),
|
|
96
|
+
transparent calc(var(--pt-reveal, 0%) + 2%)
|
|
97
|
+
);
|
|
98
|
+
-webkit-background-clip: text;
|
|
99
|
+
background-clip: text;
|
|
100
|
+
-webkit-text-fill-color: transparent;
|
|
101
|
+
line-height: 1.3;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Enter animation - everything reveals together via --pt-reveal */
|
|
105
|
+
.pt-toast--entering {
|
|
106
|
+
animation: pt-reveal var(--pt-animation-speed, 400ms) ease-out forwards;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Visible state - keep gradient structure but fully revealed (no style switch = no brightness pop) */
|
|
110
|
+
.pt-toast--visible {
|
|
111
|
+
--pt-reveal: 150%;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Exit animation - clean sweep to transparent (no bright edge) */
|
|
115
|
+
.pt-toast--exiting {
|
|
116
|
+
animation: pt-fade-out var(--pt-animation-speed, 400ms) ease-in forwards;
|
|
117
|
+
/* Mask: transparent sweeps left-to-right, no bright edge */
|
|
118
|
+
-webkit-mask-image: linear-gradient(
|
|
119
|
+
var(--pt-gradient-angle),
|
|
120
|
+
transparent calc(var(--pt-reveal, 0%) - 2%),
|
|
121
|
+
black calc(var(--pt-reveal, 0%) + 40%)
|
|
122
|
+
);
|
|
123
|
+
mask-image: linear-gradient(
|
|
124
|
+
var(--pt-gradient-angle),
|
|
125
|
+
transparent calc(var(--pt-reveal, 0%) - 2%),
|
|
126
|
+
black calc(var(--pt-reveal, 0%) + 40%)
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.pt-toast--exiting::before {
|
|
131
|
+
/* Must set border properties individually - shorthand resets border-image */
|
|
132
|
+
border-width: 1px;
|
|
133
|
+
border-style: solid;
|
|
134
|
+
border-color: transparent;
|
|
135
|
+
border-image: linear-gradient(
|
|
136
|
+
var(--pt-gradient-angle),
|
|
137
|
+
transparent calc(var(--pt-reveal, 0%) - 2%),
|
|
138
|
+
var(--pt-color) calc(var(--pt-reveal, 0%) + 40%)
|
|
139
|
+
) 1;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.pt-toast--exiting .pt-toast__text {
|
|
143
|
+
background: linear-gradient(
|
|
144
|
+
var(--pt-gradient-angle),
|
|
145
|
+
transparent calc(var(--pt-reveal, 0%) - 2%),
|
|
146
|
+
var(--pt-color) calc(var(--pt-reveal, 0%) + 40%)
|
|
147
|
+
);
|
|
148
|
+
-webkit-background-clip: text;
|
|
149
|
+
background-clip: text;
|
|
150
|
+
-webkit-text-fill-color: transparent;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
@keyframes pt-reveal {
|
|
154
|
+
from { --pt-reveal: -40%; }
|
|
155
|
+
to { --pt-reveal: 105%; }
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
@keyframes pt-fade-out {
|
|
159
|
+
from { --pt-reveal: -40%; }
|
|
160
|
+
to { --pt-reveal: 105%; }
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* Register custom properties for animation */
|
|
164
|
+
@property --pt-reveal {
|
|
165
|
+
syntax: '<percentage>';
|
|
166
|
+
inherits: true;
|
|
167
|
+
initial-value: -40%;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
@property --pt-highlight {
|
|
171
|
+
syntax: '<color>';
|
|
172
|
+
inherits: true;
|
|
173
|
+
initial-value: white;
|
|
174
|
+
}
|
|
175
|
+
`,document.head.appendChild(e),v=!0}let a={...{theme:"green",position:"bottom-left",mode:"auto",direction:"left",duration:4e3,animationSpeed:400,dismissible:!0,pauseOnHover:!0,onShow:()=>{},onDismiss:()=>{},fontFamily:"'Courier New', Consolas, monospace",fontSize:14,margin:16,gap:6,maxVisible:5}};const s=new Map,d=new Map;let C=0;function S(){return`pt-${++C}-${Date.now()}`}function E(){return typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function I(e){return e==="auto"?E():e}function O(e){if(d.has(e))return d.get(e);const t=document.createElement("div");t.className=`pt-container pt-container--${e}`;const n=w(e,a.margin);return Object.assign(t.style,n),e.startsWith("middle")&&(t.style.alignItems=e.endsWith("left")?"flex-start":e.endsWith("right")?"flex-end":"center"),document.body.appendChild(t),d.set(e,t),t}function P(e){const{message:t,options:n}=e,i=x(n.theme),o=y[I(n.mode)],f=k(n.direction),r=document.createElement("div");r.className="pt-toast pt-toast--entering",n.dismissible&&r.classList.add("pt-toast--dismissible"),r.style.setProperty("--pt-color",i.primary),r.style.setProperty("--pt-glow",i.glow),r.style.setProperty("--pt-highlight",o.highlight),r.style.setProperty("--pt-bg",o.background),r.style.setProperty("--pt-gradient-angle",`${f}deg`),r.style.setProperty("--pt-animation-speed",`${n.animationSpeed}ms`),r.style.setProperty("--pt-font-family",a.fontFamily),r.style.setProperty("--pt-font-size",`${a.fontSize}px`),r.style.setProperty("--pt-gap",`${a.gap}px`);const c=document.createElement("span");return c.className="pt-toast__text",c.textContent=t,r.appendChild(c),n.dismissible&&r.addEventListener("click",()=>m(e.id)),n.pauseOnHover&&(r.addEventListener("mouseenter",()=>L(e.id)),r.addEventListener("mouseleave",()=>M(e.id))),r}function h(e){e.options.duration<=0||(e.timeoutId=window.setTimeout(()=>{m(e.id)},e.remainingTime))}function L(e){const t=s.get(e);!t||t.phase!=="visible"||!t.timeoutId||(window.clearTimeout(t.timeoutId),t.pausedAt=Date.now(),t.timeoutId=null)}function M(e){const t=s.get(e);if(!t||t.phase!=="visible"||!t.pausedAt)return;const n=Date.now()-(t.options.duration-t.remainingTime);t.remainingTime=Math.max(0,t.options.duration-n),t.pausedAt=null,h(t)}function g(e,t){T();const n=S(),i={...a,...t},o={id:n,message:e,options:i,element:null,timeoutId:null,phase:"entering",pausedAt:null,remainingTime:i.duration};if(a.maxVisible>0){const c=Array.from(s.values()).filter(u=>u.phase!=="exiting"&&u.phase!=="removed");if(c.length>=a.maxVisible){const u=c[0];m(u.id)}}s.set(n,o);const f=O(i.position),r=P(o);return o.element=r,i.position.startsWith("bottom")?f.insertBefore(r,f.firstChild):f.appendChild(r),setTimeout(()=>{o.phase==="entering"&&(o.phase="visible",r.classList.remove("pt-toast--entering"),r.classList.add("pt-toast--visible"),o.options.onShow?.(),h(o))},i.animationSpeed),n}function m(e){const t=s.get(e);!t||t.phase==="exiting"||t.phase==="removed"||(t.phase="exiting",t.timeoutId&&(window.clearTimeout(t.timeoutId),t.timeoutId=null),t.element?(t.element.style.setProperty("--pt-reveal","-40%"),t.element.classList.remove("pt-toast--visible"),t.element.classList.add("pt-toast--exiting"),setTimeout(()=>{b(e)},t.options.animationSpeed)):b(e))}function b(e){const t=s.get(e);if(!t)return;t.phase="removed",t.element?.remove(),t.options.onDismiss?.(),s.delete(e);const n=d.get(t.options.position);n&&n.children.length===0&&(n.remove(),d.delete(t.options.position))}function _(){for(const e of s.keys())m(e)}function $(e,t){const n=s.get(e);if(!(!n||!n.element)&&t.message){n.message=t.message;const i=n.element.querySelector(".pt-toast__text");i&&(i.textContent=t.message)}}function A(e){a={...a,...e}}function D(){return{...a}}const W=Object.assign(g,{dismiss:m,dismissAll:_,update:$,configure:A,getConfig:D,success:(e,t)=>g(e,{...t,theme:"green"}),info:(e,t)=>g(e,{...t,theme:"cyan"}),error:(e,t)=>g(e,{...t,theme:"red"}),warning:(e,t)=>g(e,{...t,theme:"amber"})});l.toast=W,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/styles.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Position, Direction, ModeColors, ThemeColors } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Built-in theme colors
|
|
4
|
+
*/
|
|
5
|
+
export declare const THEME_COLORS: Record<string, ThemeColors>;
|
|
6
|
+
/**
|
|
7
|
+
* Mode-specific colors
|
|
8
|
+
*/
|
|
9
|
+
export declare const MODE_COLORS: Record<'dark' | 'light', ModeColors>;
|
|
10
|
+
/**
|
|
11
|
+
* Get theme colors - supports built-in themes and custom hex
|
|
12
|
+
*/
|
|
13
|
+
export declare function getThemeColors(theme: string): ThemeColors;
|
|
14
|
+
/**
|
|
15
|
+
* Get position CSS properties
|
|
16
|
+
*/
|
|
17
|
+
export declare function getPositionStyles(position: Position, margin: number): Record<string, string>;
|
|
18
|
+
/**
|
|
19
|
+
* Get gradient direction in degrees
|
|
20
|
+
*/
|
|
21
|
+
export declare function getGradientAngle(direction: Direction): number;
|
|
22
|
+
export declare function injectStyles(): void;
|
|
23
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE5E;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAKpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,GAAG,OAAO,EAAE,UAAU,CAW5D,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CASzD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA8B5F;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,CAO7D;AAOD,wBAAgB,YAAY,IAAI,IAAI,CAsLnC"}
|
package/dist/toast.d.ts
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { ToastOptions, ToastConfig } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Show a toast
|
|
4
|
+
*/
|
|
5
|
+
declare function show(message: string, options?: ToastOptions): string;
|
|
6
|
+
/**
|
|
7
|
+
* Dismiss a toast
|
|
8
|
+
*/
|
|
9
|
+
declare function dismiss(id: string): void;
|
|
10
|
+
/**
|
|
11
|
+
* Dismiss all toasts
|
|
12
|
+
*/
|
|
13
|
+
declare function dismissAll(): void;
|
|
14
|
+
/**
|
|
15
|
+
* Update toast message
|
|
16
|
+
*/
|
|
17
|
+
declare function update(id: string, updates: {
|
|
18
|
+
message?: string;
|
|
19
|
+
}): void;
|
|
20
|
+
/**
|
|
21
|
+
* Configure global defaults
|
|
22
|
+
*/
|
|
23
|
+
declare function configure(newConfig: Partial<ToastConfig>): void;
|
|
24
|
+
/**
|
|
25
|
+
* Get current configuration
|
|
26
|
+
*/
|
|
27
|
+
declare function getConfig(): Readonly<Required<ToastConfig>>;
|
|
28
|
+
export declare const toast: typeof show & {
|
|
29
|
+
dismiss: typeof dismiss;
|
|
30
|
+
dismissAll: typeof dismissAll;
|
|
31
|
+
update: typeof update;
|
|
32
|
+
configure: typeof configure;
|
|
33
|
+
getConfig: typeof getConfig;
|
|
34
|
+
success: (message: string, options?: Omit<ToastOptions, "theme">) => string;
|
|
35
|
+
info: (message: string, options?: Omit<ToastOptions, "theme">) => string;
|
|
36
|
+
error: (message: string, options?: Omit<ToastOptions, "theme">) => string;
|
|
37
|
+
warning: (message: string, options?: Omit<ToastOptions, "theme">) => string;
|
|
38
|
+
};
|
|
39
|
+
export {};
|
|
40
|
+
//# sourceMappingURL=toast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../src/toast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EAIZ,MAAM,SAAS,CAAC;AAkKjB;;GAEG;AACH,iBAAS,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAyD7D;AAED;;GAEG;AACH,iBAAS,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAyBjC;AAsBD;;GAEG;AACH,iBAAS,UAAU,IAAI,IAAI,CAI1B;AAED;;GAEG;AACH,iBAAS,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAW/D;AAED;;GAEG;AACH,iBAAS,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAExD;AAED;;GAEG;AACH,iBAAS,SAAS,IAAI,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAEpD;AAGD,eAAO,MAAM,KAAK;;;;;;uBAQG,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;oBAGhD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;qBAG5C,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;uBAG3C,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;CAEhE,CAAC"}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 9-point grid positioning for toasts
|
|
3
|
+
*/
|
|
4
|
+
export type Position = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
5
|
+
/**
|
|
6
|
+
* Direction for the sweep animation
|
|
7
|
+
*/
|
|
8
|
+
export type Direction = 'left' | 'right' | 'up' | 'down';
|
|
9
|
+
/**
|
|
10
|
+
* Built-in color themes
|
|
11
|
+
*/
|
|
12
|
+
export type Theme = 'green' | 'cyan' | 'red' | 'amber';
|
|
13
|
+
/**
|
|
14
|
+
* Light/dark mode setting
|
|
15
|
+
*/
|
|
16
|
+
export type Mode = 'dark' | 'light' | 'auto';
|
|
17
|
+
/**
|
|
18
|
+
* Options for individual toasts
|
|
19
|
+
*/
|
|
20
|
+
export interface ToastOptions {
|
|
21
|
+
/** Color theme - built-in name or custom hex color */
|
|
22
|
+
theme?: Theme | string;
|
|
23
|
+
/** Position on screen */
|
|
24
|
+
position?: Position;
|
|
25
|
+
/** Light/dark mode */
|
|
26
|
+
mode?: Mode;
|
|
27
|
+
/** Direction of the sweep animation */
|
|
28
|
+
direction?: Direction;
|
|
29
|
+
/** Duration in ms before auto-dismiss (0 = persistent) */
|
|
30
|
+
duration?: number;
|
|
31
|
+
/** Duration of the reveal animation in ms */
|
|
32
|
+
animationSpeed?: number;
|
|
33
|
+
/** Allow click to dismiss */
|
|
34
|
+
dismissible?: boolean;
|
|
35
|
+
/** Pause timer on hover */
|
|
36
|
+
pauseOnHover?: boolean;
|
|
37
|
+
/** Callback when toast appears */
|
|
38
|
+
onShow?: () => void;
|
|
39
|
+
/** Callback when toast is dismissed */
|
|
40
|
+
onDismiss?: () => void;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Global configuration options
|
|
44
|
+
*/
|
|
45
|
+
export interface ToastConfig extends ToastOptions {
|
|
46
|
+
/** Font family for toast text */
|
|
47
|
+
fontFamily?: string;
|
|
48
|
+
/** Font size in pixels */
|
|
49
|
+
fontSize?: number;
|
|
50
|
+
/** Margin from screen edges in pixels */
|
|
51
|
+
margin?: number;
|
|
52
|
+
/** Gap between stacked toasts in pixels */
|
|
53
|
+
gap?: number;
|
|
54
|
+
/** Maximum number of visible toasts (0 = unlimited) */
|
|
55
|
+
maxVisible?: number;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Internal toast state
|
|
59
|
+
*/
|
|
60
|
+
export interface ToastState {
|
|
61
|
+
id: string;
|
|
62
|
+
message: string;
|
|
63
|
+
options: Required<ToastOptions>;
|
|
64
|
+
element: HTMLElement | null;
|
|
65
|
+
timeoutId: number | null;
|
|
66
|
+
phase: 'entering' | 'visible' | 'exiting' | 'removed';
|
|
67
|
+
pausedAt: number | null;
|
|
68
|
+
remainingTime: number;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Theme color definitions
|
|
72
|
+
*/
|
|
73
|
+
export interface ThemeColors {
|
|
74
|
+
primary: string;
|
|
75
|
+
glow: string;
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Resolved mode colors for rendering
|
|
79
|
+
*/
|
|
80
|
+
export interface ModeColors {
|
|
81
|
+
background: string;
|
|
82
|
+
unfadedText: string;
|
|
83
|
+
highlight: string;
|
|
84
|
+
}
|
|
85
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,QAAQ,GAChB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,sDAAsD;IACtD,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,uCAAuC;IACvC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IAChC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACtD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB"}
|
package/package.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "perfect-toast",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "A Perfect Dark-inspired toast notification library with directional fade animations",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/perfect-toast.umd.cjs",
|
|
7
|
+
"module": "./dist/perfect-toast.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/perfect-toast.js",
|
|
12
|
+
"require": "./dist/perfect-toast.umd.cjs",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"dev": "vite",
|
|
21
|
+
"build": "tsc && vite build",
|
|
22
|
+
"preview": "vite preview"
|
|
23
|
+
},
|
|
24
|
+
"keywords": [
|
|
25
|
+
"toast",
|
|
26
|
+
"notification",
|
|
27
|
+
"perfect-dark",
|
|
28
|
+
"animation",
|
|
29
|
+
"vanilla-js"
|
|
30
|
+
],
|
|
31
|
+
"author": "Michael Kirsanov",
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "https://github.com/lofimichael/perfect-toast.git"
|
|
36
|
+
},
|
|
37
|
+
"homepage": "https://github.com/lofimichael/perfect-toast#readme",
|
|
38
|
+
"bugs": {
|
|
39
|
+
"url": "https://github.com/lofimichael/perfect-toast/issues"
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"typescript": "^5.9.3",
|
|
43
|
+
"vite": "^7.3.0",
|
|
44
|
+
"vite-plugin-dts": "^4.5.4"
|
|
45
|
+
}
|
|
46
|
+
}
|