sonner-wc 0.1.2 → 0.3.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/README.md +59 -2
- package/dist/constants.d.ts +0 -2
- package/dist/icons.d.ts +0 -1
- package/dist/sonner-toast.d.ts +1 -2
- package/dist/sonner-toaster.d.ts +1 -2
- package/dist/sonner-wc.bundle.js +39 -25
- package/dist/sonner-wc.bundle.js.map +8 -7
- package/dist/sonner-wc.js +201 -141
- package/dist/sonner-wc.js.map +8 -7
- package/dist/ssr.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
[Sonner](https://github.com/emilkowalski/sonner)'s toast UX as a framework-agnostic web component.
|
|
4
4
|
Drop it into anything — vanilla HTML, Vue, Svelte, htmx — same API, same look.
|
|
5
5
|
|
|
6
|
+
**[Docs & live demo →](https://clickblipclick.github.io/sonner-wc)**
|
|
7
|
+
|
|
6
8
|
```html
|
|
7
9
|
<script type="module" src="https://unpkg.com/sonner-wc/dist/sonner-wc.bundle.js"></script>
|
|
8
10
|
|
|
@@ -17,7 +19,7 @@ Drop it into anything — vanilla HTML, Vue, Svelte, htmx — same API, same loo
|
|
|
17
19
|
## Install
|
|
18
20
|
|
|
19
21
|
```sh
|
|
20
|
-
|
|
22
|
+
npm install sonner-wc # or bun / pnpm / yarn
|
|
21
23
|
```
|
|
22
24
|
|
|
23
25
|
ESM only. Modern browsers (last two versions of Chrome, Firefox, Safari, Edge).
|
|
@@ -41,7 +43,8 @@ Place once, anywhere in the page. Configure with attributes.
|
|
|
41
43
|
| `visible-toasts` | how many toasts fan out vs. stack behind | `3` |
|
|
42
44
|
| `offset` | viewport gutter; px number or CSS length | `24px` |
|
|
43
45
|
| `mobile-offset` | gutter under 600px | `16px` |
|
|
44
|
-
| `hotkey` | `Alt+KeyT`-style chord that expands the stack
|
|
46
|
+
| `hotkey` | `Alt+KeyT`-style chord that expands the stack; `""` or `"none"` disables it | `altKey+KeyT` |
|
|
47
|
+
| `container-aria-label` | Accessible name for the toaster region. Reactive — changes after mount take effect. | `Notifications` |
|
|
45
48
|
|
|
46
49
|
### The `toast()` helper
|
|
47
50
|
|
|
@@ -80,6 +83,60 @@ toast.dismiss(); // all
|
|
|
80
83
|
The returned element is the `<sonner-toast>` itself. You can mutate it directly — set
|
|
81
84
|
attributes, add children, call `.dismiss()`, etc.
|
|
82
85
|
|
|
86
|
+
### `toast()` options
|
|
87
|
+
|
|
88
|
+
The second argument to `toast()` (and its variants) accepts:
|
|
89
|
+
|
|
90
|
+
| Option | Type | Notes |
|
|
91
|
+
| ---------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------- |
|
|
92
|
+
| `id` | `string \| number` | Reuse to update a toast in place; pass the same `id` again to `toast.*()`. |
|
|
93
|
+
| `toasterId` | `string` | DOM `id` of a specific `<sonner-toaster>` to route this toast to. Falls back to the default. |
|
|
94
|
+
| `testId` | `string` | Set as `data-testid` on the toast host. Survives promise loading → success/error transitions. |
|
|
95
|
+
| `closeButtonAriaLabel` | `string` | Accessible name for the close button. Defaults to `Close: <title>` (or `Close toast`). |
|
|
96
|
+
| `description` | `string \| Node \| () => …` | Secondary text. |
|
|
97
|
+
| `duration` | `number` (ms) or `Infinity` | Lifetime override. |
|
|
98
|
+
| `dismissible` | `boolean` | Set `false` to disable swipe / close-button dismissal. |
|
|
99
|
+
| `position` | same as toaster | Per-toast position override. |
|
|
100
|
+
| `closeButton` | `boolean` | Per-toast override of the toaster's `close-button` flag. |
|
|
101
|
+
| `richColors` | `boolean` | Force rich colors on this toast. |
|
|
102
|
+
| `invert` | `boolean` | Force inverted colors on this toast. |
|
|
103
|
+
| `icon` | `Node \| string` | Override the icon picked from `type`. |
|
|
104
|
+
| `className` | `string` | Extra class applied to the toast host. |
|
|
105
|
+
| `action` / `cancel` | `{ label, onClick }` or `HTMLElement` | Right/left button. Pass an element for full control. |
|
|
106
|
+
| `onDismiss` | `(el) => void` | Called when the toast is dismissed (manually or via `toast.dismiss`). |
|
|
107
|
+
| `onAutoClose` | `(el) => void` | Called when the duration timer fires. |
|
|
108
|
+
|
|
109
|
+
## Accessibility
|
|
110
|
+
|
|
111
|
+
`sonner-wc` ships with reasonable defaults so you don't have to wire ARIA
|
|
112
|
+
yourself:
|
|
113
|
+
|
|
114
|
+
- The toaster is a labelled `region` (`aria-label="Notifications"` by
|
|
115
|
+
default; override with `container-aria-label`).
|
|
116
|
+
- Each toast carries `aria-atomic="true"` so screen readers re-announce the
|
|
117
|
+
whole toast when its content changes (e.g. `toast.promise` loading →
|
|
118
|
+
success/error), not just the diff.
|
|
119
|
+
- When the stack is collapsed, toasts behind the front one are
|
|
120
|
+
`aria-hidden="true"` so users aren't bombarded by visually obscured
|
|
121
|
+
toasts. Expanding the stack (hover, focus, or the configured `hotkey`)
|
|
122
|
+
reveals them.
|
|
123
|
+
- Urgent transitions that happen *after* mount (e.g. a `loading` toast
|
|
124
|
+
becoming an `error`) are re-announced through a dedicated assertive
|
|
125
|
+
live region inside the toaster's shadow root. Re-evaluating a toast's
|
|
126
|
+
own `aria-live` is unreliable across screen readers; this region
|
|
127
|
+
guarantees the message lands.
|
|
128
|
+
- Pressing **Escape** while focus is inside a toast dismisses it.
|
|
129
|
+
- When a toast that captured focus is dismissed, focus is restored to
|
|
130
|
+
the element that was focused before the toast was entered — no more
|
|
131
|
+
stranded keyboard users on `<body>`.
|
|
132
|
+
- Close buttons get an accessible name automatically (`Close: <title>`),
|
|
133
|
+
or whatever `closeButtonAriaLabel` you pass.
|
|
134
|
+
- The toaster reflects its `hotkey` (default `Alt+T`) as both
|
|
135
|
+
`aria-keyshortcuts` and a `title` tooltip so the shortcut is
|
|
136
|
+
discoverable to screen-reader users and sighted users alike. A
|
|
137
|
+
`:focus-visible` ring shows where focus lands when the hotkey is
|
|
138
|
+
pressed.
|
|
139
|
+
|
|
83
140
|
### Declarative form
|
|
84
141
|
|
|
85
142
|
You can also build toasts as plain HTML and append them to a toaster:
|
package/dist/constants.d.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
export declare const VISIBLE_TOASTS_AMOUNT = 3;
|
|
2
|
-
export declare const VIEWPORT_OFFSET = "24px";
|
|
3
|
-
export declare const MOBILE_VIEWPORT_OFFSET = "16px";
|
|
4
2
|
export declare const TOAST_LIFETIME = 4000;
|
|
5
3
|
export declare const TOAST_WIDTH = 356;
|
|
6
4
|
export declare const GAP = 14;
|
package/dist/icons.d.ts
CHANGED
|
@@ -4,5 +4,4 @@ export declare const WARNING_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" v
|
|
|
4
4
|
export declare const INFO_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" height=\"20\" width=\"20\"><path fill-rule=\"evenodd\" 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\" clip-rule=\"evenodd\"/></svg>";
|
|
5
5
|
export declare const ERROR_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" height=\"20\" width=\"20\"><path fill-rule=\"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\" clip-rule=\"evenodd\"/></svg>";
|
|
6
6
|
export declare const CLOSE_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>";
|
|
7
|
-
export declare const LOADING_SPINNER: string;
|
|
8
7
|
export declare function getTypeIcon(type: ToastType): string | null;
|
package/dist/sonner-toast.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { HTMLElementCtor } from './ssr.js';
|
|
1
2
|
import type { SonnerToastElement, ToastContent, ToastOptions, ToastType } from './types.js';
|
|
2
|
-
declare const HTMLElementCtor: typeof HTMLElement;
|
|
3
3
|
export declare class SonnerToast extends HTMLElementCtor implements SonnerToastElement {
|
|
4
4
|
#private;
|
|
5
5
|
static get observedAttributes(): string[];
|
|
@@ -26,4 +26,3 @@ export declare class SonnerToast extends HTMLElementCtor implements SonnerToastE
|
|
|
26
26
|
/** Called by the toaster to pause/resume this toast's auto-dismiss timer. */
|
|
27
27
|
setPaused(paused: boolean): void;
|
|
28
28
|
}
|
|
29
|
-
export {};
|
package/dist/sonner-toaster.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { HTMLElementCtor } from './ssr.js';
|
|
1
2
|
import type { SonnerToastElement, SonnerToasterElement } from './types.js';
|
|
2
|
-
declare const HTMLElementCtor: typeof HTMLElement;
|
|
3
3
|
export declare class SonnerToaster extends HTMLElementCtor implements SonnerToasterElement {
|
|
4
4
|
#private;
|
|
5
5
|
static get observedAttributes(): string[];
|
|
@@ -17,4 +17,3 @@ export declare class SonnerToaster extends HTMLElementCtor implements SonnerToas
|
|
|
17
17
|
announceUrgent(text: string): void;
|
|
18
18
|
dismissAll(): void;
|
|
19
19
|
}
|
|
20
|
-
export {};
|
package/dist/sonner-wc.bundle.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var E=3,y=4000,V=356,l=14,W=45,U=0.11,C=200,j=["altKey","KeyT"];var L='<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';function H(a){switch(a){case"success":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="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" clip-rule="evenodd"/></svg>';case"info":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" 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" clip-rule="evenodd"/></svg>';case"warning":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd"/></svg>';case"error":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="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" clip-rule="evenodd"/></svg>';case"loading":return null;default:return null}}var w=new Map,u=new Set,ia=1;function k(){return ia++}function M(a){w.set(a.toastId,a)}function R(a){if(w.get(a.toastId)===a)w.delete(a.toastId)}function v(a){return w.get(a)}function q(a){u.add(a)}function B(a){u.delete(a)}function P(){let a;for(let r of u)a=r;return a}function N(){for(let a of u)a.dismissAll()}var S=typeof HTMLElement!=="undefined"?HTMLElement:class{};var O=`:host {
|
|
2
2
|
position: fixed;
|
|
3
3
|
width: var(--width);
|
|
4
4
|
font-family:
|
|
@@ -48,15 +48,30 @@ var Z=3;var y=4000,$=356,b=14,W=45,p=0.11,V=200,E=["altKey","KeyT"];var G='<svg
|
|
|
48
48
|
--toast-close-button-start: 0;
|
|
49
49
|
--toast-close-button-end: unset;
|
|
50
50
|
--toast-close-button-transform: translate(-35%, -35%);
|
|
51
|
+
inset: unset;
|
|
52
|
+
border: none;
|
|
53
|
+
overflow: visible;
|
|
54
|
+
background: transparent;
|
|
51
55
|
box-sizing: border-box;
|
|
52
56
|
padding: 0;
|
|
53
57
|
margin: 0;
|
|
54
58
|
outline: none;
|
|
59
|
+
contain: layout style;
|
|
55
60
|
z-index: 999999999;
|
|
56
61
|
transition: transform 400ms ease;
|
|
57
62
|
display: block;
|
|
58
63
|
}
|
|
59
64
|
|
|
65
|
+
::backdrop {
|
|
66
|
+
display: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
:host(:focus-visible) {
|
|
70
|
+
outline: 2px solid var(--gray9);
|
|
71
|
+
outline-offset: 4px;
|
|
72
|
+
border-radius: var(--border-radius);
|
|
73
|
+
}
|
|
74
|
+
|
|
60
75
|
[data-frame] {
|
|
61
76
|
display: block;
|
|
62
77
|
width: 100%;
|
|
@@ -164,13 +179,15 @@ var Z=3;var y=4000,$=356,b=14,W=45,p=0.11,V=200,E=["altKey","KeyT"];var G='<svg
|
|
|
164
179
|
transform: none;
|
|
165
180
|
}
|
|
166
181
|
}
|
|
167
|
-
`;var
|
|
182
|
+
`;var F=`:host {
|
|
168
183
|
--y: translateY(100%);
|
|
169
184
|
--lift-amount: calc(var(--lift) * var(--gap, 14px));
|
|
170
185
|
z-index: var(--z-index);
|
|
171
186
|
position: absolute;
|
|
172
187
|
opacity: 0;
|
|
173
188
|
transform: var(--y);
|
|
189
|
+
contain: layout style;
|
|
190
|
+
will-change: transform, opacity;
|
|
174
191
|
touch-action: none;
|
|
175
192
|
transition:
|
|
176
193
|
transform 400ms,
|
|
@@ -325,16 +342,14 @@ var Z=3;var y=4000,$=356,b=14,W=45,p=0.11,V=200,E=["altKey","KeyT"];var G='<svg
|
|
|
325
342
|
animation: sonner-fade-in 300ms ease forwards;
|
|
326
343
|
}
|
|
327
344
|
|
|
328
|
-
[data-button]
|
|
329
|
-
::slotted(button[slot='action']),
|
|
330
|
-
::slotted(button[slot='cancel']) {
|
|
345
|
+
[data-button] {
|
|
331
346
|
border-radius: 4px;
|
|
332
347
|
padding-left: 8px;
|
|
333
348
|
padding-right: 8px;
|
|
334
349
|
height: 24px;
|
|
335
350
|
font-size: 12px;
|
|
336
351
|
background: var(--normal-text);
|
|
337
|
-
color:
|
|
352
|
+
color: var(--normal-bg);
|
|
338
353
|
margin-left: var(--toast-button-margin-start);
|
|
339
354
|
margin-right: var(--toast-button-margin-end);
|
|
340
355
|
border: none;
|
|
@@ -352,8 +367,7 @@ var Z=3;var y=4000,$=356,b=14,W=45,p=0.11,V=200,E=["altKey","KeyT"];var G='<svg
|
|
|
352
367
|
[data-button]:focus-visible {
|
|
353
368
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
|
|
354
369
|
}
|
|
355
|
-
[data-cancel]
|
|
356
|
-
::slotted(button[slot='cancel']) {
|
|
370
|
+
[data-cancel] {
|
|
357
371
|
color: var(--normal-text);
|
|
358
372
|
background: var(--cancel-bg, rgba(0, 0, 0, 0.08));
|
|
359
373
|
}
|
|
@@ -719,24 +733,24 @@ var Z=3;var y=4000,$=356,b=14,W=45,p=0.11,V=200,E=["altKey","KeyT"];var G='<svg
|
|
|
719
733
|
width: 100%;
|
|
720
734
|
}
|
|
721
735
|
}
|
|
722
|
-
`;var
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
736
|
+
`;var Y=null,z=null;function A(){if(!Y)Y=new CSSStyleSheet,Y.replaceSync(O);return Y}function I(){if(!z)z=new CSSStyleSheet,z.replaceSync(F);return z}function $(a){return a==="error"||a==="warning"}function p(a,r){return a.hasAttribute(r)&&a.getAttribute(r)!=="false"}function X(a,r,t){if(t)a.setAttribute(r,"");else a.removeAttribute(r)}function K(a,r){for(let t of Array.from(a.children))if(t.getAttribute("slot")===r)a.removeChild(t)}function D(a,r){let t=document.createElement("template");t.innerHTML=a;let n=t.content.firstElementChild;if(n)n.setAttribute("slot",r);return n}function T(a,r,t){if(K(a,r),t==null||t==="")return;let n=typeof t==="function"?t():t;if(n instanceof Node){if(n instanceof Element)n.setAttribute("slot",r);a.appendChild(n)}else{let i=document.createElement("span");i.setAttribute("slot",r),i.textContent=String(n),a.appendChild(i)}}function aa(a,r,t,n,i){K(a,t);let o=r.querySelector(`[data-${t}-host]`);if(o){for(let d of Array.from(o.children))if(d.tagName==="BUTTON")o.removeChild(d)}if(!n)return;if(n instanceof HTMLElement){n.setAttribute("slot",t),a.appendChild(n);return}if(!o)return;let f=document.createElement("button");f.setAttribute("type","button"),f.setAttribute("data-button",""),f.setAttribute(t==="cancel"?"data-cancel":"data-action",""),f.textContent=n.label,f.addEventListener("click",(d)=>{if(n.onClick?.(d),d.defaultPrevented&&t==="action")return;i()}),o.appendChild(f)}var ea=Array.from({length:12},()=>'<div class="sonner-loading-bar"></div>').join(""),ca=(()=>{if(typeof document==="undefined")return null;let a=document.createElement("template");return a.innerHTML=`
|
|
737
|
+
<div data-frame part="frame">
|
|
738
|
+
<button type="button" data-close-button part="close-button" hidden aria-label="Close toast"></button>
|
|
739
|
+
<div data-icon part="icon">
|
|
740
|
+
<slot name="icon"></slot>
|
|
741
|
+
<div class="sonner-loading-wrapper" aria-hidden="true">
|
|
742
|
+
<div class="sonner-spinner">${ea}</div>
|
|
743
|
+
</div>
|
|
729
744
|
</div>
|
|
745
|
+
<div data-content part="content">
|
|
746
|
+
<div data-title part="title"><slot name="title"></slot></div>
|
|
747
|
+
<div data-description part="description"><slot name="description"></slot></div>
|
|
748
|
+
</div>
|
|
749
|
+
<div data-cancel-host part="cancel"><slot name="cancel"></slot></div>
|
|
750
|
+
<div data-action-host part="action"><slot name="action"></slot></div>
|
|
751
|
+
<slot part="custom"></slot>
|
|
730
752
|
</div>
|
|
731
|
-
<div data-content part="content">
|
|
732
|
-
<div data-title part="title"><slot name="title"></slot></div>
|
|
733
|
-
<div data-description part="description"><slot name="description"></slot></div>
|
|
734
|
-
</div>
|
|
735
|
-
<slot name="cancel"></slot>
|
|
736
|
-
<slot name="action"></slot>
|
|
737
|
-
<slot part="custom"></slot>
|
|
738
|
-
</div>
|
|
739
|
-
`;class l extends da{static get observedAttributes(){return["type","duration","dismissible","position","close-button","rich-colors","invert"]}toastId=0;#o;#e;#w;#c;#t;#f=null;#d=y;#a=null;#s=0;#n=new Set;#h=null;#b=0;#i=null;#m=null;#x=!1;#g=!1;#Y=!1;#y;#u;#k=null;#l=null;constructor(){super();this.#o=this.attachShadow({mode:"open"}),this.#o.adoptedStyleSheets=[A()];let a=document.createElement("template");a.innerHTML=ia,this.#o.appendChild(a.content.cloneNode(!0)),this.#e=this.#o.querySelector("[data-close-button]"),this.#w=this.#o.querySelector("[data-icon]"),this.#c=this.#o.querySelector("[data-title]"),this.#t=this.#o.querySelector("[data-description]"),this.#e.innerHTML=G,this.#e.addEventListener("click",()=>this.dismiss());let r=this.#o.querySelector('slot[name="icon"]'),t=this.#o.querySelector('slot[name="description"]');r.addEventListener("slotchange",()=>this.#X("icon",r)),t.addEventListener("slotchange",()=>this.#X("description",t)),this.addEventListener("pointerdown",this.#H),this.addEventListener("pointermove",this.#C),this.addEventListener("pointerup",this.#U),this.addEventListener("pointercancel",this.#U),this.addEventListener("mouseenter",()=>this.#Z("hover-self")),this.addEventListener("mouseleave",()=>this.#$("hover-self")),this.addEventListener("focusin",(o)=>{if(this.#Z("focus-self"),this.#l)return;let n=o.relatedTarget;if(n&&!this.contains(n))this.#l=n}),this.addEventListener("focusout",()=>this.#$("focus-self")),this.addEventListener("keydown",(o)=>{if(o.key==="Escape"&&this.#W())o.stopPropagation(),this.dismiss()})}connectedCallback(){if(!this.toastId)this.toastId=this.getAttribute("id")||0;if(!this.hasAttribute("tabindex"))this.tabIndex=0;if(this.#_(),this.#J(),this.#K(),this.#S(),this.#Q(),this.#v(),this.setAttribute("data-sonner-toast",""),!this.hasAttribute("aria-atomic"))this.setAttribute("aria-atomic","true");if(this.setAttribute("data-mounted","false"),this.setAttribute("data-removed","false"),this.setAttribute("data-swiping","false"),this.setAttribute("data-swiped","false"),this.setAttribute("data-swipe-out","false"),!this.hasAttribute("data-styled"))this.setAttribute("data-styled","true");j(this),document.addEventListener("visibilitychange",this.#G),requestAnimationFrame(()=>{this.#x=!0,this.setAttribute("data-mounted","true"),this.dispatchEvent(new CustomEvent("sonner-toast-mounted",{bubbles:!0,composed:!0})),this.#p()})}disconnectedCallback(){if(this.#a)clearTimeout(this.#a);document.removeEventListener("visibilitychange",this.#G),H(this)}attributeChangedCallback(a,r,t){if(!this.isConnected)return;switch(a){case"type":this.#_();break;case"duration":this.#f=this.#V(),this.#d=this.#f??y;break;case"dismissible":this.#J();break;case"position":this.#K();break;case"close-button":this.#v();break;case"rich-colors":this.#S();break;case"invert":this.#Q();break}}get toastType(){return this.getAttribute("type")||"default"}dismiss(){if(this.#g||this.#Y)return;if(this.#Y=!0,this.#g=!0,this.setAttribute("data-removed","true"),this.#a)clearTimeout(this.#a);this.dispatchEvent(new CustomEvent("sonner-toast-dismissed",{bubbles:!0,composed:!0})),setTimeout(()=>{this.#r(),this.#y?.(this),this.remove()},V)}#r(){if(!this.#l)return;let a=document.activeElement;if(!a||!this.contains(a))return;let r=this.#l;if(!r.isConnected||typeof r.focus!=="function")return;r.focus()}update(a){let r=a.type!==void 0&&a.type!==this.toastType,t=K(this.toastType);if(a.type!==void 0)this.setAttribute("type",a.type);let o=!1;if(a.duration!==void 0)this.setAttribute("duration",String(a.duration)),this.#f=a.duration,this.#d=a.duration,o=!0;else if(r)this.#f=null,this.removeAttribute("duration"),this.#d=0,o=!0;if(a.dismissible!==void 0)if(a.dismissible)this.setAttribute("dismissible","");else this.removeAttribute("dismissible");if(a.position!==void 0)this.setAttribute("position",a.position);if(a.closeButton!==void 0)if(a.closeButton)this.setAttribute("close-button","");else this.removeAttribute("close-button");if(a.richColors!==void 0)if(a.richColors)this.setAttribute("rich-colors","");else this.removeAttribute("rich-colors");if(a.invert!==void 0)if(a.invert)this.setAttribute("invert","");else this.removeAttribute("invert");if(a.icon!==void 0)this.setIcon(a.icon);if(a.title!==void 0)this.setTitle(a.title);if(a.description!==void 0)this.setDescription(a.description);if(a.action!==void 0)F(this,"action",a.action,()=>this.dismiss());if(a.cancel!==void 0)F(this,"cancel",a.cancel,()=>this.dismiss());if(a.className)this.className=a.className;if(a.testId!==void 0)this.setAttribute("data-testid",a.testId);if(a.closeButtonAriaLabel!==void 0)this.#k=a.closeButtonAriaLabel||null,this.#z();if(a.onDismiss)this.#y=a.onDismiss;if(a.onAutoClose)this.#u=a.onAutoClose;if(o)this.#j();if(this.#x&&r&&!t&&K(this.toastType)){let h=Array.from(this.children).find((e)=>e.getAttribute("slot")==="title")?.textContent?.trim();if(h)this.closest("sonner-toaster")?.announceUrgent(h)}this.dispatchEvent(new CustomEvent("sonner-toast-updated",{bubbles:!0,composed:!0}))}setTitle(a){N(this,"title",a),this.#z()}#z(){if(this.#k){this.#e.setAttribute("aria-label",this.#k);return}let r=Array.from(this.children).find((t)=>t.getAttribute("slot")==="title")?.textContent?.trim();this.#e.setAttribute("aria-label",r?`Close: ${r}`:"Close toast")}setDescription(a){N(this,"description",a)}setIcon(a){for(let r of Array.from(this.children))if(r.getAttribute("slot")==="icon")this.removeChild(r);if(a==null)return;if(a instanceof Node){if(a instanceof Element)a.setAttribute("slot","icon");this.appendChild(a)}else{let r=document.createElement("template");r.innerHTML=a;let t=r.content.firstElementChild;if(t)t.setAttribute("slot","icon"),this.appendChild(t)}}setHandlers(a){this.#y=a.onDismiss,this.#u=a.onAutoClose}setPaused(a){if(a)this.#Z("toaster");else this.#$("toaster")}#X(a,r){if(r.assignedNodes().length>0)this.setAttribute(`data-has-${a}`,"");else this.removeAttribute(`data-has-${a}`)}#_(){let a=this.toastType;this.setAttribute("data-type",a);let r=K(a);if(this.setAttribute("role",r?"alert":"status"),this.setAttribute("aria-live",r?"assertive":"polite"),a==="loading"){this.setAttribute("data-promise","true");for(let t of Array.from(this.children))if(t.getAttribute("slot")==="icon"&&t.hasAttribute("data-sonner-default-icon"))this.removeChild(t)}else if(this.removeAttribute("data-promise"),!Array.from(this.children).some((o)=>{if(o.getAttribute("slot")!=="icon")return!1;return!o.hasAttribute("data-sonner-default-icon")})){for(let n of Array.from(this.children))if(n.getAttribute("slot")==="icon"&&n.hasAttribute("data-sonner-default-icon"))this.removeChild(n);let o=U(a);if(o){let n=document.createElement("template");n.innerHTML=o;let h=n.content.firstElementChild;if(h)h.setAttribute("slot","icon"),h.setAttribute("data-sonner-default-icon",""),this.appendChild(h)}}}#J(){let a=this.getAttribute("dismissible")!=="false";this.setAttribute("data-dismissible",String(a))}#K(){let a=this.getAttribute("position");if(!a)return;let[r,t]=a.split("-");if(r)this.setAttribute("data-y-position",r);if(t)this.setAttribute("data-x-position",t)}#v(){let a=this.hasAttribute("close-button")&&this.getAttribute("close-button")!=="false";this.#e.hidden=!a}#S(){let a=this.hasAttribute("rich-colors")&&this.getAttribute("rich-colors")!=="false";this.setAttribute("data-rich-colors",String(a))}#Q(){let a=this.hasAttribute("invert")&&this.getAttribute("invert")!=="false";this.setAttribute("data-invert",String(a))}#V(){let a=this.getAttribute("duration");if(a==null)return null;if(a==="Infinity")return 1/0;let r=Number(a);return Number.isFinite(r)||r===1/0?r:null}#E(){let a=this.#f??this.#V();if(a!==null)return a;if(this.toastType==="loading")return 1/0;return y}#p(){if(!this.#x||this.#g)return;if(this.#n.size>0)return;if(this.#a!==null)return;let a=this.#E();if(a===1/0)return;this.#d=this.#d>0?this.#d:a,this.#s=Date.now(),this.#a=setTimeout(()=>{this.#a=null,this.#u?.(this),this.dispatchEvent(new CustomEvent("sonner-toast-autoclosed",{bubbles:!0,composed:!0})),this.dismiss()},this.#d)}#Z(a){let r=this.#n.size===0;if(this.#n.add(a),r&&this.#a!==null){clearTimeout(this.#a),this.#a=null;let t=Date.now()-this.#s;this.#d=Math.max(0,this.#d-t)}}#$(a){if(!this.#n.delete(a))return;if(this.#n.size===0&&!this.#g)this.#p()}#j(){if(this.#a)clearTimeout(this.#a),this.#a=null;this.#d=this.#E(),this.#p()}#G=()=>{if(document.visibilityState==="hidden")this.#Z("doc-hidden");else this.#$("doc-hidden")};#W(){return this.getAttribute("dismissible")!=="false"}#H=(a)=>{if(a.button===2)return;if(this.toastType==="loading"||!this.#W())return;let r=a.composedPath()[0];if(r){if(r.tagName==="BUTTON"||typeof r.closest==="function"&&r.closest("button"))return}this.#b=Date.now();try{this.setPointerCapture(a.pointerId)}catch{}if(this.setAttribute("data-swiping","true"),this.#h={x:a.clientX,y:a.clientY},!this.#m){let t=this.getAttribute("data-y-position"),o=this.getAttribute("data-x-position"),n=[];if(t==="top"||t==="bottom")n.push(t);if(o==="left"||o==="right")n.push(o);this.#m=n.length>0?n:["bottom","right"]}};#C=(a)=>{if(!this.#h||!this.#W())return;if((window.getSelection()?.toString().length??0)>0)return;let r=a.clientY-this.#h.y,t=a.clientX-this.#h.x,o=this.#m;if(!this.#i&&(Math.abs(t)>1||Math.abs(r)>1))this.#i=Math.abs(t)>Math.abs(r)?"x":"y";let n=(d)=>1/(1.5+Math.abs(d)/20),h=0,e=0;if(this.#i==="y"){if(o.includes("top")||o.includes("bottom"))if(o.includes("top")&&r<0||o.includes("bottom")&&r>0)e=r;else{let d=r*n(r);e=Math.abs(d)<Math.abs(r)?d:r}}else if(this.#i==="x"){if(o.includes("left")||o.includes("right"))if(o.includes("left")&&t<0||o.includes("right")&&t>0)h=t;else{let d=t*n(t);h=Math.abs(d)<Math.abs(t)?d:t}}if(Math.abs(h)>0||Math.abs(e)>0)this.setAttribute("data-swiped","true");this.style.setProperty("--swipe-amount-x",`${h}px`),this.style.setProperty("--swipe-amount-y",`${e}px`)};#U=()=>{if(this.getAttribute("data-swipe-out")==="true"||!this.#W()){this.#h=null,this.#i=null,this.setAttribute("data-swiping","false");return}let a=parseFloat(this.style.getPropertyValue("--swipe-amount-x"))||0,r=parseFloat(this.style.getPropertyValue("--swipe-amount-y"))||0,t=Math.max(1,Date.now()-this.#b),o=this.#i==="x"?a:r,n=Math.abs(o)/t;if(Math.abs(o)>=W||n>p){if(this.#i==="x")this.setAttribute("data-swipe-direction",a>0?"right":"left");else this.setAttribute("data-swipe-direction",r>0?"down":"up");this.setAttribute("data-swipe-out","true"),this.dismiss()}else this.style.setProperty("--swipe-amount-x","0px"),this.style.setProperty("--swipe-amount-y","0px"),this.setAttribute("data-swiped","false");this.setAttribute("data-swiping","false"),this.#h=null,this.#i=null}}if(typeof customElements!=="undefined"&&!customElements.get("sonner-toast"))customElements.define("sonner-toast",l);var ea=typeof HTMLElement!=="undefined"?HTMLElement:class{};function O(a,r){if(a==null)return r;if(typeof a==="number")return`${a}px`;return a}function I(a,r,t,o){let n=["top","right","bottom","left"];if(r==null||typeof r==="string"||typeof r==="number"){let h=O(r,o);for(let e of n)a.style.setProperty(`${t}-${e}`,h)}else for(let h of n)a.style.setProperty(`${t}-${h}`,O(r[h],o))}class m extends ea{static get observedAttributes(){return["position","theme","rich-colors","expand","duration","gap","visible-toasts","close-button","invert","dir","offset","mobile-offset","hotkey","container-aria-label"]}#o;#e;#w;#c;#t=[];#f=new Map;#d=!1;#a=!1;#s=!1;#n=null;#h=null;constructor(){super();this.#o=this.attachShadow({mode:"open"}),this.#o.adoptedStyleSheets=[B()],this.#o.innerHTML='<div data-frame part="frame"><slot></slot></div><div data-alert-announcer role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none"></div>',this.#e=this.#o.querySelector("[data-alert-announcer]"),this.#w=new MutationObserver((a)=>{let r=!1;for(let t of a){for(let o of Array.from(t.addedNodes))if(o instanceof l)this.#t.unshift(o),this.#c.observe(o),this.#l(o),r=!0;for(let o of Array.from(t.removedNodes))if(o instanceof l)this.#t=this.#t.filter((n)=>n!==o),this.#f.delete(o),this.#c.unobserve(o),r=!0}if(r)this.#r({remeasure:!0})}),this.#c=new ResizeObserver(()=>this.#r({remeasure:!1})),this.addEventListener("mouseenter",this.#X),this.addEventListener("mouseleave",this.#_),this.addEventListener("focusin",this.#J),this.addEventListener("focusout",this.#K),this.addEventListener("sonner-toast-dismissed",()=>this.#r({remeasure:!1})),this.addEventListener("sonner-toast-updated",()=>this.#r({remeasure:!0})),this.addEventListener("sonner-toast-mounted",()=>this.#r({remeasure:!0}))}connectedCallback(){if(!this.hasAttribute("tabindex"))this.tabIndex=-1;if(!this.hasAttribute("role"))this.setAttribute("role","region");if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label",this.getAttribute("container-aria-label")??"Notifications");this.setAttribute("data-sonner-toaster",""),this.#i(),this.#m(),this.#x(),this.#g(),this.#Y(),this.#y(),this.#w.observe(this,{childList:!0});for(let a of Array.from(this.children))if(a instanceof l)this.#t.unshift(a),this.#c.observe(a),this.#l(a);document.addEventListener("keydown",this.#S),window.addEventListener("resize",this.#v),C(this),this.#r({remeasure:!0})}disconnectedCallback(){if(this.#w.disconnect(),this.#c.disconnect(),document.removeEventListener("keydown",this.#S),window.removeEventListener("resize",this.#v),this.#n&&this.#h)this.#n.removeEventListener("change",this.#h);L(this)}attributeChangedCallback(a,r,t){if(!this.isConnected)return;switch(a){case"position":this.#i(),this.#u(),this.#r();break;case"theme":this.#m();break;case"dir":this.#x();break;case"gap":this.#g(),this.#r();break;case"visible-toasts":this.#r();break;case"expand":this.#a=this.hasAttribute("expand");for(let o of this.#t)o.setPaused(this.#a||this.#s);this.#r();break;case"close-button":case"rich-colors":case"invert":this.#k(a);break;case"offset":case"mobile-offset":this.#y();break;case"container-aria-label":this.setAttribute("aria-label",this.getAttribute("container-aria-label")??"Notifications");break}}addToast(a){return this.appendChild(a),a}announceUrgent(a){this.#e.textContent="",requestAnimationFrame(()=>{this.#e.textContent=a})}dismissAll(){for(let a of Array.from(this.children))if(a instanceof l)a.dismiss()}#b(){return this.getAttribute("position")||"bottom-right"}#i(){let[a,r]=this.#b().split("-");if(a)this.setAttribute("data-y-position",a);if(r)this.setAttribute("data-x-position",r)}#m(){if(this.#n&&this.#h)this.#n.removeEventListener("change",this.#h),this.#n=null,this.#h=null;let a=this.getAttribute("theme")||"light";if(a==="system"){this.#n=window.matchMedia("(prefers-color-scheme: dark)");let r=(t)=>{this.setAttribute("data-sonner-theme",t.matches?"dark":"light")};this.#h=r,this.#n.addEventListener("change",r),r(this.#n)}else this.setAttribute("data-sonner-theme",a)}#x(){let a=this.getAttribute("dir");if(a==="auto"||!a){let r=window.getComputedStyle(document.documentElement).direction||"ltr";this.setAttribute("dir",r)}}#g(){let a=this.getAttribute("gap"),r=a?Number(a):b;this.style.setProperty("--gap",`${Number.isFinite(r)?r:b}px`)}#Y(){this.style.setProperty("--width",`${$}px`)}#y(){let a=this.getAttribute("offset"),r=this.getAttribute("mobile-offset");I(this,a??void 0,"--offset","24px"),I(this,r??void 0,"--mobile-offset","16px")}#u(){for(let a of this.#t)if(!a.hasAttribute("position")){let[r,t]=this.#b().split("-");if(r)a.setAttribute("data-y-position",r);if(t)a.setAttribute("data-x-position",t)}}#k(a){let r=this.hasAttribute(a);for(let t of this.#t){if(t.getAttribute(a)==="false")continue;if(r)t.setAttribute(a,"");else t.removeAttribute(a)}}#l(a){if(!a.hasAttribute("position")){let[r,t]=this.#b().split("-");if(r)a.setAttribute("data-y-position",r);if(t)a.setAttribute("data-x-position",t)}if(!a.hasAttribute("duration")){let r=this.getAttribute("duration");if(r)a.setAttribute("duration",r)}if(!a.hasAttribute("close-button")&&this.hasAttribute("close-button"))a.setAttribute("close-button","");if(!a.hasAttribute("rich-colors")&&this.hasAttribute("rich-colors"))a.setAttribute("rich-colors","");if(!a.hasAttribute("invert")&&this.hasAttribute("invert"))a.setAttribute("invert","")}#r(a={remeasure:!1}){let r=Number(this.getAttribute("visible-toasts")??Z);if(a.remeasure){this.#d=!0;for(let d of this.#t){if(d.getAttribute("data-removed")==="true")continue;let i=d.style.height;d.style.height="auto",this.#f.set(d,d.getBoundingClientRect().height),d.style.height=i}this.#d=!1}let t=this.#t.filter((d)=>d.getAttribute("data-removed")!=="true"),o=t.length>0?this.#f.get(t[0])??0:0,n=this.#z(),h=this.#a||this.#s,e=0;this.style.setProperty("--front-toast-height",`${o}px`);for(let d=0;d<t.length;d++){let i=t[d],s=this.#f.get(i)??0,x=d===0,c=d===0?0:e+d*n;if(e+=s,i.style.setProperty("--index",String(d)),i.style.setProperty("--toasts-before",String(d)),i.style.setProperty("--z-index",String(t.length-d)),i.style.setProperty("--offset",`${c}px`),i.style.setProperty("--initial-height",`${s}px`),i.setAttribute("data-index",String(d)),i.setAttribute("data-front",String(x)),i.setAttribute("data-visible",String(d+1<=r)),i.setAttribute("data-expanded",String(h)),h||x)i.removeAttribute("aria-hidden");else i.setAttribute("aria-hidden","true")}}#z(){let a=this.getAttribute("gap"),r=a?Number(a):b;return Number.isFinite(r)?r:b}#X=()=>{this.#s=!0;for(let a of this.#t)a.setPaused(!0);this.#r()};#_=()=>{this.#s=!1;for(let a of this.#t)a.setPaused(!1);this.#r()};#J=()=>{this.#s=!0;for(let a of this.#t)a.setPaused(!0);this.#r()};#K=(a)=>{let r=a.relatedTarget;if(r&&this.contains(r))return;this.#s=!1;for(let t of this.#t)t.setPaused(!1);this.#r()};#v=()=>this.#r({remeasure:!0});#S=(a)=>{let r=a.target;if(r){let n=r.tagName;if(n==="INPUT"||n==="TEXTAREA"||n==="SELECT"||r.isContentEditable)return}if(this.#Q().every((n)=>{if(n==="altKey"||n==="ctrlKey"||n==="shiftKey"||n==="metaKey")return a[n];return a.code===n})){this.#a=!0;for(let n of this.#t)n.setPaused(!0);this.focus(),this.#r();return}if(a.key==="Escape"&&this.#a&&this.contains(document.activeElement)){this.#a=!1;for(let n of this.#t)n.setPaused(!1);this.#r()}};#Q(){let a=this.getAttribute("hotkey");if(!a)return E;return a.split("+").map((r)=>r.trim())}}if(typeof customElements!=="undefined"&&!customElements.get("sonner-toaster"))customElements.define("sonner-toaster",m);function D(a){if(a){let t=document.getElementById(a);if(t instanceof m)return t}let r=M();if(!r)r=document.createElement("sonner-toaster"),document.body.appendChild(r);return r}function _(a){let r=a.id??k(),t=v(r);if(t)return t.update(a),t;let o=document.createElement("sonner-toast");return o.toastId=r,o.update(a),o.setHandlers({onDismiss:a.onDismiss,onAutoClose:a.onAutoClose}),D(a.toasterId).addToast(o),o}function z(a){return(r,t)=>_({...t,type:a,title:r})}function T(a,r){return _({...r,type:"default",title:a})}function fa(a){if(a!==void 0){v(a)?.dismiss();return}R()}function sa(a,r){let t=r?.id??k(),o=document.createElement("sonner-toast");if(o.toastId=t,o.setAttribute("data-styled","false"),r?.duration!==void 0)o.setAttribute("duration",String(r.duration));if(r?.dismissible===!1)o.setAttribute("dismissible","false");if(r?.position)o.setAttribute("position",r.position);if(r?.testId!==void 0)o.setAttribute("data-testid",r.testId);let n=a(t);return o.appendChild(n),o.setHandlers({onDismiss:r?.onDismiss,onAutoClose:r?.onAutoClose}),D(r?.toasterId).addToast(o),o}async function X(a,r){if(a===void 0)return;if(typeof a==="function")return a.length===0?a():a(r);return a}function ca(a,r){let t=r.id??k(),{loading:o,success:n,error:h,description:e,finally:d,...i}=r,s=_({...i,id:t,type:"loading",title:r.loading,duration:1/0,dismissible:r.dismissible??!1}),x=Promise.resolve(typeof a==="function"?a():a),c=null,aa=x.then(async(f)=>{c=["resolve",f];let g=await X(r.success,f),J=await X(r.description,f);if(g!==void 0)s.update({...i,id:t,type:"success",title:g,description:J,duration:r.duration,dismissible:r.dismissible??!0});else s.dismiss()}).catch(async(f)=>{c=["reject",f];let g=await X(r.error,f),J=await X(r.description,f);if(g!==void 0)s.update({...i,id:t,type:"error",title:g,description:J,duration:r.duration,dismissible:r.dismissible??!0});else s.dismiss()}).finally(()=>r.finally?.());return Object.assign(s,{unwrap:()=>new Promise((f,g)=>{aa.then(()=>{if(!c)return g(new Error("promise toast settled without a result"));if(c[0]==="resolve")f(c[1]);else g(c[1])})})})}var Q=Object.assign(T,{success:z("success"),error:z("error"),info:z("info"),warning:z("warning"),loading:(a,r)=>_({...r,type:"loading",title:a,duration:r?.duration??1/0}),message:T,promise:ca,custom:sa,dismiss:fa,getToast:v});if(typeof window!=="undefined")window.toast=Q;export{Q as toast,m as SonnerToaster,l as SonnerToast};
|
|
753
|
+
`,a})();class b extends S{static get observedAttributes(){return["type","duration","dismissible","position","close-button","rich-colors","invert"]}toastId=0;#n;#f;#u;#s;#t;#e=null;#d=y;#a=null;#c=0;#o=new Set;#i=null;#J=0;#h=null;#m=null;#x=!1;#b=!1;#k=!1;#v;#y;#S=null;#w=null;constructor(){super();this.#n=this.attachShadow({mode:"open"}),this.#n.adoptedStyleSheets=[I()],this.#n.appendChild(ca.content.cloneNode(!0)),this.#f=this.#n.querySelector("[data-close-button]"),this.#u=this.#n.querySelector("[data-icon]"),this.#s=this.#n.querySelector("[data-title]"),this.#t=this.#n.querySelector("[data-description]"),this.#f.innerHTML=L,this.#f.addEventListener("click",()=>this.dismiss());let a=this.#n.querySelector('slot[name="icon"]'),r=this.#n.querySelector('slot[name="description"]');a.addEventListener("slotchange",()=>this.#$("icon",a)),r.addEventListener("slotchange",()=>this.#$("description",r)),this.addEventListener("pointerdown",this.#L),this.addEventListener("pointermove",this.#H),this.addEventListener("pointerup",this.#C),this.addEventListener("pointercancel",this.#C),this.addEventListener("mouseenter",()=>this.#E("hover-self")),this.addEventListener("mouseleave",()=>this.#V("hover-self")),this.addEventListener("focusin",(t)=>{if(this.#E("focus-self"),this.#w)return;let n=t.relatedTarget;if(n&&!this.contains(n))this.#w=n}),this.addEventListener("focusout",()=>this.#V("focus-self")),this.addEventListener("keydown",(t)=>{if(t.key==="Escape"&&this.#W())t.stopPropagation(),this.dismiss()})}connectedCallback(){if(!this.toastId)this.toastId=this.getAttribute("id")||0;if(!this.hasAttribute("tabindex"))this.tabIndex=0;if(this.#p(),this.#K(),this.#G(),this.#z(),this.#X(),this.#Y(),this.setAttribute("data-sonner-toast",""),!this.hasAttribute("aria-atomic"))this.setAttribute("aria-atomic","true");if(this.setAttribute("data-mounted","false"),this.setAttribute("data-removed","false"),this.setAttribute("data-swiping","false"),this.setAttribute("data-swiped","false"),this.setAttribute("data-swipe-out","false"),!this.hasAttribute("data-styled"))this.setAttribute("data-styled","true");M(this),document.addEventListener("visibilitychange",this.#U),requestAnimationFrame(()=>{this.#x=!0,this.setAttribute("data-mounted","true"),this.dispatchEvent(new CustomEvent("sonner-toast-mounted",{bubbles:!0,composed:!0})),this.#g()})}disconnectedCallback(){if(this.#a)clearTimeout(this.#a);document.removeEventListener("visibilitychange",this.#U),R(this)}attributeChangedCallback(a,r,t){if(!this.isConnected)return;switch(a){case"type":this.#p();break;case"duration":this.#e=this.#_(),this.#d=this.#e??y;break;case"dismissible":this.#K();break;case"position":this.#G();break;case"close-button":this.#Y();break;case"rich-colors":this.#z();break;case"invert":this.#X();break}}get toastType(){return this.getAttribute("type")||"default"}dismiss(){if(this.#b||this.#k)return;if(this.#k=!0,this.#b=!0,this.setAttribute("data-removed","true"),this.#a)clearTimeout(this.#a);this.dispatchEvent(new CustomEvent("sonner-toast-dismissed",{bubbles:!0,composed:!0})),setTimeout(()=>{this.#Q(),this.#v?.(this),this.remove()},C)}#Q(){if(!this.#w)return;let a=document.activeElement;if(!a||!this.contains(a))return;let r=this.#w;if(!r.isConnected||typeof r.focus!=="function")return;r.focus()}update(a){let r=a.type!==void 0&&a.type!==this.toastType,t=$(this.toastType);if(a.type!==void 0)this.setAttribute("type",a.type);let n=!1;if(a.duration!==void 0)this.setAttribute("duration",String(a.duration)),this.#e=a.duration,this.#d=a.duration,n=!0;else if(r)this.#e=null,this.removeAttribute("duration"),this.#d=0,n=!0;if(a.dismissible!==void 0)X(this,"dismissible",a.dismissible);if(a.position!==void 0)this.setAttribute("position",a.position);if(a.closeButton!==void 0)X(this,"close-button",a.closeButton);if(a.richColors!==void 0)X(this,"rich-colors",a.richColors);if(a.invert!==void 0)X(this,"invert",a.invert);if(a.icon!==void 0)this.setIcon(a.icon);if(a.title!==void 0)this.setTitle(a.title);if(a.description!==void 0)this.setDescription(a.description);if(a.action!==void 0)aa(this,this.#n,"action",a.action,()=>this.dismiss());if(a.cancel!==void 0)aa(this,this.#n,"cancel",a.cancel,()=>this.dismiss());if(a.className)this.className=a.className;if(a.testId!==void 0)this.setAttribute("data-testid",a.testId);if(a.closeButtonAriaLabel!==void 0)this.#S=a.closeButtonAriaLabel||null,this.#Z();if(a.onDismiss)this.#v=a.onDismiss;if(a.onAutoClose)this.#y=a.onAutoClose;if(n)this.#j();if(this.#x&&r&&!t&&$(this.toastType)){let i=this.#r();if(i)this.closest("sonner-toaster")?.announceUrgent(i)}this.dispatchEvent(new CustomEvent("sonner-toast-updated",{bubbles:!0,composed:!0}))}setTitle(a){T(this,"title",a),this.#Z()}#r(){return Array.from(this.children).find((r)=>r.getAttribute("slot")==="title")?.textContent?.trim()??""}#Z(){if(this.#S){this.#f.setAttribute("aria-label",this.#S);return}let a=this.#r();this.#f.setAttribute("aria-label",a?`Close: ${a}`:"Close toast")}setDescription(a){T(this,"description",a)}setIcon(a){if(K(this,"icon"),a==null)return;if(a instanceof Node){if(a instanceof Element)a.setAttribute("slot","icon");this.appendChild(a)}else{let r=D(a,"icon");if(r)this.appendChild(r)}}setHandlers(a){this.#v=a.onDismiss,this.#y=a.onAutoClose}setPaused(a){if(a)this.#E("toaster");else this.#V("toaster")}#$(a,r){if(r.assignedNodes().length>0)this.setAttribute(`data-has-${a}`,"");else this.removeAttribute(`data-has-${a}`)}#p(){let a=this.toastType;this.setAttribute("data-type",a);let r=$(a);this.setAttribute("role",r?"alert":"status"),this.setAttribute("aria-live",r?"assertive":"polite");for(let o of Array.from(this.children))if(o.getAttribute("slot")==="icon"&&o.hasAttribute("data-sonner-default-icon"))this.removeChild(o);if(a==="loading"){this.setAttribute("data-promise","true");return}if(this.removeAttribute("data-promise"),Array.from(this.children).some((o)=>o.getAttribute("slot")==="icon"))return;let n=H(a);if(!n)return;let i=D(n,"icon");if(i)i.setAttribute("data-sonner-default-icon",""),this.appendChild(i)}#K(){let a=this.getAttribute("dismissible")!=="false";this.setAttribute("data-dismissible",String(a))}#G(){let a=this.getAttribute("position");if(!a)return;let[r,t]=a.split("-");if(r)this.setAttribute("data-y-position",r);if(t)this.setAttribute("data-x-position",t)}#Y(){this.#f.hidden=!p(this,"close-button")}#z(){this.setAttribute("data-rich-colors",String(p(this,"rich-colors")))}#X(){this.setAttribute("data-invert",String(p(this,"invert")))}#_(){let a=this.getAttribute("duration");if(a==null)return null;if(a==="Infinity")return 1/0;let r=Number(a);return Number.isFinite(r)?r:null}#l(){let a=this.#e??this.#_();if(a!==null)return a;if(this.toastType==="loading")return 1/0;return y}#g(){if(!this.#x||this.#b)return;if(this.#o.size>0)return;if(this.#a!==null)return;let a=this.#l();if(a===1/0)return;this.#d=this.#d>0?this.#d:a,this.#c=Date.now(),this.#a=setTimeout(()=>{this.#a=null,this.#y?.(this),this.dispatchEvent(new CustomEvent("sonner-toast-autoclosed",{bubbles:!0,composed:!0})),this.dismiss()},this.#d)}#E(a){let r=this.#o.size===0;if(this.#o.add(a),r&&this.#a!==null){clearTimeout(this.#a),this.#a=null;let t=Date.now()-this.#c;this.#d=Math.max(0,this.#d-t)}}#V(a){if(!this.#o.delete(a))return;if(this.#o.size===0&&!this.#b)this.#g()}#j(){if(this.#a)clearTimeout(this.#a),this.#a=null;this.#d=this.#l(),this.#g()}#U=()=>{if(document.visibilityState==="hidden")this.#E("doc-hidden");else this.#V("doc-hidden")};#W(){return this.getAttribute("dismissible")!=="false"}#L=(a)=>{if(a.button===2)return;if(this.toastType==="loading"||!this.#W())return;let r=a.composedPath()[0];if(r){if(r.tagName==="BUTTON"||typeof r.closest==="function"&&r.closest("button"))return}this.#J=Date.now();try{this.setPointerCapture(a.pointerId)}catch{}if(this.setAttribute("data-swiping","true"),this.#i={x:a.clientX,y:a.clientY},!this.#m){let t=this.getAttribute("data-y-position"),n=this.getAttribute("data-x-position"),i=[];if(t==="top"||t==="bottom")i.push(t);if(n==="left"||n==="right")i.push(n);this.#m=i.length>0?i:["bottom","right"]}};#H=(a)=>{if(!this.#i||!this.#W())return;if((window.getSelection()?.toString().length??0)>0)return;let r=a.clientY-this.#i.y,t=a.clientX-this.#i.x,n=this.#m;if(!this.#h&&(Math.abs(t)>1||Math.abs(r)>1))this.#h=Math.abs(t)>Math.abs(r)?"x":"y";let i=(d)=>1/(1.5+Math.abs(d)/20),o=0,f=0;if(this.#h==="y"){if(n.includes("top")||n.includes("bottom"))if(n.includes("top")&&r<0||n.includes("bottom")&&r>0)f=r;else{let d=r*i(r);f=Math.abs(d)<Math.abs(r)?d:r}}else if(this.#h==="x"){if(n.includes("left")||n.includes("right"))if(n.includes("left")&&t<0||n.includes("right")&&t>0)o=t;else{let d=t*i(t);o=Math.abs(d)<Math.abs(t)?d:t}}if(Math.abs(o)>0||Math.abs(f)>0)this.setAttribute("data-swiped","true");this.style.setProperty("--swipe-amount-x",`${o}px`),this.style.setProperty("--swipe-amount-y",`${f}px`)};#C=()=>{if(this.getAttribute("data-swipe-out")==="true"||!this.#W()){this.#i=null,this.#h=null,this.setAttribute("data-swiping","false");return}let a=parseFloat(this.style.getPropertyValue("--swipe-amount-x"))||0,r=parseFloat(this.style.getPropertyValue("--swipe-amount-y"))||0,t=Math.max(1,Date.now()-this.#J),n=this.#h==="x"?a:r,i=Math.abs(n)/t;if(Math.abs(n)>=W||i>U){if(this.#h==="x")this.setAttribute("data-swipe-direction",a>0?"right":"left");else this.setAttribute("data-swipe-direction",r>0?"down":"up");this.setAttribute("data-swipe-out","true"),this.dismiss()}else this.style.setProperty("--swipe-amount-x","0px"),this.style.setProperty("--swipe-amount-y","0px"),this.setAttribute("data-swiped","false");this.setAttribute("data-swiping","false"),this.#i=null,this.#h=null}}if(typeof customElements!=="undefined"&&!customElements.get("sonner-toast"))customElements.define("sonner-toast",b);function ra(a,r){if(a==null)return r;if(typeof a==="number")return`${a}px`;return a}function ta(a,r,t,n){let i=["top","right","bottom","left"];if(r==null||typeof r==="string"||typeof r==="number"){let o=ra(r,n);for(let f of i)a.style.setProperty(`${t}-${f}`,o)}else for(let o of i)a.style.setProperty(`${t}-${o}`,ra(r[o],n))}class m extends S{static get observedAttributes(){return["position","theme","rich-colors","expand","duration","gap","visible-toasts","close-button","invert","dir","offset","mobile-offset","hotkey","container-aria-label"]}#n;#f;#u;#s;#t=[];#e=new Map;#d=!1;#a=!1;#c=!1;#o=null;#i=null;constructor(){super();this.#n=this.attachShadow({mode:"open"}),this.#n.adoptedStyleSheets=[A()],this.#n.innerHTML='<div data-frame part="frame"><slot></slot></div><div data-alert-announcer role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none"></div>',this.#f=this.#n.querySelector("[data-alert-announcer]"),this.#u=new MutationObserver((a)=>{let r=!1;for(let t of a){for(let n of Array.from(t.addedNodes))if(n instanceof b)this.#t.unshift(n),this.#s.observe(n),this.#Q(n),r=!0;for(let n of Array.from(t.removedNodes))if(n instanceof b)this.#t=this.#t.filter((i)=>i!==n),this.#e.delete(n),this.#s.unobserve(n),r=!0}if(r)this.#r({remeasure:!0})}),this.#s=new ResizeObserver(()=>this.#r({remeasure:!1})),this.addEventListener("mouseenter",this.#$),this.addEventListener("mouseleave",this.#p),this.addEventListener("focusin",this.#K),this.addEventListener("focusout",this.#G),this.addEventListener("sonner-toast-dismissed",()=>this.#r({remeasure:!1})),this.addEventListener("sonner-toast-updated",()=>this.#r({remeasure:!0})),this.addEventListener("sonner-toast-mounted",()=>this.#r({remeasure:!0}))}connectedCallback(){if(typeof this.showPopover==="function"){if(!this.hasAttribute("popover"))this.setAttribute("popover","manual");this.showPopover()}if(!this.hasAttribute("tabindex"))this.tabIndex=-1;if(!this.hasAttribute("role"))this.setAttribute("role","region");if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label",this.getAttribute("container-aria-label")??"Notifications");this.#_(),this.setAttribute("data-sonner-toaster",""),this.#m(),this.#x(),this.#b(),this.#k(),this.#v(),this.#y(),this.#u.observe(this,{childList:!0});for(let a of Array.from(this.children))if(a instanceof b)this.#t.unshift(a),this.#s.observe(a),this.#Q(a);document.addEventListener("keydown",this.#z),window.addEventListener("resize",this.#Y),q(this),this.#r({remeasure:!0})}disconnectedCallback(){if(typeof this.hidePopover==="function")try{this.hidePopover()}catch{}if(this.#u.disconnect(),this.#s.disconnect(),document.removeEventListener("keydown",this.#z),window.removeEventListener("resize",this.#Y),this.#o&&this.#i)this.#o.removeEventListener("change",this.#i);B(this)}attributeChangedCallback(a,r,t){if(!this.isConnected)return;switch(a){case"position":this.#m(),this.#S(),this.#r();break;case"theme":this.#x();break;case"dir":this.#b();break;case"gap":this.#k(),this.#r();break;case"visible-toasts":this.#r();break;case"expand":this.#a=this.hasAttribute("expand");for(let n of this.#t)n.setPaused(this.#a||this.#c);this.#r();break;case"close-button":case"rich-colors":case"invert":this.#w(a);break;case"offset":case"mobile-offset":this.#y();break;case"container-aria-label":this.setAttribute("aria-label",this.getAttribute("container-aria-label")??"Notifications");break;case"hotkey":this.#_();break}}addToast(a){return this.appendChild(a),a}announceUrgent(a){this.#f.textContent="",requestAnimationFrame(()=>{this.#f.textContent=a})}dismissAll(){for(let a of Array.from(this.children))if(a instanceof b)a.dismiss()}#J(){return this.getAttribute("position")||"bottom-right"}#h(a){let[r,t]=this.#J().split("-");if(r)a.setAttribute("data-y-position",r);if(t)a.setAttribute("data-x-position",t)}#m(){this.#h(this)}#x(){if(this.#o&&this.#i)this.#o.removeEventListener("change",this.#i),this.#o=null,this.#i=null;let a=this.getAttribute("theme")||"light";if(a==="system"){this.#o=window.matchMedia("(prefers-color-scheme: dark)");let r=(t)=>{this.setAttribute("data-sonner-theme",t.matches?"dark":"light")};this.#i=r,this.#o.addEventListener("change",r),r(this.#o)}else this.setAttribute("data-sonner-theme",a)}#b(){let a=this.getAttribute("dir");if(a==="auto"||!a){let r=window.getComputedStyle(document.documentElement).direction||"ltr";this.setAttribute("dir",r)}}#k(){let a=this.getAttribute("gap"),r=a?Number(a):l;this.style.setProperty("--gap",`${Number.isFinite(r)?r:l}px`)}#v(){this.style.setProperty("--width",`${V}px`)}#y(){let a=this.getAttribute("offset"),r=this.getAttribute("mobile-offset");ta(this,a??void 0,"--offset","24px"),ta(this,r??void 0,"--mobile-offset","16px")}#S(){for(let a of this.#t)if(!a.hasAttribute("position"))this.#h(a)}#w(a){let r=this.hasAttribute(a);for(let t of this.#t){if(t.getAttribute(a)==="false")continue;if(r)t.setAttribute(a,"");else t.removeAttribute(a)}}#Q(a){if(!a.hasAttribute("position"))this.#h(a);if(!a.hasAttribute("duration")){let r=this.getAttribute("duration");if(r)a.setAttribute("duration",r)}if(!a.hasAttribute("close-button")&&this.hasAttribute("close-button"))a.setAttribute("close-button","");if(!a.hasAttribute("rich-colors")&&this.hasAttribute("rich-colors"))a.setAttribute("rich-colors","");if(!a.hasAttribute("invert")&&this.hasAttribute("invert"))a.setAttribute("invert","")}#r(a={remeasure:!1}){let r=Number(this.getAttribute("visible-toasts")??E);if(a.remeasure){this.#d=!0;for(let d of this.#t){if(d.getAttribute("data-removed")==="true")continue;let h=d.style.height;d.style.height="auto",this.#e.set(d,d.getBoundingClientRect().height),d.style.height=h}this.#d=!1}let t=this.#t.filter((d)=>d.getAttribute("data-removed")!=="true"),n=t.length>0?this.#e.get(t[0])??0:0,i=this.#Z(),o=this.#a||this.#c,f=0;this.style.setProperty("--front-toast-height",`${n}px`);for(let d=0;d<t.length;d++){let h=t[d],c=this.#e.get(h)??0,x=d===0,g=d===0?0:f+d*i;if(f+=c,h.style.setProperty("--index",String(d)),h.style.setProperty("--toasts-before",String(d)),h.style.setProperty("--z-index",String(t.length-d)),h.style.setProperty("--offset",`${g}px`),h.style.setProperty("--initial-height",`${c}px`),h.setAttribute("data-index",String(d)),h.setAttribute("data-front",String(x)),h.setAttribute("data-visible",String(d+1<=r)),h.setAttribute("data-expanded",String(o)),o||x)h.removeAttribute("aria-hidden");else h.setAttribute("aria-hidden","true")}}#Z(){let a=this.getAttribute("gap"),r=a?Number(a):l;return Number.isFinite(r)?r:l}#$=()=>{this.#c=!0;for(let a of this.#t)a.setPaused(!0);this.#r()};#p=()=>{this.#c=!1;for(let a of this.#t)a.setPaused(!1);this.#r()};#K=()=>{this.#c=!0;for(let a of this.#t)a.setPaused(!0);this.#r()};#G=(a)=>{let r=a.relatedTarget;if(r&&this.contains(r))return;this.#c=!1;for(let t of this.#t)t.setPaused(!1);this.#r()};#Y=()=>this.#r({remeasure:!0});#z=(a)=>{if(a.defaultPrevented)return;let r=a.target;if(r){let o=r.tagName;if(o==="INPUT"||o==="TEXTAREA"||o==="SELECT"||r.isContentEditable)return}let t=this.#X(),n=["altKey","ctrlKey","shiftKey","metaKey"];if(t.length>0&&t.every((o)=>{if(n.includes(o))return a[o];return a.code===o})&&n.every((o)=>t.includes(o)||!a[o])){this.#a=!0;for(let o of this.#t)o.setPaused(!0);this.focus(),this.#r();return}if(a.key==="Escape"&&this.#a&&this.contains(document.activeElement)){this.#a=!1;for(let o of this.#t)o.setPaused(!1);this.#r()}};#X(){let a=this.getAttribute("hotkey");if(a===null)return j;let r=a.trim();if(r===""||r.toLowerCase()==="none")return[];return r.split("+").map((t)=>t.trim())}#_(){let a=ga(this.#X());if(!a){if(this.#l)this.removeAttribute("aria-keyshortcuts"),this.#l=!1;if(this.#g)this.removeAttribute("title"),this.#g=!1;return}if(!this.hasAttribute("aria-keyshortcuts")||this.#l)this.setAttribute("aria-keyshortcuts",a),this.#l=!0;if(!this.hasAttribute("title")||this.#g)this.setAttribute("title",`Press ${a} to expand notifications`),this.#g=!0}#l=!1;#g=!1}function ga(a){if(a.length===0)return"";return a.map((r)=>{if(r==="altKey")return"Alt";if(r==="ctrlKey")return"Control";if(r==="shiftKey")return"Shift";if(r==="metaKey")return"Meta";if(/^Key[A-Z]$/.test(r))return r.slice(3);if(/^Digit[0-9]$/.test(r))return r.slice(5);return r}).join("+")}if(typeof customElements!=="undefined"&&!customElements.get("sonner-toaster"))customElements.define("sonner-toaster",m);function oa(a){if(a){let t=document.getElementById(a);if(t instanceof m)return t}let r=P();if(!r)r=document.createElement("sonner-toaster"),document.body.appendChild(r);return r}function Q(a){let r=a.id??k(),t=v(r);if(t)return t.update(a),t;let n=document.createElement("sonner-toast");return n.toastId=r,n.update(a),n.setHandlers({onDismiss:a.onDismiss,onAutoClose:a.onAutoClose}),oa(a.toasterId).addToast(n),n}function _(a){return(r,t)=>Q({...t,type:a,title:r})}function na(a,r){return Q({...r,type:"default",title:a})}function sa(a){if(a!==void 0){v(a)?.dismiss();return}N()}function ba(a,r){let t=r?.id??k(),n=document.createElement("sonner-toast");if(n.toastId=t,n.setAttribute("data-styled","false"),r?.duration!==void 0)n.setAttribute("duration",String(r.duration));if(r?.dismissible===!1)n.setAttribute("dismissible","false");if(r?.position)n.setAttribute("position",r.position);if(r?.testId!==void 0)n.setAttribute("data-testid",r.testId);let i=a(t);return n.appendChild(i),n.setHandlers({onDismiss:r?.onDismiss,onAutoClose:r?.onAutoClose}),oa(r?.toasterId).addToast(n),n}async function J(a,r){if(a===void 0)return;if(typeof a==="function")return a.length===0?a():a(r);return a}function la(a,r){let t=r.id??k(),{loading:n,success:i,error:o,description:f,finally:d,...h}=r,c=Q({...h,id:t,type:"loading",title:r.loading,duration:1/0,dismissible:r.dismissible??!1}),x=Promise.resolve(typeof a==="function"?a():a),g=null,da=x.then(async(e)=>{g=["resolve",e];let s=await J(r.success,e),Z=await J(r.description,e);if(s!==void 0)c.update({...h,id:t,type:"success",title:s,description:Z,duration:r.duration,dismissible:r.dismissible??!0});else c.dismiss()}).catch(async(e)=>{g=["reject",e];let s=await J(r.error,e),Z=await J(r.description,e);if(s!==void 0)c.update({...h,id:t,type:"error",title:s,description:Z,duration:r.duration,dismissible:r.dismissible??!0});else c.dismiss()}).finally(()=>r.finally?.());return Object.assign(c,{unwrap:()=>new Promise((e,s)=>{da.then(()=>{if(!g)return s(new Error("promise toast settled without a result"));if(g[0]==="resolve")e(g[1]);else s(g[1])})})})}var G=Object.assign(na,{success:_("success"),error:_("error"),info:_("info"),warning:_("warning"),loading:(a,r)=>Q({...r,type:"loading",title:a,duration:r?.duration??1/0}),message:na,promise:la,custom:ba,dismiss:sa,getToast:v});if(typeof window!=="undefined")window.toast=G;export{G as toast,m as SonnerToaster,b as SonnerToast};
|
|
740
754
|
|
|
741
|
-
//# debugId=
|
|
755
|
+
//# debugId=BFFB210CB348299E64756E2164756E21
|
|
742
756
|
//# sourceMappingURL=sonner-wc.bundle.js.map
|