sonner 0.0.1 → 0.1.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/LICENSE.md +21 -0
- package/README.md +179 -3
- package/package.json +2 -1
- package/dist/index.d.ts +0 -53
- package/dist/index.mjs +0 -4
- package/dist/index.mjs.map +0 -1
package/LICENSE.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Emil Kowalski
|
|
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
CHANGED
|
@@ -1,7 +1,183 @@
|
|
|
1
|
-
# react-temps
|
|
2
1
|
|
|
3
|
-
|
|
2
|
+
|
|
3
|
+
https://user-images.githubusercontent.com/36730035/220868994-f0c92862-7e7d-487c-ab3a-540e7b48ab4a.mp4
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
# Introduction
|
|
8
|
+
|
|
9
|
+
[Sonner](https://sonner.emilkowal.ski/) is an opinionated toast component for React. It's customizable, but styled by default. Comes with a swipe to dismiss animation.
|
|
4
10
|
|
|
5
11
|
## Usage
|
|
6
12
|
|
|
7
|
-
|
|
13
|
+
To start using the library, install it in your project:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install sonner
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Add `<Toaster />` to your app, it will be the place where all your toasts will be rendered.
|
|
20
|
+
After that you can use `toast()` from anywhere in your app.
|
|
21
|
+
|
|
22
|
+
```jsx
|
|
23
|
+
import { Toaster, toast } from 'sonner';
|
|
24
|
+
|
|
25
|
+
// ...
|
|
26
|
+
|
|
27
|
+
function App() {
|
|
28
|
+
return (
|
|
29
|
+
<div>
|
|
30
|
+
<Toaster />
|
|
31
|
+
<button onClick={() => toast('My first toast')}>Give me a toast</button>
|
|
32
|
+
</div>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Types
|
|
38
|
+
|
|
39
|
+
### Default
|
|
40
|
+
|
|
41
|
+
Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
toast('Event has been created');
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
With icon and description:
|
|
48
|
+
|
|
49
|
+
```jsx
|
|
50
|
+
toast('Event has been created', {
|
|
51
|
+
description: 'Monday, January 3rd at 6:00pm',
|
|
52
|
+
icon: <MyIcon />,
|
|
53
|
+
});
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Success
|
|
57
|
+
|
|
58
|
+
Render a checkmark icon in front of the message.
|
|
59
|
+
|
|
60
|
+
```jsx
|
|
61
|
+
toast.success('Event has been created');
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Error
|
|
65
|
+
|
|
66
|
+
Renders an error icon in front of the message.
|
|
67
|
+
|
|
68
|
+
```jsx
|
|
69
|
+
toast.error('Event has not been created');
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Action
|
|
73
|
+
|
|
74
|
+
Renders a button.
|
|
75
|
+
|
|
76
|
+
```jsx
|
|
77
|
+
toast('Event has been created', {
|
|
78
|
+
action: {
|
|
79
|
+
label: 'Undo',
|
|
80
|
+
onClick: () => console.log('Undo'),
|
|
81
|
+
},
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Promise
|
|
86
|
+
|
|
87
|
+
Starts in a loading state and will update automatically after the promise resolves or fails.
|
|
88
|
+
|
|
89
|
+
```jsx
|
|
90
|
+
toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
|
|
91
|
+
loading: 'Loading',
|
|
92
|
+
success: 'Success',
|
|
93
|
+
error: 'Error',
|
|
94
|
+
});
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Custom
|
|
98
|
+
|
|
99
|
+
Render custom JSX.
|
|
100
|
+
|
|
101
|
+
```jsx
|
|
102
|
+
toast.custom(() => <div>This is a custom component</div>);
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Customization
|
|
106
|
+
|
|
107
|
+
### Theme
|
|
108
|
+
|
|
109
|
+
You can change the theme using the `theme` prop. Default theme is light.
|
|
110
|
+
|
|
111
|
+
```jsx
|
|
112
|
+
<Toaster theme="dark" />
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### Position
|
|
116
|
+
|
|
117
|
+
You can change the position through the `position` prop on the `<Toaster />` component. Default is `bottom-right`.
|
|
118
|
+
|
|
119
|
+
```jsx
|
|
120
|
+
// Available positions
|
|
121
|
+
// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
|
|
122
|
+
|
|
123
|
+
<Toaster position="top-center" />
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### Expanded
|
|
127
|
+
|
|
128
|
+
Toasts can also be expanded by default through the `expand` prop. You can also change the amount of visible toasts which is 3 by default.
|
|
129
|
+
|
|
130
|
+
```jsx
|
|
131
|
+
<Toaster expand visibleToasts={9} />
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### Styling for all toasts
|
|
135
|
+
|
|
136
|
+
You can style your toasts globally with the `toastOptions` prop in the `Toaster` component.
|
|
137
|
+
|
|
138
|
+
```jsx
|
|
139
|
+
<Toaster toastOptions={{ style: { background: 'red' }, className: 'my-toast' }} />
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### Styling for individual toast
|
|
143
|
+
|
|
144
|
+
```jsx
|
|
145
|
+
toast('Event has been created', {
|
|
146
|
+
style: {
|
|
147
|
+
background: 'red',
|
|
148
|
+
},
|
|
149
|
+
className: 'my-toast',
|
|
150
|
+
});
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Close button
|
|
154
|
+
|
|
155
|
+
Add a close button to all toasts that shows on hover by adding the `closeButton` prop.
|
|
156
|
+
|
|
157
|
+
```jsx
|
|
158
|
+
<Toaster closeButton />
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### Rich colors
|
|
162
|
+
|
|
163
|
+
You can make error and success state more colorful by adding the `richColors` prop.
|
|
164
|
+
|
|
165
|
+
```jsx
|
|
166
|
+
<Toaster richColors />
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### Custom offset
|
|
170
|
+
|
|
171
|
+
Offset from the edges of the screen.
|
|
172
|
+
|
|
173
|
+
```jsx
|
|
174
|
+
<Toaster offset="80px" />
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
## Keyboard focus
|
|
178
|
+
|
|
179
|
+
You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of event.code values for each key.
|
|
180
|
+
|
|
181
|
+
```jsx
|
|
182
|
+
<Toaster hotkey={['KeyC']} />
|
|
183
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sonner",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "An opinionated toast component for React.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"author": "Emil Kowalski <e@emilkowal.ski>",
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
|
+
"@playwright/test": "^1.30.0",
|
|
26
27
|
"@types/node": "^18.11.13",
|
|
27
28
|
"@types/react": "^18.0.26",
|
|
28
29
|
"react": "^18.2.0",
|
package/dist/index.d.ts
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
type ToastTypes = 'normal' | 'action' | 'success' | 'error' | 'loading';
|
|
4
|
-
type PromiseData = {
|
|
5
|
-
loading: string;
|
|
6
|
-
success: string | React.ReactNode;
|
|
7
|
-
error: string | React.ReactNode;
|
|
8
|
-
};
|
|
9
|
-
type PromiseT = () => Promise<any>;
|
|
10
|
-
interface ToastT {
|
|
11
|
-
id: number;
|
|
12
|
-
title?: string;
|
|
13
|
-
type?: ToastTypes;
|
|
14
|
-
icon?: React.ReactNode;
|
|
15
|
-
jsx?: React.ReactNode;
|
|
16
|
-
invert?: boolean;
|
|
17
|
-
description?: string;
|
|
18
|
-
duration?: number;
|
|
19
|
-
important?: boolean;
|
|
20
|
-
action?: {
|
|
21
|
-
label: string;
|
|
22
|
-
onClick: () => void;
|
|
23
|
-
};
|
|
24
|
-
cancel?: {
|
|
25
|
-
label: string;
|
|
26
|
-
onClick?: () => void;
|
|
27
|
-
};
|
|
28
|
-
promise?: PromiseT;
|
|
29
|
-
promiseData?: PromiseData;
|
|
30
|
-
style?: React.CSSProperties;
|
|
31
|
-
className?: string;
|
|
32
|
-
}
|
|
33
|
-
type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
|
|
34
|
-
type ExternalToast = Omit<ToastT, 'id' | 'type' | 'title'>;
|
|
35
|
-
|
|
36
|
-
declare const toast: ((message: string, data?: ExternalToast) => void) & {
|
|
37
|
-
success: (message: string, data?: ExternalToast) => void;
|
|
38
|
-
error: (message: string, data?: ExternalToast) => void;
|
|
39
|
-
custom: (jsx: (id: number) => React.ReactElement) => void;
|
|
40
|
-
message: (message: string, data?: ExternalToast) => void;
|
|
41
|
-
promise: (promise: PromiseT, data?: PromiseData) => void;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
interface ToasterProps {
|
|
45
|
-
invert?: boolean;
|
|
46
|
-
position?: Position;
|
|
47
|
-
hotkey?: string[];
|
|
48
|
-
expand?: boolean;
|
|
49
|
-
dismissable?: boolean;
|
|
50
|
-
}
|
|
51
|
-
declare const Toaster: (props: ToasterProps) => JSX.Element;
|
|
52
|
-
|
|
53
|
-
export { Toaster as default, toast };
|
package/dist/index.mjs
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
import e from"react";function U(r,{insertAt:o}={}){if(!r||typeof document=="undefined")return;let t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css",o==="top"&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=r:i.appendChild(document.createTextNode(r))}U(`.toaster{position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1: hsl(0, 0%, 99%);--gray2: hsl(0, 0%, 97.3%);--gray3: hsl(0, 0%, 95.1%);--gray4: hsl(0, 0%, 93%);--gray5: hsl(0, 0%, 90.9%);--gray6: hsl(0, 0%, 88.7%);--gray7: hsl(0, 0%, 85.8%);--gray8: hsl(0, 0%, 78%);--gray9: hsl(0, 0%, 56.1%);--gray10: hsl(0, 0%, 52.3%);--gray11: hsl(0, 0%, 43.5%);--gray12: hsl(0, 0%, 9%);--border-radius: 6px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:none;z-index:999999999}.toaster[data-x-position=right]{right:var(--offset)}.toaster[data-x-position=left]{left:var(--offset)}.toaster[data-x-position=center]{left:50%;transform:translate(-50%)}.toaster[data-y-position=top]{top:var(--offset)}.toaster[data-y-position=bottom]{bottom:var(--offset)}[data-react-temps-toast]{--y: translateY(100%);--lift-amount: calc(var(--lift) * var(--gap));--background: white;--border-color: var(--gray3);--color: var(--gray12);z-index:var(--z-index);display:flex;align-items:center;gap:6px;position:absolute;opacity:0;transform:var(--y);padding:16px;background:var(--background);border:1px solid var(--border-color);color:var(--color);border-radius:var(--border-radius);box-shadow:0 4px 12px #0000001a;width:var(--width);font-size:13px;touch-action:none;will-change:transform,opacity,height;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:none}[data-react-temps-toast][data-invert=true]{--background: var(--gray12);--border-color: var(--gray11);--color: var(--gray1)}[data-react-temps-toast]:focus-visible{box-shadow:0 4px 12px #0000001a,0 0 0 2px #0003}[data-react-temps-toast][data-y-position=top]{top:0;--y: translateY(-100%);--lift: 1;--lift-amount: calc(1 * var(--gap))}[data-react-temps-toast][data-y-position=bottom]{bottom:0;--y: translateY(100%);--lift: -1;--lift-amount: calc(var(--lift) * var(--gap))}[data-react-temps-toast] [data-description]{font-weight:400;line-height:1.4;color:var(--color)}[data-react-temps-toast] [data-title]{font-weight:500;color:var(--color)}[data-react-temps-toast] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:-3px;margin-right:4px}[data-react-temps-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);animation:fade-in .3s ease forwards}[data-react-temps-toast] [data-icon]>*{flex-shrink:0}[data-react-temps-toast] [data-content]{display:flex;flex-direction:column;gap:2px}[data-react-temps-toast] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--background);background:var(--color);border:none;cursor:pointer;outline:none;transition:opacity .4s,box-shadow .2s}[data-react-temps-toast] [data-button]:focus-visible{box-shadow:0 0 0 2px #0006}[data-react-temps-toast] [data-button]:first-of-type{margin-left:auto}[data-react-temps-toast] [data-cancel]{color:var(--color);background:var(--border-color)}[data-react-temps-toast] [data-close-button]{position:absolute;left:0;top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;background:var(--gray1);border:1px solid var(--gray4);transform:translate(-35%,-35%);border-radius:50%;opacity:0;cursor:pointer;transition:opacity .1s,background .2s,border-color .2s}[data-react-temps-toast]:hover [data-close-button]{opacity:1}[data-react-temps-toast]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-react-temps-toast][data-swiping=true]:before{content:"";position:absolute;top:50%;left:0;right:0;height:100%;transform:scaleX(3) translateY(-50%)}[data-react-temps-toast][data-swiping=false][data-removed=true]:before{content:"";position:absolute;inset:0;transform:scaleY(2)}[data-react-temps-toast]:after{content:"";position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-react-temps-toast][data-mounted=true]{--y: translateY(0);opacity:1}[data-react-temps-toast][data-expanded=false][data-front=false]{--scale: var(--toasts-before) * .05 + 1;--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-react-temps-toast]>*{transition:opacity .4s}[data-react-temps-toast][data-expanded=false][data-front=false]>*{opacity:0}[data-react-temps-toast][data-visible=false]{opacity:0;pointer-events:none}[data-react-temps-toast][data-expanded=true]{--y: translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-react-temps-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y: translateY(100%);opacity:0}[data-react-temps-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y: translateY(calc(var(--lift) * var(--offset) + 150%));opacity:0;transtion:transform .2s,opacity .1s}[data-react-temps-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{opacity:0;transtion:opacity .2s}[data-react-temps-toast][data-removed=true][data-front=false]:before{height:calc(var(--initial-height) + 20%)}[data-react-temps-toast][data-swiping=true]{transform:var(--y) translate(var(--swipe-amount, 0px));transition:none}[data-react-temps-toast][data-swipe-out=true][data-x-position=right],[data-react-temps-toast][data-swipe-out=true][data-x-position=center]{animation:swipe-out-right .2s ease-out}[data-react-temps-toast][data-swipe-out=true][data-x-position=left]{animation:swipe-out-left .2s ease-out}@keyframes swipe-out-left{0%{transform:var(--y) translate(var(--swipe-amount, 0px));opacity:1}to{transform:var(--y) translate(-100%);opacity:0}}@keyframes swipe-out-right{0%{transform:var(--y) translate(var(--swipe-amount, 0px));opacity:1}to{transform:var(--y) translate(100%);opacity:0}}@media (max-width: 600px){.toaster{position:fixed;bottom:20px;right:20px;left:20px;width:100%}[data-react-temps-toast]{bottom:0;width:calc(100% - 40px)}}.react-temps-loading-wrapper{--size: 16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.react-temps-loading-wrapper[data-visible=false]{animation:fade-out .2s ease forwards}.react-temps-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.react-temps-loading-bar{animation:spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.react-temps-loading-bar:nth-child(1){animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.react-temps-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.react-temps-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.react-temps-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.react-temps-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.react-temps-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.react-temps-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.react-temps-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.react-temps-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.react-temps-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.react-temps-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.react-temps-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes spin{0%{opacity:1}to{opacity:.15}}@media (prefers-reduced-motion){[data-react-temps-toast],[data-react-temps-toast]>*,.react-temps-loading-bar{transition:none!important;animation:none!important}}
|
|
3
|
-
`);import g from"react";var W=r=>{switch(r){case"success":return rt;case"error":return it;default:}},st=Array(12).fill(0),J=({visible:r})=>g.createElement("div",{className:"react-temps-loading-wrapper","data-visible":r},g.createElement("div",{className:"react-temps-spinner"},st.map((o,t)=>g.createElement("div",{className:"react-temps-loading-bar",key:`spinner-bar-${t}`})))),rt=g.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",height:"20",width:"20"},g.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",clipRule:"evenodd"}));var it=g.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",height:"20",width:"20"},g.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",clipRule:"evenodd"}));var E=0,$=class{constructor(){this.subscribe=o=>(this.subscribers.push(o),()=>{let t=this.subscribers.indexOf(o);this.subscribers.splice(t,1)});this.publish=o=>{this.subscribers.forEach(t=>t(o))};this.message=(o,t)=>{this.publish({...t,id:E++,title:o})};this.error=(o,t)=>{this.publish({...t,id:E++,type:"error",title:o})};this.success=(o,t)=>{this.publish({...t,id:E++,type:"success",title:o})};this.promise=(o,t)=>{this.publish({promiseData:t,promise:o,id:E++})};this.custom=o=>{let t=E++;this.publish({jsx:o(t),id:t})};this.subscribers=[]}},m=new $,nt=(r,o)=>{m.publish({title:r,...o,id:E++})},lt=nt,dt=Object.assign(lt,{success:m.success,error:m.error,custom:m.custom,message:m.message,promise:m.promise});var ct=3,pt=32,mt=4e3,ut=356,G=14,ft=40,gt=200,ht=r=>{var V;let{invert:o,toast:t,interacting:i,setHeights:u,heights:h,index:l,toasts:P,expanded:b,removeToast:C,dismissable:A,position:p,expandByDefault:f}=r,[S,L]=e.useState(!1),[M,y]=e.useState(!1),[O,z]=e.useState(!1),[k,d]=e.useState(!1),[s,v]=e.useState(null),[H,I]=e.useState(0),[q,Q]=e.useState(0),x=e.useRef(null),Z=l===0,tt=l+1<=ct,F=t.type,N=e.useMemo(()=>h.findIndex(a=>a.toastId===t.id)||0,[h,t.id]),j=e.useMemo(()=>t.duration||mt,[t.duration]),Y=e.useRef(0),K=e.useRef(j),B=e.useRef(null),[et,_]=p.split("-"),X=e.useMemo(()=>h.reduce((a,n,c)=>c>=N?a:a+n.height,0),[h,N]),at=t.invert||o,R=e.useMemo(()=>N*G+X,[N,X]);e.useEffect(()=>{L(!0)},[]),e.useEffect(()=>{t.promise&&(v("loading"),t.promise().then(()=>{v("success")}).catch(()=>{v("error")}))},[t.promise]);let w=e.useCallback(()=>{y(!0),u(a=>a.filter(n=>n.toastId!==t.id)),setTimeout(()=>{C(t)},gt)},[t,C,u]);e.useEffect(()=>{if(t.promise&&s==="loading")return;let a;return!b&&!i||f?(()=>{Y.current||(Y.current=new Date().getTime()),a=setTimeout(()=>{w()},K.current)})():(()=>{let T=new Date().getTime(),D=Y.current+j-T;K.current=D})(),()=>clearTimeout(a)},[b,f,t,j,w,t.promise,s,i]),e.useEffect(()=>{let a=x.current;if(a){let n=a.getBoundingClientRect().height;return Q(n),u(c=>[{toastId:t.id,height:n},...c]),()=>u(c=>c.filter(T=>T.toastId!==t.id))}},[u,t.id]);let ot=e.useMemo(()=>{switch(s){case"loading":return t.promiseData.loading;case"success":return t.promiseData.success;case"error":return t.promiseData.error;default:return null}},[t.promiseData,s]);return e.createElement("li",{"aria-live":t.important?"assertive":"polite","aria-atomic":"true",role:"status",tabIndex:0,ref:x,className:t.className,"data-react-temps-toast":"","data-mounted":S,"data-promise":Boolean(t.promise),"data-removed":M,"data-visible":tt,"data-y-position":et,"data-x-position":_,"data-index":l,"data-front":Z,"data-swiping":O,"data-type":F,"data-invert":at,"data-swipe-out":k,"data-expanded":Boolean(b||f&&S),style:{"--index":l,"--toasts-before":l,"--z-index":P.length-l,"--offset":`${M?H:R}px`,"--initial-height":f?"auto":`${q}px`,...t.style},onPointerDown:a=>{I(R),a.target.setPointerCapture(a.pointerId),a.target.tagName!=="BUTTON"&&(z(!0),B.current=a.clientX)},onPointerUp:()=>{var n,c;if(k)return;let a=Number(((n=x.current)==null?void 0:n.style.getPropertyValue("--swipe-amount").replace("px",""))||0);if(Math.abs(a)>=ft){I(R),w(),d(!0);return}(c=x.current)==null||c.style.setProperty("--swipe-amount","0px"),B.current=null,z(!1)},onPointerMove:a=>{var T,D;if(!B.current)return;let n=a.clientX-B.current;if(_==="right"||_==="center"?n<0:n>0){(T=x.current)==null||T.style.setProperty("--swipe-amount","0px");return}(D=x.current)==null||D.style.setProperty("--swipe-amount",`${n}px`)}},A?e.createElement("button",{"aria-label":"Close toast","data-close-button":!0,onClick:w},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},e.createElement("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.createElement("line",{x1:"6",y1:"6",x2:"18",y2:"18"}))):null,t.jsx?t.jsx:e.createElement(e.Fragment,null,F||t.icon||t.promise?e.createElement("div",{"data-icon":""},t.promise?e.createElement(J,{visible:s==="loading"}):null,t.icon||W(s!=null?s:t.type)):null,e.createElement("div",{"data-content":""},e.createElement("div",{"data-title":""},(V=t.title)!=null?V:ot),t.description?e.createElement("div",{"data-description":""},t.description):null),t.cancel?e.createElement("button",{"data-button":!0,"data-cancel":!0,onClick:()=>{var a;w(),(a=t.cancel)!=null&&a.onClick&&t.cancel.onClick()}},t.cancel.label):null,t.action?e.createElement("button",{"data-button":"",onClick:()=>{var a;w(),(a=t.action)==null||a.onClick()}},t.action.label):null))},bt=r=>{var k;let{invert:o,position:t="bottom-right",hotkey:i=["altKey","KeyT"],expand:u,dismissable:h}=r,[l,P]=e.useState([]),[b,C]=e.useState([]),[A,p]=e.useState(!1),[f,S]=e.useState(!1),[L,M]=t.split("-"),y=e.useRef(null),O=i.join("+").replace(/Key/g,"").replace(/Digit/g,""),z=e.useCallback(d=>P(s=>s.filter(({id:v})=>v!==d.id)),[]);return e.useEffect(()=>m.subscribe(d=>{P(s=>[d,...s])}),[]),e.useEffect(()=>{l.length<=1&&p(!1)},[l]),e.useEffect(()=>{let d=s=>{var H;i.every(I=>s[I]||s.code===I)&&(p(!0),(H=y.current)==null||H.focus()),s.code==="Escape"&&(document.activeElement===y.current||y.current.contains(document.activeElement))&&p(!1)};return document.addEventListener("keydown",d),()=>document.removeEventListener("keydown",d)},[i]),e.createElement("div",{role:"region","aria-label":`Notifications ${O}`,tabIndex:-1},e.createElement("ol",{tabIndex:-1,ref:y,className:"toaster","data-y-position":L,"data-x-position":M,style:{"--front-toast-height":`${(k=b[0])==null?void 0:k.height}px`,"--offset":`${pt}px`,"--width":`${ut}px`,"--gap":`${G}px`},onMouseEnter:()=>p(!0),onMouseMove:()=>p(!0),onMouseLeave:()=>{f||p(!1)},onPointerDown:()=>{S(!0)},onPointerUp:()=>S(!1)},l.map((d,s)=>e.createElement(ht,{key:d.id,index:s,toast:d,invert:o,dismissable:h,interacting:f,position:t,removeToast:z,toasts:l,heights:b,setHeights:C,expandByDefault:u,expanded:A}))))};var Pt=bt;export{Pt as default,dt as toast};
|
|
4
|
-
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx","#style-inject:#style-inject","../src/styles.css","../src/assets.tsx","../src/state.ts"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport './styles.css';\nimport { getAsset, Loader } from './assets';\nimport { HeightT, Position, ToastT } from './types';\nimport { ToastState, toast } from './state';\n\n// Visible toasts amount\nconst VISIBLE_TOASTS_AMOUNT = 3;\n\n// Viewport padding\nconst VIEWPORT_OFFSET = 32;\n\n// Default lifetime of a toasts (in ms)\nconst TOAST_LIFETIME = 4_000;\n\n// Default toast width\nconst TOAST_WIDTH = 356;\n\n// Default gap between toasts\nconst GAP = 14;\n\nconst SWIPE_TRESHOLD = 40;\n\nconst TIME_BEFORE_UNMOUNT = 200;\n\ninterface ToastProps {\n toast: ToastT;\n toasts: ToastT[];\n index: number;\n expanded: boolean;\n invert: boolean;\n heights: HeightT[];\n setHeights: React.Dispatch<React.SetStateAction<HeightT[]>>;\n removeToast: (toast: ToastT) => void;\n position: Position;\n expandByDefault: boolean;\n dismissable: boolean;\n interacting: boolean;\n}\n\nconst Toast = (props: ToastProps) => {\n const {\n invert: ToasterInvert,\n toast,\n interacting,\n setHeights,\n heights,\n index,\n toasts,\n expanded,\n removeToast,\n dismissable,\n position,\n expandByDefault,\n } = props;\n const [mounted, setMounted] = React.useState(false);\n const [removed, setRemoved] = React.useState(false);\n const [swiping, setSwiping] = React.useState(false);\n const [swipeOut, setSwipeOut] = React.useState(false);\n const [promiseStatus, setPromiseStatus] = React.useState<\n 'loading' | 'success' | 'error' | null\n >(null);\n const [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);\n const [initialHeight, setInitialHeight] = React.useState(0);\n const toastRef = React.useRef<HTMLLIElement>(null);\n const isFront = index === 0;\n const isVisible = index + 1 <= VISIBLE_TOASTS_AMOUNT;\n const toastType = toast.type;\n // Height index is used to calculate the offset as it gets updated before the toast array, which means we can calculate the new layout faster.\n const heightIndex = React.useMemo(\n () => heights.findIndex((height) => height.toastId === toast.id) || 0,\n [heights, toast.id]\n );\n const duration = React.useMemo(\n () => toast.duration || TOAST_LIFETIME,\n [toast.duration]\n );\n const closeTimerStartTimeRef = React.useRef(0);\n const closeTimerRemainingTimeRef = React.useRef(duration);\n const pointerStartXRef = React.useRef<number | null>(null);\n const [y, x] = position.split('-');\n const toastsHeightBefore = React.useMemo(() => {\n return heights.reduce((prev, curr, reducerIndex) => {\n // Calculate offset up untill current toast\n if (reducerIndex >= heightIndex) {\n return prev;\n }\n\n return prev + curr.height;\n }, 0);\n }, [heights, heightIndex]);\n const invert = toast.invert || ToasterInvert;\n\n const offset = React.useMemo(\n () => heightIndex * GAP + toastsHeightBefore,\n [heightIndex, toastsHeightBefore]\n );\n\n React.useEffect(() => {\n // Trigger enter animation without using CSS animation\n setMounted(true);\n }, []);\n\n React.useEffect(() => {\n if (toast.promise) {\n setPromiseStatus('loading');\n toast\n .promise()\n .then(() => {\n setPromiseStatus('success');\n })\n .catch(() => {\n setPromiseStatus('error');\n });\n }\n }, [toast.promise]);\n\n const deleteToast = React.useCallback(() => {\n // Save the offset for the exit swipe animation\n setRemoved(true);\n setHeights((h) => h.filter((height) => height.toastId !== toast.id));\n\n setTimeout(() => {\n removeToast(toast);\n }, TIME_BEFORE_UNMOUNT);\n }, [toast, removeToast, setHeights]);\n\n React.useEffect(() => {\n if (toast.promise && promiseStatus === 'loading') return;\n let timeoutId: NodeJS.Timeout;\n\n // Pause the timer on each hover\n const pauseTimer = () => {\n const now = new Date().getTime();\n // Calculate how much time is left (total duration + start time - current time) will give us the remaining time\n const timeRemaining = closeTimerStartTimeRef.current + duration - now;\n closeTimerRemainingTimeRef.current = timeRemaining;\n };\n\n const startTimer = () => {\n if (!closeTimerStartTimeRef.current) {\n closeTimerStartTimeRef.current = new Date().getTime();\n }\n\n timeoutId = setTimeout(() => {\n deleteToast();\n }, closeTimerRemainingTimeRef.current);\n };\n\n // Stop the timer if the toast is expanded/expanded by default or we are interacting with it (e.g. mobile swipe without expand)\n if ((!expanded && !interacting) || expandByDefault) {\n startTimer();\n } else {\n pauseTimer();\n }\n\n return () => clearTimeout(timeoutId);\n }, [\n expanded,\n expandByDefault,\n toast,\n duration,\n deleteToast,\n toast.promise,\n promiseStatus,\n interacting,\n ]);\n\n React.useEffect(() => {\n const toastNode = toastRef.current;\n\n if (toastNode) {\n const height = toastNode.getBoundingClientRect().height;\n\n setInitialHeight(height);\n setHeights((h) => [{ toastId: toast.id, height }, ...h]);\n\n return () =>\n setHeights((h) => h.filter((height) => height.toastId !== toast.id));\n }\n }, [setHeights, toast.id]);\n\n const promiseTitle = React.useMemo(() => {\n switch (promiseStatus) {\n case 'loading':\n return toast.promiseData.loading;\n case 'success':\n return toast.promiseData.success;\n case 'error':\n return toast.promiseData.error;\n default:\n return null;\n }\n }, [toast.promiseData, promiseStatus]);\n\n return (\n <li\n aria-live={toast.important ? 'assertive' : 'polite'}\n aria-atomic=\"true\"\n role=\"status\"\n tabIndex={0}\n ref={toastRef}\n className={toast.className}\n data-react-temps-toast=\"\"\n data-mounted={mounted}\n data-promise={Boolean(toast.promise)}\n data-removed={removed}\n data-visible={isVisible}\n data-y-position={y}\n data-x-position={x}\n data-index={index}\n data-front={isFront}\n data-swiping={swiping}\n data-type={toastType}\n data-invert={invert}\n data-swipe-out={swipeOut}\n data-expanded={Boolean(expanded || (expandByDefault && mounted))}\n style={\n {\n '--index': index,\n '--toasts-before': index,\n '--z-index': toasts.length - index,\n '--offset': `${removed ? offsetBeforeRemove : offset}px`,\n '--initial-height': expandByDefault ? 'auto' : `${initialHeight}px`,\n ...toast.style,\n } as React.CSSProperties\n }\n onPointerDown={(event) => {\n setOffsetBeforeRemove(offset);\n // Ensure we maintain correct pointer capture even when going outside of the toast (e.g. when swiping)\n (event.target as HTMLElement).setPointerCapture(event.pointerId);\n if ((event.target as HTMLElement).tagName === 'BUTTON') return;\n setSwiping(true);\n pointerStartXRef.current = event.clientX;\n }}\n onPointerUp={() => {\n if (swipeOut) return;\n const swipeAmount = Number(\n toastRef.current?.style\n .getPropertyValue('--swipe-amount')\n .replace('px', '') || 0\n );\n\n // Remove only if treshold is met\n if (Math.abs(swipeAmount) >= SWIPE_TRESHOLD) {\n setOffsetBeforeRemove(offset);\n deleteToast();\n setSwipeOut(true);\n return;\n }\n\n toastRef.current?.style.setProperty('--swipe-amount', '0px');\n pointerStartXRef.current = null;\n setSwiping(false);\n }}\n onPointerMove={(event) => {\n if (!pointerStartXRef.current) return;\n const xPosition = event.clientX - pointerStartXRef.current;\n const isAllowedToSwipe =\n x === 'right' || x === 'center' ? xPosition < 0 : xPosition > 0;\n // We don't want to swipe to the left and vice versa depending on toast position\n if (isAllowedToSwipe) {\n toastRef.current?.style.setProperty('--swipe-amount', '0px');\n return;\n }\n\n toastRef.current?.style.setProperty('--swipe-amount', `${xPosition}px`);\n }}\n >\n {dismissable ? (\n <button\n aria-label=\"Close toast\"\n data-close-button\n onClick={deleteToast}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n ) : null}\n {toast.jsx ? (\n toast.jsx\n ) : (\n <>\n {toastType || toast.icon || toast.promise ? (\n <div data-icon=\"\">\n {toast.promise ? (\n <Loader visible={promiseStatus === 'loading'} />\n ) : null}\n {toast.icon || getAsset(promiseStatus ?? toast.type)}\n </div>\n ) : null}\n\n <div data-content=\"\">\n <div data-title=\"\">{toast.title ?? promiseTitle}</div>\n {toast.description ? (\n <div data-description=\"\">{toast.description}</div>\n ) : null}\n </div>\n {toast.cancel ? (\n <button\n data-button\n data-cancel\n onClick={() => {\n deleteToast();\n if (toast.cancel?.onClick) {\n toast.cancel.onClick();\n }\n }}\n >\n {toast.cancel.label}\n </button>\n ) : null}\n {toast.action ? (\n <button\n data-button=\"\"\n onClick={() => {\n deleteToast();\n toast.action?.onClick();\n }}\n >\n {toast.action.label}\n </button>\n ) : null}\n </>\n )}\n </li>\n );\n};\n\ninterface ToasterProps {\n invert?: boolean;\n position?: Position;\n hotkey?: string[];\n expand?: boolean;\n dismissable?: boolean;\n}\n\nconst Toaster = (props: ToasterProps) => {\n const {\n invert,\n position = 'bottom-right',\n hotkey = ['altKey', 'KeyT'],\n expand,\n dismissable,\n } = props;\n const [toasts, setToasts] = React.useState<ToastT[]>([]);\n const [heights, setHeights] = React.useState<HeightT[]>([]);\n const [expanded, setExpanded] = React.useState(false);\n const [interacting, setInteracting] = React.useState(false);\n const [y, x] = position.split('-');\n const listRef = React.useRef<HTMLOListElement>(null);\n const hotkeyLabel = hotkey\n .join('+')\n .replace(/Key/g, '')\n .replace(/Digit/g, '');\n\n const removeToast = React.useCallback(\n (toast: ToastT) =>\n setToasts((toasts) => toasts.filter(({ id }) => id !== toast.id)),\n []\n );\n\n React.useEffect(() => {\n return ToastState.subscribe((toast) => {\n setToasts((toasts) => [toast, ...toasts]);\n });\n }, []);\n\n React.useEffect(() => {\n // Ensure expanded is always false when no toasts are present / only one left\n if (toasts.length <= 1) {\n setExpanded(false);\n }\n }, [toasts]);\n\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const isHotkeyPressed = hotkey.every(\n (key) => (event as any)[key] || event.code === key\n );\n\n if (isHotkeyPressed) {\n setExpanded(true);\n listRef.current?.focus();\n }\n\n if (\n event.code === 'Escape' &&\n (document.activeElement === listRef.current ||\n listRef.current.contains(document.activeElement))\n ) {\n setExpanded(false);\n }\n };\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [hotkey]);\n\n return (\n // Remove item from normal navigation flow, only available via hotkey\n <div\n role=\"region\"\n aria-label={`Notifications ${hotkeyLabel}`}\n tabIndex={-1}\n >\n <ol\n tabIndex={-1}\n ref={listRef}\n className=\"toaster\"\n data-y-position={y}\n data-x-position={x}\n style={\n {\n '--front-toast-height': `${heights[0]?.height}px`,\n '--offset': `${VIEWPORT_OFFSET}px`,\n '--width': `${TOAST_WIDTH}px`,\n '--gap': `${GAP}px`,\n } as React.CSSProperties\n }\n onMouseEnter={() => setExpanded(true)}\n onMouseMove={() => setExpanded(true)}\n onMouseLeave={() => {\n // Avoid setting expanded to false when interacting with a toast, e.g. swiping\n if (!interacting) {\n setExpanded(false);\n }\n }}\n onPointerDown={() => {\n setInteracting(true);\n }}\n onPointerUp={() => setInteracting(false)}\n >\n {toasts.map((toast, index) => (\n <Toast\n key={toast.id}\n index={index}\n toast={toast}\n invert={invert}\n dismissable={dismissable}\n interacting={interacting}\n position={position}\n removeToast={removeToast}\n toasts={toasts}\n heights={heights}\n setHeights={setHeights}\n expandByDefault={expand}\n expanded={expanded}\n />\n ))}\n </ol>\n </div>\n );\n};\nexport { toast };\nexport default Toaster;\n","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".toaster{position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1: hsl(0, 0%, 99%);--gray2: hsl(0, 0%, 97.3%);--gray3: hsl(0, 0%, 95.1%);--gray4: hsl(0, 0%, 93%);--gray5: hsl(0, 0%, 90.9%);--gray6: hsl(0, 0%, 88.7%);--gray7: hsl(0, 0%, 85.8%);--gray8: hsl(0, 0%, 78%);--gray9: hsl(0, 0%, 56.1%);--gray10: hsl(0, 0%, 52.3%);--gray11: hsl(0, 0%, 43.5%);--gray12: hsl(0, 0%, 9%);--border-radius: 6px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:none;z-index:999999999}.toaster[data-x-position=right]{right:var(--offset)}.toaster[data-x-position=left]{left:var(--offset)}.toaster[data-x-position=center]{left:50%;transform:translate(-50%)}.toaster[data-y-position=top]{top:var(--offset)}.toaster[data-y-position=bottom]{bottom:var(--offset)}[data-react-temps-toast]{--y: translateY(100%);--lift-amount: calc(var(--lift) * var(--gap));--background: white;--border-color: var(--gray3);--color: var(--gray12);z-index:var(--z-index);display:flex;align-items:center;gap:6px;position:absolute;opacity:0;transform:var(--y);padding:16px;background:var(--background);border:1px solid var(--border-color);color:var(--color);border-radius:var(--border-radius);box-shadow:0 4px 12px #0000001a;width:var(--width);font-size:13px;touch-action:none;will-change:transform,opacity,height;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:none}[data-react-temps-toast][data-invert=true]{--background: var(--gray12);--border-color: var(--gray11);--color: var(--gray1)}[data-react-temps-toast]:focus-visible{box-shadow:0 4px 12px #0000001a,0 0 0 2px #0003}[data-react-temps-toast][data-y-position=top]{top:0;--y: translateY(-100%);--lift: 1;--lift-amount: calc(1 * var(--gap))}[data-react-temps-toast][data-y-position=bottom]{bottom:0;--y: translateY(100%);--lift: -1;--lift-amount: calc(var(--lift) * var(--gap))}[data-react-temps-toast] [data-description]{font-weight:400;line-height:1.4;color:var(--color)}[data-react-temps-toast] [data-title]{font-weight:500;color:var(--color)}[data-react-temps-toast] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:-3px;margin-right:4px}[data-react-temps-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);animation:fade-in .3s ease forwards}[data-react-temps-toast] [data-icon]>*{flex-shrink:0}[data-react-temps-toast] [data-content]{display:flex;flex-direction:column;gap:2px}[data-react-temps-toast] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--background);background:var(--color);border:none;cursor:pointer;outline:none;transition:opacity .4s,box-shadow .2s}[data-react-temps-toast] [data-button]:focus-visible{box-shadow:0 0 0 2px #0006}[data-react-temps-toast] [data-button]:first-of-type{margin-left:auto}[data-react-temps-toast] [data-cancel]{color:var(--color);background:var(--border-color)}[data-react-temps-toast] [data-close-button]{position:absolute;left:0;top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;background:var(--gray1);border:1px solid var(--gray4);transform:translate(-35%,-35%);border-radius:50%;opacity:0;cursor:pointer;transition:opacity .1s,background .2s,border-color .2s}[data-react-temps-toast]:hover [data-close-button]{opacity:1}[data-react-temps-toast]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-react-temps-toast][data-swiping=true]:before{content:\\\"\\\";position:absolute;top:50%;left:0;right:0;height:100%;transform:scaleX(3) translateY(-50%)}[data-react-temps-toast][data-swiping=false][data-removed=true]:before{content:\\\"\\\";position:absolute;inset:0;transform:scaleY(2)}[data-react-temps-toast]:after{content:\\\"\\\";position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-react-temps-toast][data-mounted=true]{--y: translateY(0);opacity:1}[data-react-temps-toast][data-expanded=false][data-front=false]{--scale: var(--toasts-before) * .05 + 1;--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-react-temps-toast]>*{transition:opacity .4s}[data-react-temps-toast][data-expanded=false][data-front=false]>*{opacity:0}[data-react-temps-toast][data-visible=false]{opacity:0;pointer-events:none}[data-react-temps-toast][data-expanded=true]{--y: translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-react-temps-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y: translateY(100%);opacity:0}[data-react-temps-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y: translateY(calc(var(--lift) * var(--offset) + 150%));opacity:0;transtion:transform .2s,opacity .1s}[data-react-temps-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{opacity:0;transtion:opacity .2s}[data-react-temps-toast][data-removed=true][data-front=false]:before{height:calc(var(--initial-height) + 20%)}[data-react-temps-toast][data-swiping=true]{transform:var(--y) translate(var(--swipe-amount, 0px));transition:none}[data-react-temps-toast][data-swipe-out=true][data-x-position=right],[data-react-temps-toast][data-swipe-out=true][data-x-position=center]{animation:swipe-out-right .2s ease-out}[data-react-temps-toast][data-swipe-out=true][data-x-position=left]{animation:swipe-out-left .2s ease-out}@keyframes swipe-out-left{0%{transform:var(--y) translate(var(--swipe-amount, 0px));opacity:1}to{transform:var(--y) translate(-100%);opacity:0}}@keyframes swipe-out-right{0%{transform:var(--y) translate(var(--swipe-amount, 0px));opacity:1}to{transform:var(--y) translate(100%);opacity:0}}@media (max-width: 600px){.toaster{position:fixed;bottom:20px;right:20px;left:20px;width:100%}[data-react-temps-toast]{bottom:0;width:calc(100% - 40px)}}.react-temps-loading-wrapper{--size: 16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.react-temps-loading-wrapper[data-visible=false]{animation:fade-out .2s ease forwards}.react-temps-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.react-temps-loading-bar{animation:spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.react-temps-loading-bar:nth-child(1){animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.react-temps-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.react-temps-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.react-temps-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.react-temps-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.react-temps-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.react-temps-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.react-temps-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.react-temps-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.react-temps-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.react-temps-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.react-temps-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes spin{0%{opacity:1}to{opacity:.15}}@media (prefers-reduced-motion){[data-react-temps-toast],[data-react-temps-toast]>*,.react-temps-loading-bar{transition:none!important;animation:none!important}}\\n\")","'use client';\nimport React from 'react';\nimport { ToastTypes } from './types';\n\nexport const getAsset = (type: ToastTypes): JSX.Element | null => {\n switch (type) {\n case 'success':\n return SuccessIcon;\n\n case 'error':\n return ErrorIcon;\n\n default:\n null;\n }\n};\n\nconst bars = Array(12).fill(0);\n\nexport const Loader = ({ visible }: { visible: boolean }) => {\n return (\n <div className=\"react-temps-loading-wrapper\" data-visible={visible}>\n <div className=\"react-temps-spinner\">\n {bars.map((_, i) => (\n <div className=\"react-temps-loading-bar\" key={`spinner-bar-${i}`} />\n ))}\n </div>\n </div>\n );\n};\n\nconst SuccessIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n height=\"20\"\n width=\"20\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nconst InfoIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n height=\"20\"\n width=\"20\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nconst ErrorIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n height=\"20\"\n width=\"20\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n","import React from 'react';\nimport { ExternalToast, ToastT, PromiseData, PromiseT } from './types';\n\nlet toastsCounter = 0;\n\nclass Observer {\n subscribers: Array<(toast: ExternalToast) => void>;\n\n constructor() {\n this.subscribers = [];\n }\n\n // We use arrow functions to maintain the correct `this` reference\n subscribe = (subscriber: (toast: ToastT) => void) => {\n this.subscribers.push(subscriber);\n\n return () => {\n const index = this.subscribers.indexOf(subscriber);\n this.subscribers.splice(index, 1);\n };\n };\n\n publish = (data: ToastT) => {\n this.subscribers.forEach((subscriber) => subscriber(data));\n };\n\n message = (message: string, data?: ExternalToast) => {\n this.publish({ ...data, id: toastsCounter++, title: message });\n };\n\n error = (message: string, data?: ExternalToast) => {\n this.publish({ ...data, id: toastsCounter++, type: 'error', title: message });\n };\n\n success = (message: string, data?: ExternalToast) => {\n this.publish({ ...data, id: toastsCounter++, type: 'success', title: message });\n };\n\n promise = (promise: PromiseT, data?: PromiseData) => {\n this.publish({ promiseData: data, promise, id: toastsCounter++ });\n };\n\n // We can't provide the toast we just created as a prop as we didn't creat it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()?\n custom = (jsx: (id: number) => React.ReactElement) => {\n const id = toastsCounter++;\n this.publish({ jsx: jsx(id), id });\n };\n}\n\nexport const ToastState = new Observer();\n\n// bind this to the toast function\nconst toastFunction = (message: string, data?: ExternalToast) => {\n ToastState.publish({\n title: message,\n ...data,\n id: toastsCounter++,\n });\n};\n\nconst basicToast = toastFunction;\n\n// We use `Object.assign` to maintain the correct types as we would lose them otherwise\nexport const toast = Object.assign(basicToast, {\n success: ToastState.success,\n error: ToastState.error,\n custom: ToastState.custom,\n message: ToastState.message,\n promise: ToastState.promise,\n});\n"],"mappings":"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","names":["React","styleInject","css","insertAt","head","style","styleInject","React","getAsset","type","SuccessIcon","ErrorIcon","bars","Loader","visible","_","i","ErrorIcon","React","toastsCounter","Observer","subscriber","index","data","message","promise","jsx","id","ToastState","toastFunction","basicToast","toast","VISIBLE_TOASTS_AMOUNT","VIEWPORT_OFFSET","TOAST_LIFETIME","TOAST_WIDTH","GAP","SWIPE_TRESHOLD","TIME_BEFORE_UNMOUNT","Toast","props","_a","ToasterInvert","toast","interacting","setHeights","heights","index","toasts","expanded","removeToast","dismissable","position","expandByDefault","mounted","setMounted","React","removed","setRemoved","swiping","setSwiping","swipeOut","setSwipeOut","promiseStatus","setPromiseStatus","offsetBeforeRemove","setOffsetBeforeRemove","initialHeight","setInitialHeight","toastRef","isFront","isVisible","toastType","heightIndex","height","duration","closeTimerStartTimeRef","closeTimerRemainingTimeRef","pointerStartXRef","y","x","toastsHeightBefore","prev","curr","reducerIndex","invert","offset","deleteToast","h","timeoutId","now","timeRemaining","toastNode","promiseTitle","event","_b","swipeAmount","xPosition","Loader","getAsset","Toaster","hotkey","expand","setToasts","setExpanded","setInteracting","listRef","hotkeyLabel","id","ToastState","handleKeyDown","key","src_default","Toaster"]}
|