New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
solid-sonner
Advanced tools
solid-sonner - npm Package Compare versions
+17
-13
@@ -31,8 +31,8 @@ import { delegateEvents, createComponent, insert, use, setAttribute, effect, className, style, template, addEventListener, Dynamic } from 'solid-js/web'; | ||
| styleInject(':where(html[dir=ltr]),\n:where([data-sonner-toaster][dir=ltr]) {\n --toast-icon-margin-start: -3px;\n --toast-icon-margin-end: 4px;\n --toast-svg-margin-start: -1px;\n --toast-svg-margin-end: 0px;\n --toast-button-margin-start: auto;\n --toast-button-margin-end: 0;\n --toast-close-button-start: 0;\n --toast-close-button-end: unset;\n --toast-close-button-transform: translate(-35%, -35%);\n}\n:where(html[dir=rtl]),\n:where([data-sonner-toaster][dir=rtl]) {\n --toast-icon-margin-start: 4px;\n --toast-icon-margin-end: -3px;\n --toast-svg-margin-start: 0px;\n --toast-svg-margin-end: -1px;\n --toast-button-margin-start: 0;\n --toast-button-margin-end: auto;\n --toast-close-button-start: unset;\n --toast-close-button-end: 0;\n --toast-close-button-transform: translate(35%, -35%);\n}\n:where([data-sonner-toaster]) {\n position: fixed;\n width: var(--width);\n font-family:\n ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Helvetica Neue,\n Arial,\n Noto Sans,\n sans-serif,\n Apple Color Emoji,\n Segoe UI Emoji,\n Segoe UI Symbol,\n Noto Color Emoji;\n --gray1: hsl(0, 0%, 99%);\n --gray2: hsl(0, 0%, 97.3%);\n --gray3: hsl(0, 0%, 95.1%);\n --gray4: hsl(0, 0%, 93%);\n --gray5: hsl(0, 0%, 90.9%);\n --gray6: hsl(0, 0%, 88.7%);\n --gray7: hsl(0, 0%, 85.8%);\n --gray8: hsl(0, 0%, 78%);\n --gray9: hsl(0, 0%, 56.1%);\n --gray10: hsl(0, 0%, 52.3%);\n --gray11: hsl(0, 0%, 43.5%);\n --gray12: hsl(0, 0%, 9%);\n --border-radius: 8px;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n list-style: none;\n outline: none;\n z-index: 999999999;\n}\n:where([data-sonner-toaster][data-x-position=right]) {\n right: max(var(--offset), env(safe-area-inset-right));\n}\n:where([data-sonner-toaster][data-x-position=left]) {\n left: max(var(--offset), env(safe-area-inset-left));\n}\n:where([data-sonner-toaster][data-x-position=center]) {\n left: 50%;\n transform: translateX(-50%);\n}\n:where([data-sonner-toaster][data-y-position=top]) {\n top: max(var(--offset), env(safe-area-inset-top));\n}\n:where([data-sonner-toaster][data-y-position=bottom]) {\n bottom: max(var(--offset), env(safe-area-inset-bottom));\n}\n:where([data-sonner-toast]) {\n --y: translateY(100%);\n --lift-amount: calc(var(--lift) * var(--gap));\n z-index: var(--z-index);\n position: absolute;\n opacity: 0;\n transform: var(--y);\n filter: blur(0);\n touch-action: none;\n transition:\n transform 400ms,\n opacity 400ms,\n height 400ms,\n box-shadow 200ms;\n box-sizing: border-box;\n outline: none;\n overflow-wrap: anywhere;\n}\n:where([data-sonner-toast][data-styled=true]) {\n padding: 16px;\n background: var(--normal-bg);\n border: 1px solid var(--normal-border);\n color: var(--normal-text);\n border-radius: var(--border-radius);\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);\n width: var(--width);\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n:where([data-sonner-toast]:focus-visible) {\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);\n}\n:where([data-sonner-toast][data-y-position=top]) {\n top: 0;\n --y: translateY(-100%);\n --lift: 1;\n --lift-amount: calc(1 * var(--gap));\n}\n:where([data-sonner-toast][data-y-position=bottom]) {\n bottom: 0;\n --y: translateY(100%);\n --lift: -1;\n --lift-amount: calc(var(--lift) * var(--gap));\n}\n:where([data-sonner-toast]) :where([data-description]) {\n font-weight: 400;\n line-height: 1.4;\n color: inherit;\n}\n:where([data-sonner-toast]) :where([data-title]) {\n font-weight: 500;\n line-height: 1.5;\n color: inherit;\n}\n:where([data-sonner-toast]) :where([data-icon]) {\n display: flex;\n height: 16px;\n width: 16px;\n position: relative;\n justify-content: flex-start;\n align-items: center;\n flex-shrink: 0;\n margin-left: var(--toast-icon-margin-start);\n margin-right: var(--toast-icon-margin-end);\n}\n:where([data-sonner-toast][data-promise=true]) :where([data-icon]) > svg {\n opacity: 0;\n transform: scale(0.8);\n transform-origin: center;\n animation: sonner-fade-in 300ms ease forwards;\n}\n:where([data-sonner-toast]) :where([data-icon]) > * {\n flex-shrink: 0;\n}\n:where([data-sonner-toast]) :where([data-icon]) svg {\n margin-left: var(--toast-svg-margin-start);\n margin-right: var(--toast-svg-margin-end);\n}\n:where([data-sonner-toast]) :where([data-content]) {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n[data-sonner-toast][data-styled=true] [data-button] {\n border-radius: 4px;\n padding-left: 8px;\n padding-right: 8px;\n height: 24px;\n font-size: 12px;\n color: var(--normal-bg);\n background: var(--normal-text);\n margin-left: var(--toast-button-margin-start);\n margin-right: var(--toast-button-margin-end);\n border: none;\n cursor: pointer;\n outline: none;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n transition: opacity 400ms, box-shadow 200ms;\n}\n:where([data-sonner-toast]) :where([data-button]):focus-visible {\n box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);\n}\n:where([data-sonner-toast]) :where([data-button]):first-of-type {\n margin-left: var(--toast-button-margin-start);\n margin-right: var(--toast-button-margin-end);\n}\n:where([data-sonner-toast]) :where([data-cancel]) {\n color: var(--normal-text);\n background: rgba(0, 0, 0, 0.08);\n}\n:where([data-sonner-toast][data-theme=dark]) :where([data-cancel]) {\n background: rgba(255, 255, 255, 0.3);\n}\n:where([data-sonner-toast]) :where([data-close-button]) {\n position: absolute;\n left: var(--toast-close-button-start);\n right: var(--toast-close-button-end);\n top: 0;\n height: 20px;\n width: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n background: var(--gray1);\n color: var(--gray12);\n border: 1px solid var(--gray4);\n transform: var(--toast-close-button-transform);\n border-radius: 50%;\n cursor: pointer;\n z-index: 1;\n transition:\n opacity 100ms,\n background 200ms,\n border-color 200ms;\n}\n:where([data-sonner-toast]) :where([data-close-button]):focus-visible {\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);\n}\n:where([data-sonner-toast]) :where([data-disabled=true]) {\n cursor: not-allowed;\n}\n:where([data-sonner-toast]):hover :where([data-close-button]):hover {\n background: var(--gray2);\n border-color: var(--gray5);\n}\n:where([data-sonner-toast][data-swiping=true])::before {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n height: 100%;\n z-index: -1;\n}\n:where([data-sonner-toast][data-y-position=top][data-swiping=true])::before {\n bottom: 50%;\n transform: scaleY(3) translateY(50%);\n}\n:where([data-sonner-toast][data-y-position=bottom][data-swiping=true])::before {\n top: 50%;\n transform: scaleY(3) translateY(-50%);\n}\n:where([data-sonner-toast][data-swiping=false][data-removed=true])::before {\n content: "";\n position: absolute;\n inset: 0;\n transform: scaleY(2);\n}\n:where([data-sonner-toast])::after {\n content: "";\n position: absolute;\n left: 0;\n height: calc(var(--gap) + 1px);\n bottom: 100%;\n width: 100%;\n}\n:where([data-sonner-toast][data-mounted=true]) {\n --y: translateY(0);\n opacity: 1;\n}\n:where([data-sonner-toast][data-expanded=false][data-front=false]) {\n --scale: var(--toasts-before) * 0.05 + 1;\n --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));\n height: var(--front-toast-height);\n}\n:where([data-sonner-toast]) > * {\n transition: opacity 400ms;\n}\n:where([data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]) > * {\n opacity: 0;\n}\n:where([data-sonner-toast][data-visible=false]) {\n opacity: 0;\n pointer-events: none;\n}\n:where([data-sonner-toast][data-mounted=true][data-expanded=true]) {\n --y: translateY(calc(var(--lift) * var(--offset)));\n height: var(--initial-height);\n}\n:where([data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]) {\n --y: translateY(calc(var(--lift) * -100%));\n opacity: 0;\n}\n:where([data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]) {\n --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));\n opacity: 0;\n}\n:where([data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]) {\n --y: translateY(40%);\n opacity: 0;\n transition: transform 500ms, opacity 200ms;\n}\n:where([data-sonner-toast][data-removed=true][data-front=false])::before {\n height: calc(var(--initial-height) + 20%);\n}\n[data-sonner-toast][data-swiping=true] {\n transform: var(--y) translateY(var(--swipe-amount, 0px));\n transition: none;\n}\n[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],\n[data-sonner-toast][data-swipe-out=true][data-y-position=top] {\n animation: swipe-out 200ms ease-out forwards;\n}\n@keyframes swipe-out {\n from {\n transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));\n opacity: 1;\n }\n to {\n transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));\n opacity: 0;\n }\n}\n@media (max-width: 600px) {\n [data-sonner-toaster] {\n position: fixed;\n --mobile-offset: 16px;\n right: var(--mobile-offset);\n left: var(--mobile-offset);\n width: 100%;\n }\n [data-sonner-toaster] [data-sonner-toast] {\n left: 0;\n right: 0;\n width: calc(100% - var(--mobile-offset) * 2);\n }\n [data-sonner-toaster][data-x-position=left] {\n left: var(--mobile-offset);\n }\n [data-sonner-toaster][data-y-position=bottom] {\n bottom: 20px;\n }\n [data-sonner-toaster][data-y-position=top] {\n top: 20px;\n }\n [data-sonner-toaster][data-x-position=center] {\n left: var(--mobile-offset);\n right: var(--mobile-offset);\n transform: none;\n }\n}\n[data-sonner-toaster][data-theme=light] {\n --normal-bg: #fff;\n --normal-border: var(--gray4);\n --normal-text: var(--gray12);\n --success-bg: hsl(143, 85%, 96%);\n --success-border: hsl(145, 92%, 91%);\n --success-text: hsl(140, 100%, 27%);\n --info-bg: hsl(208, 100%, 97%);\n --info-border: hsl(221, 91%, 91%);\n --info-text: hsl(210, 92%, 45%);\n --warning-bg: hsl(49, 100%, 97%);\n --warning-border: hsl(49, 91%, 91%);\n --warning-text: hsl(31, 92%, 45%);\n --error-bg: hsl(359, 100%, 97%);\n --error-border: hsl(359, 100%, 94%);\n --error-text: hsl(360, 100%, 45%);\n}\n[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true] {\n --normal-bg: #000;\n --normal-border: hsl(0, 0%, 20%);\n --normal-text: var(--gray1);\n}\n[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true] {\n --normal-bg: #fff;\n --normal-border: var(--gray3);\n --normal-text: var(--gray12);\n}\n[data-sonner-toaster][data-theme=dark] {\n --normal-bg: #000;\n --normal-border: hsl(0, 0%, 20%);\n --normal-text: var(--gray1);\n --success-bg: hsl(150, 100%, 6%);\n --success-border: hsl(147, 100%, 12%);\n --success-text: hsl(150, 86%, 65%);\n --info-bg: hsl(215, 100%, 6%);\n --info-border: hsl(223, 100%, 12%);\n --info-text: hsl(216, 87%, 65%);\n --warning-bg: hsl(64, 100%, 6%);\n --warning-border: hsl(60, 100%, 12%);\n --warning-text: hsl(46, 87%, 65%);\n --error-bg: hsl(358, 76%, 10%);\n --error-border: hsl(357, 89%, 16%);\n --error-text: hsl(358, 100%, 81%);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=success] {\n background: var(--success-bg);\n border-color: var(--success-border);\n color: var(--success-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=success] [data-close-button] {\n background: var(--success-bg);\n border-color: var(--success-border);\n color: var(--success-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=info] {\n background: var(--info-bg);\n border-color: var(--info-border);\n color: var(--info-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=info] [data-close-button] {\n background: var(--info-bg);\n border-color: var(--info-border);\n color: var(--info-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=warning] {\n background: var(--warning-bg);\n border-color: var(--warning-border);\n color: var(--warning-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=warning] [data-close-button] {\n background: var(--warning-bg);\n border-color: var(--warning-border);\n color: var(--warning-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=error] {\n background: var(--error-bg);\n border-color: var(--error-border);\n color: var(--error-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=error] [data-close-button] {\n background: var(--error-bg);\n border-color: var(--error-border);\n color: var(--error-text);\n}\n.sonner-loading-wrapper {\n --size: 16px;\n height: var(--size);\n width: var(--size);\n position: absolute;\n inset: 0;\n z-index: 10;\n}\n.sonner-loading-wrapper[data-visible=false] {\n transform-origin: center;\n animation: sonner-fade-out 0.2s ease forwards;\n}\n.sonner-spinner {\n position: relative;\n top: 50%;\n left: 50%;\n height: var(--size);\n width: var(--size);\n}\n.sonner-loading-bar {\n animation: sonner-spin 1.2s linear infinite;\n background: var(--gray11);\n border-radius: 6px;\n height: 8%;\n left: -10%;\n position: absolute;\n top: -3.9%;\n width: 24%;\n}\n.sonner-loading-bar:nth-child(1) {\n animation-delay: -1.2s;\n transform: rotate(0.0001deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(2) {\n animation-delay: -1.1s;\n transform: rotate(30deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(3) {\n animation-delay: -1s;\n transform: rotate(60deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(4) {\n animation-delay: -0.9s;\n transform: rotate(90deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(5) {\n animation-delay: -0.8s;\n transform: rotate(120deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(6) {\n animation-delay: -0.7s;\n transform: rotate(150deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(7) {\n animation-delay: -0.6s;\n transform: rotate(180deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(8) {\n animation-delay: -0.5s;\n transform: rotate(210deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(9) {\n animation-delay: -0.4s;\n transform: rotate(240deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(10) {\n animation-delay: -0.3s;\n transform: rotate(270deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(11) {\n animation-delay: -0.2s;\n transform: rotate(300deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(12) {\n animation-delay: -0.1s;\n transform: rotate(330deg) translate(146%);\n}\n@keyframes sonner-fade-in {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes sonner-fade-out {\n 0% {\n opacity: 1;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(0.8);\n }\n}\n@keyframes sonner-spin {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0.15;\n }\n}\n@media (prefers-reduced-motion) {\n [data-sonner-toast],\n [data-sonner-toast] > *,\n .sonner-loading-bar {\n transition: none !important;\n animation: none !important;\n }\n}\n.sonner-loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transform-origin: center;\n transition: opacity 200ms, transform 200ms;\n}\n.sonner-loader[data-visible=false] {\n opacity: 0;\n transform: scale(0.8) translate(-50%, -50%);\n}\n'); | ||
| var _tmpl$ = /* @__PURE__ */ template(`<div class="sonner-loading-wrapper"><div class="sonner-spinner">`); | ||
| var _tmpl$2 = /* @__PURE__ */ template(`<div class="sonner-loading-bar">`); | ||
| var _tmpl$3 = /* @__PURE__ */ template(`<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">`); | ||
| var _tmpl$4 = /* @__PURE__ */ template(`<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">`); | ||
| var _tmpl$5 = /* @__PURE__ */ template(`<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">`); | ||
| var _tmpl$6 = /* @__PURE__ */ template(`<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">`); | ||
| var _tmpl$ = /* @__PURE__ */ template(`<div class=sonner-loading-wrapper><div class=sonner-spinner>`); | ||
| var _tmpl$2 = /* @__PURE__ */ template(`<div class=sonner-loading-bar>`); | ||
| var _tmpl$3 = /* @__PURE__ */ template(`<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>`); | ||
| var _tmpl$4 = /* @__PURE__ */ template(`<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>`); | ||
| var _tmpl$5 = /* @__PURE__ */ template(`<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>`); | ||
| var _tmpl$6 = /* @__PURE__ */ template(`<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>`); | ||
| var bars = Array(12).fill(0); | ||
@@ -184,3 +184,6 @@ function Loader(props) { | ||
| }; | ||
| // 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()? | ||
| loading = (message, data) => { | ||
| return this.create({ ...data, type: "loading", message }); | ||
| }; | ||
| // We can't provide the toast we just created as a prop as we didn't create it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()? | ||
| custom = (jsx, data) => { | ||
@@ -211,3 +214,4 @@ const id = data?.id || toastsCounter++; | ||
| promise: ToastState.promise, | ||
| dismiss: ToastState.dismiss | ||
| dismiss: ToastState.dismiss, | ||
| loading: ToastState.loading | ||
| }); | ||
@@ -229,5 +233,5 @@ function useIsDocumentHidden() { | ||
| // src/index.tsx | ||
| var _tmpl$7 = /* @__PURE__ */ template(`<div class="sonner-loader">`); | ||
| var _tmpl$22 = /* @__PURE__ */ template(`<button aria-label="Close toast" data-close-button><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">`); | ||
| var _tmpl$32 = /* @__PURE__ */ template(`<li aria-atomic="true" role="status" tabindex="0" data-sonner-toast="">`); | ||
| var _tmpl$7 = /* @__PURE__ */ template(`<div class=sonner-loader>`); | ||
| var _tmpl$22 = /* @__PURE__ */ template(`<button aria-label="Close toast"data-close-button><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>`); | ||
| var _tmpl$32 = /* @__PURE__ */ template(`<li aria-atomic=true role=status tabindex=0 data-sonner-toast="">`); | ||
| var _tmpl$42 = /* @__PURE__ */ template(`<div data-icon="">`); | ||
@@ -238,4 +242,4 @@ var _tmpl$52 = /* @__PURE__ */ template(`<div data-description="">`); | ||
| var _tmpl$8 = /* @__PURE__ */ template(`<button data-button="">`); | ||
| var _tmpl$9 = /* @__PURE__ */ template(`<section tabindex="-1">`); | ||
| var _tmpl$10 = /* @__PURE__ */ template(`<ol tabindex="-1" data-sonner-toaster>`); | ||
| var _tmpl$9 = /* @__PURE__ */ template(`<section tabindex=-1>`); | ||
| var _tmpl$10 = /* @__PURE__ */ template(`<ol tabindex=-1 data-sonner-toaster>`); | ||
| var VISIBLE_TOASTS_AMOUNT = 3; | ||
@@ -242,0 +246,0 @@ var VIEWPORT_OFFSET = "32px"; |
+6
-2
@@ -187,3 +187,6 @@ // #style-inject:#style-inject | ||
| }; | ||
| // 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()? | ||
| loading = (message, data) => { | ||
| return this.create({ ...data, type: "loading", message }); | ||
| }; | ||
| // We can't provide the toast we just created as a prop as we didn't create it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()? | ||
| custom = (jsx, data) => { | ||
@@ -214,3 +217,4 @@ const id = data?.id || toastsCounter++; | ||
| promise: ToastState.promise, | ||
| dismiss: ToastState.dismiss | ||
| dismiss: ToastState.dismiss, | ||
| loading: ToastState.loading | ||
| }); | ||
@@ -217,0 +221,0 @@ |
+1
-0
@@ -110,2 +110,3 @@ import { JSX, Component } from 'solid-js'; | ||
| dismiss: (id?: number | string) => string | number | undefined; | ||
| loading: (message: string | JSX.Element, data?: ExternalToast) => string | number; | ||
| }; | ||
@@ -112,0 +113,0 @@ |
+17
-13
@@ -31,8 +31,8 @@ import { delegateEvents, createComponent, insert, use, setAttribute, effect, className, style, template, addEventListener, Dynamic } from 'solid-js/web'; | ||
| styleInject(':where(html[dir=ltr]),\n:where([data-sonner-toaster][dir=ltr]) {\n --toast-icon-margin-start: -3px;\n --toast-icon-margin-end: 4px;\n --toast-svg-margin-start: -1px;\n --toast-svg-margin-end: 0px;\n --toast-button-margin-start: auto;\n --toast-button-margin-end: 0;\n --toast-close-button-start: 0;\n --toast-close-button-end: unset;\n --toast-close-button-transform: translate(-35%, -35%);\n}\n:where(html[dir=rtl]),\n:where([data-sonner-toaster][dir=rtl]) {\n --toast-icon-margin-start: 4px;\n --toast-icon-margin-end: -3px;\n --toast-svg-margin-start: 0px;\n --toast-svg-margin-end: -1px;\n --toast-button-margin-start: 0;\n --toast-button-margin-end: auto;\n --toast-close-button-start: unset;\n --toast-close-button-end: 0;\n --toast-close-button-transform: translate(35%, -35%);\n}\n:where([data-sonner-toaster]) {\n position: fixed;\n width: var(--width);\n font-family:\n ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Helvetica Neue,\n Arial,\n Noto Sans,\n sans-serif,\n Apple Color Emoji,\n Segoe UI Emoji,\n Segoe UI Symbol,\n Noto Color Emoji;\n --gray1: hsl(0, 0%, 99%);\n --gray2: hsl(0, 0%, 97.3%);\n --gray3: hsl(0, 0%, 95.1%);\n --gray4: hsl(0, 0%, 93%);\n --gray5: hsl(0, 0%, 90.9%);\n --gray6: hsl(0, 0%, 88.7%);\n --gray7: hsl(0, 0%, 85.8%);\n --gray8: hsl(0, 0%, 78%);\n --gray9: hsl(0, 0%, 56.1%);\n --gray10: hsl(0, 0%, 52.3%);\n --gray11: hsl(0, 0%, 43.5%);\n --gray12: hsl(0, 0%, 9%);\n --border-radius: 8px;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n list-style: none;\n outline: none;\n z-index: 999999999;\n}\n:where([data-sonner-toaster][data-x-position=right]) {\n right: max(var(--offset), env(safe-area-inset-right));\n}\n:where([data-sonner-toaster][data-x-position=left]) {\n left: max(var(--offset), env(safe-area-inset-left));\n}\n:where([data-sonner-toaster][data-x-position=center]) {\n left: 50%;\n transform: translateX(-50%);\n}\n:where([data-sonner-toaster][data-y-position=top]) {\n top: max(var(--offset), env(safe-area-inset-top));\n}\n:where([data-sonner-toaster][data-y-position=bottom]) {\n bottom: max(var(--offset), env(safe-area-inset-bottom));\n}\n:where([data-sonner-toast]) {\n --y: translateY(100%);\n --lift-amount: calc(var(--lift) * var(--gap));\n z-index: var(--z-index);\n position: absolute;\n opacity: 0;\n transform: var(--y);\n filter: blur(0);\n touch-action: none;\n transition:\n transform 400ms,\n opacity 400ms,\n height 400ms,\n box-shadow 200ms;\n box-sizing: border-box;\n outline: none;\n overflow-wrap: anywhere;\n}\n:where([data-sonner-toast][data-styled=true]) {\n padding: 16px;\n background: var(--normal-bg);\n border: 1px solid var(--normal-border);\n color: var(--normal-text);\n border-radius: var(--border-radius);\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);\n width: var(--width);\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n:where([data-sonner-toast]:focus-visible) {\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);\n}\n:where([data-sonner-toast][data-y-position=top]) {\n top: 0;\n --y: translateY(-100%);\n --lift: 1;\n --lift-amount: calc(1 * var(--gap));\n}\n:where([data-sonner-toast][data-y-position=bottom]) {\n bottom: 0;\n --y: translateY(100%);\n --lift: -1;\n --lift-amount: calc(var(--lift) * var(--gap));\n}\n:where([data-sonner-toast]) :where([data-description]) {\n font-weight: 400;\n line-height: 1.4;\n color: inherit;\n}\n:where([data-sonner-toast]) :where([data-title]) {\n font-weight: 500;\n line-height: 1.5;\n color: inherit;\n}\n:where([data-sonner-toast]) :where([data-icon]) {\n display: flex;\n height: 16px;\n width: 16px;\n position: relative;\n justify-content: flex-start;\n align-items: center;\n flex-shrink: 0;\n margin-left: var(--toast-icon-margin-start);\n margin-right: var(--toast-icon-margin-end);\n}\n:where([data-sonner-toast][data-promise=true]) :where([data-icon]) > svg {\n opacity: 0;\n transform: scale(0.8);\n transform-origin: center;\n animation: sonner-fade-in 300ms ease forwards;\n}\n:where([data-sonner-toast]) :where([data-icon]) > * {\n flex-shrink: 0;\n}\n:where([data-sonner-toast]) :where([data-icon]) svg {\n margin-left: var(--toast-svg-margin-start);\n margin-right: var(--toast-svg-margin-end);\n}\n:where([data-sonner-toast]) :where([data-content]) {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n[data-sonner-toast][data-styled=true] [data-button] {\n border-radius: 4px;\n padding-left: 8px;\n padding-right: 8px;\n height: 24px;\n font-size: 12px;\n color: var(--normal-bg);\n background: var(--normal-text);\n margin-left: var(--toast-button-margin-start);\n margin-right: var(--toast-button-margin-end);\n border: none;\n cursor: pointer;\n outline: none;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n transition: opacity 400ms, box-shadow 200ms;\n}\n:where([data-sonner-toast]) :where([data-button]):focus-visible {\n box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);\n}\n:where([data-sonner-toast]) :where([data-button]):first-of-type {\n margin-left: var(--toast-button-margin-start);\n margin-right: var(--toast-button-margin-end);\n}\n:where([data-sonner-toast]) :where([data-cancel]) {\n color: var(--normal-text);\n background: rgba(0, 0, 0, 0.08);\n}\n:where([data-sonner-toast][data-theme=dark]) :where([data-cancel]) {\n background: rgba(255, 255, 255, 0.3);\n}\n:where([data-sonner-toast]) :where([data-close-button]) {\n position: absolute;\n left: var(--toast-close-button-start);\n right: var(--toast-close-button-end);\n top: 0;\n height: 20px;\n width: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n background: var(--gray1);\n color: var(--gray12);\n border: 1px solid var(--gray4);\n transform: var(--toast-close-button-transform);\n border-radius: 50%;\n cursor: pointer;\n z-index: 1;\n transition:\n opacity 100ms,\n background 200ms,\n border-color 200ms;\n}\n:where([data-sonner-toast]) :where([data-close-button]):focus-visible {\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);\n}\n:where([data-sonner-toast]) :where([data-disabled=true]) {\n cursor: not-allowed;\n}\n:where([data-sonner-toast]):hover :where([data-close-button]):hover {\n background: var(--gray2);\n border-color: var(--gray5);\n}\n:where([data-sonner-toast][data-swiping=true])::before {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n height: 100%;\n z-index: -1;\n}\n:where([data-sonner-toast][data-y-position=top][data-swiping=true])::before {\n bottom: 50%;\n transform: scaleY(3) translateY(50%);\n}\n:where([data-sonner-toast][data-y-position=bottom][data-swiping=true])::before {\n top: 50%;\n transform: scaleY(3) translateY(-50%);\n}\n:where([data-sonner-toast][data-swiping=false][data-removed=true])::before {\n content: "";\n position: absolute;\n inset: 0;\n transform: scaleY(2);\n}\n:where([data-sonner-toast])::after {\n content: "";\n position: absolute;\n left: 0;\n height: calc(var(--gap) + 1px);\n bottom: 100%;\n width: 100%;\n}\n:where([data-sonner-toast][data-mounted=true]) {\n --y: translateY(0);\n opacity: 1;\n}\n:where([data-sonner-toast][data-expanded=false][data-front=false]) {\n --scale: var(--toasts-before) * 0.05 + 1;\n --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));\n height: var(--front-toast-height);\n}\n:where([data-sonner-toast]) > * {\n transition: opacity 400ms;\n}\n:where([data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]) > * {\n opacity: 0;\n}\n:where([data-sonner-toast][data-visible=false]) {\n opacity: 0;\n pointer-events: none;\n}\n:where([data-sonner-toast][data-mounted=true][data-expanded=true]) {\n --y: translateY(calc(var(--lift) * var(--offset)));\n height: var(--initial-height);\n}\n:where([data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]) {\n --y: translateY(calc(var(--lift) * -100%));\n opacity: 0;\n}\n:where([data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]) {\n --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));\n opacity: 0;\n}\n:where([data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]) {\n --y: translateY(40%);\n opacity: 0;\n transition: transform 500ms, opacity 200ms;\n}\n:where([data-sonner-toast][data-removed=true][data-front=false])::before {\n height: calc(var(--initial-height) + 20%);\n}\n[data-sonner-toast][data-swiping=true] {\n transform: var(--y) translateY(var(--swipe-amount, 0px));\n transition: none;\n}\n[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],\n[data-sonner-toast][data-swipe-out=true][data-y-position=top] {\n animation: swipe-out 200ms ease-out forwards;\n}\n@keyframes swipe-out {\n from {\n transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));\n opacity: 1;\n }\n to {\n transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));\n opacity: 0;\n }\n}\n@media (max-width: 600px) {\n [data-sonner-toaster] {\n position: fixed;\n --mobile-offset: 16px;\n right: var(--mobile-offset);\n left: var(--mobile-offset);\n width: 100%;\n }\n [data-sonner-toaster] [data-sonner-toast] {\n left: 0;\n right: 0;\n width: calc(100% - var(--mobile-offset) * 2);\n }\n [data-sonner-toaster][data-x-position=left] {\n left: var(--mobile-offset);\n }\n [data-sonner-toaster][data-y-position=bottom] {\n bottom: 20px;\n }\n [data-sonner-toaster][data-y-position=top] {\n top: 20px;\n }\n [data-sonner-toaster][data-x-position=center] {\n left: var(--mobile-offset);\n right: var(--mobile-offset);\n transform: none;\n }\n}\n[data-sonner-toaster][data-theme=light] {\n --normal-bg: #fff;\n --normal-border: var(--gray4);\n --normal-text: var(--gray12);\n --success-bg: hsl(143, 85%, 96%);\n --success-border: hsl(145, 92%, 91%);\n --success-text: hsl(140, 100%, 27%);\n --info-bg: hsl(208, 100%, 97%);\n --info-border: hsl(221, 91%, 91%);\n --info-text: hsl(210, 92%, 45%);\n --warning-bg: hsl(49, 100%, 97%);\n --warning-border: hsl(49, 91%, 91%);\n --warning-text: hsl(31, 92%, 45%);\n --error-bg: hsl(359, 100%, 97%);\n --error-border: hsl(359, 100%, 94%);\n --error-text: hsl(360, 100%, 45%);\n}\n[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true] {\n --normal-bg: #000;\n --normal-border: hsl(0, 0%, 20%);\n --normal-text: var(--gray1);\n}\n[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true] {\n --normal-bg: #fff;\n --normal-border: var(--gray3);\n --normal-text: var(--gray12);\n}\n[data-sonner-toaster][data-theme=dark] {\n --normal-bg: #000;\n --normal-border: hsl(0, 0%, 20%);\n --normal-text: var(--gray1);\n --success-bg: hsl(150, 100%, 6%);\n --success-border: hsl(147, 100%, 12%);\n --success-text: hsl(150, 86%, 65%);\n --info-bg: hsl(215, 100%, 6%);\n --info-border: hsl(223, 100%, 12%);\n --info-text: hsl(216, 87%, 65%);\n --warning-bg: hsl(64, 100%, 6%);\n --warning-border: hsl(60, 100%, 12%);\n --warning-text: hsl(46, 87%, 65%);\n --error-bg: hsl(358, 76%, 10%);\n --error-border: hsl(357, 89%, 16%);\n --error-text: hsl(358, 100%, 81%);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=success] {\n background: var(--success-bg);\n border-color: var(--success-border);\n color: var(--success-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=success] [data-close-button] {\n background: var(--success-bg);\n border-color: var(--success-border);\n color: var(--success-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=info] {\n background: var(--info-bg);\n border-color: var(--info-border);\n color: var(--info-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=info] [data-close-button] {\n background: var(--info-bg);\n border-color: var(--info-border);\n color: var(--info-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=warning] {\n background: var(--warning-bg);\n border-color: var(--warning-border);\n color: var(--warning-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=warning] [data-close-button] {\n background: var(--warning-bg);\n border-color: var(--warning-border);\n color: var(--warning-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=error] {\n background: var(--error-bg);\n border-color: var(--error-border);\n color: var(--error-text);\n}\n[data-rich-colors=true] [data-sonner-toast][data-type=error] [data-close-button] {\n background: var(--error-bg);\n border-color: var(--error-border);\n color: var(--error-text);\n}\n.sonner-loading-wrapper {\n --size: 16px;\n height: var(--size);\n width: var(--size);\n position: absolute;\n inset: 0;\n z-index: 10;\n}\n.sonner-loading-wrapper[data-visible=false] {\n transform-origin: center;\n animation: sonner-fade-out 0.2s ease forwards;\n}\n.sonner-spinner {\n position: relative;\n top: 50%;\n left: 50%;\n height: var(--size);\n width: var(--size);\n}\n.sonner-loading-bar {\n animation: sonner-spin 1.2s linear infinite;\n background: var(--gray11);\n border-radius: 6px;\n height: 8%;\n left: -10%;\n position: absolute;\n top: -3.9%;\n width: 24%;\n}\n.sonner-loading-bar:nth-child(1) {\n animation-delay: -1.2s;\n transform: rotate(0.0001deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(2) {\n animation-delay: -1.1s;\n transform: rotate(30deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(3) {\n animation-delay: -1s;\n transform: rotate(60deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(4) {\n animation-delay: -0.9s;\n transform: rotate(90deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(5) {\n animation-delay: -0.8s;\n transform: rotate(120deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(6) {\n animation-delay: -0.7s;\n transform: rotate(150deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(7) {\n animation-delay: -0.6s;\n transform: rotate(180deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(8) {\n animation-delay: -0.5s;\n transform: rotate(210deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(9) {\n animation-delay: -0.4s;\n transform: rotate(240deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(10) {\n animation-delay: -0.3s;\n transform: rotate(270deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(11) {\n animation-delay: -0.2s;\n transform: rotate(300deg) translate(146%);\n}\n.sonner-loading-bar:nth-child(12) {\n animation-delay: -0.1s;\n transform: rotate(330deg) translate(146%);\n}\n@keyframes sonner-fade-in {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes sonner-fade-out {\n 0% {\n opacity: 1;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(0.8);\n }\n}\n@keyframes sonner-spin {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0.15;\n }\n}\n@media (prefers-reduced-motion) {\n [data-sonner-toast],\n [data-sonner-toast] > *,\n .sonner-loading-bar {\n transition: none !important;\n animation: none !important;\n }\n}\n.sonner-loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transform-origin: center;\n transition: opacity 200ms, transform 200ms;\n}\n.sonner-loader[data-visible=false] {\n opacity: 0;\n transform: scale(0.8) translate(-50%, -50%);\n}\n'); | ||
| var _tmpl$ = /* @__PURE__ */ template(`<div class="sonner-loading-wrapper"><div class="sonner-spinner">`); | ||
| var _tmpl$2 = /* @__PURE__ */ template(`<div class="sonner-loading-bar">`); | ||
| var _tmpl$3 = /* @__PURE__ */ template(`<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">`); | ||
| var _tmpl$4 = /* @__PURE__ */ template(`<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">`); | ||
| var _tmpl$5 = /* @__PURE__ */ template(`<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">`); | ||
| var _tmpl$6 = /* @__PURE__ */ template(`<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">`); | ||
| var _tmpl$ = /* @__PURE__ */ template(`<div class=sonner-loading-wrapper><div class=sonner-spinner>`); | ||
| var _tmpl$2 = /* @__PURE__ */ template(`<div class=sonner-loading-bar>`); | ||
| var _tmpl$3 = /* @__PURE__ */ template(`<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>`); | ||
| var _tmpl$4 = /* @__PURE__ */ template(`<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>`); | ||
| var _tmpl$5 = /* @__PURE__ */ template(`<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>`); | ||
| var _tmpl$6 = /* @__PURE__ */ template(`<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>`); | ||
| var bars = Array(12).fill(0); | ||
@@ -184,3 +184,6 @@ function Loader(props) { | ||
| }; | ||
| // 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()? | ||
| loading = (message, data) => { | ||
| return this.create({ ...data, type: "loading", message }); | ||
| }; | ||
| // We can't provide the toast we just created as a prop as we didn't create it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()? | ||
| custom = (jsx, data) => { | ||
@@ -211,3 +214,4 @@ const id = data?.id || toastsCounter++; | ||
| promise: ToastState.promise, | ||
| dismiss: ToastState.dismiss | ||
| dismiss: ToastState.dismiss, | ||
| loading: ToastState.loading | ||
| }); | ||
@@ -229,5 +233,5 @@ function useIsDocumentHidden() { | ||
| // src/index.tsx | ||
| var _tmpl$7 = /* @__PURE__ */ template(`<div class="sonner-loader">`); | ||
| var _tmpl$22 = /* @__PURE__ */ template(`<button aria-label="Close toast" data-close-button><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">`); | ||
| var _tmpl$32 = /* @__PURE__ */ template(`<li aria-atomic="true" role="status" tabindex="0" data-sonner-toast="">`); | ||
| var _tmpl$7 = /* @__PURE__ */ template(`<div class=sonner-loader>`); | ||
| var _tmpl$22 = /* @__PURE__ */ template(`<button aria-label="Close toast"data-close-button><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>`); | ||
| var _tmpl$32 = /* @__PURE__ */ template(`<li aria-atomic=true role=status tabindex=0 data-sonner-toast="">`); | ||
| var _tmpl$42 = /* @__PURE__ */ template(`<div data-icon="">`); | ||
@@ -238,4 +242,4 @@ var _tmpl$52 = /* @__PURE__ */ template(`<div data-description="">`); | ||
| var _tmpl$8 = /* @__PURE__ */ template(`<button data-button="">`); | ||
| var _tmpl$9 = /* @__PURE__ */ template(`<section tabindex="-1">`); | ||
| var _tmpl$10 = /* @__PURE__ */ template(`<ol tabindex="-1" data-sonner-toaster>`); | ||
| var _tmpl$9 = /* @__PURE__ */ template(`<section tabindex=-1>`); | ||
| var _tmpl$10 = /* @__PURE__ */ template(`<ol tabindex=-1 data-sonner-toaster>`); | ||
| var VISIBLE_TOASTS_AMOUNT = 3; | ||
@@ -242,0 +246,0 @@ var VIEWPORT_OFFSET = "32px"; |
+6
-2
@@ -187,3 +187,6 @@ // #style-inject:#style-inject | ||
| }; | ||
| // 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()? | ||
| loading = (message, data) => { | ||
| return this.create({ ...data, type: "loading", message }); | ||
| }; | ||
| // We can't provide the toast we just created as a prop as we didn't create it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()? | ||
| custom = (jsx, data) => { | ||
@@ -214,3 +217,4 @@ const id = data?.id || toastsCounter++; | ||
| promise: ToastState.promise, | ||
| dismiss: ToastState.dismiss | ||
| dismiss: ToastState.dismiss, | ||
| loading: ToastState.loading | ||
| }); | ||
@@ -217,0 +221,0 @@ |
+12
-12
| { | ||
| "name": "solid-sonner", | ||
| "type": "module", | ||
| "version": "0.2.6", | ||
| "version": "0.2.7", | ||
| "private": false, | ||
| "packageManager": "pnpm@8.15.1", | ||
| "packageManager": "pnpm@9.1.1", | ||
| "description": "An opinionated toast component for Solid.", | ||
@@ -63,17 +63,17 @@ "author": "Robert Soriano <sorianorobertc@gmail.com>", | ||
| "@antfu/eslint-config-ts": "^0.43.1", | ||
| "@playwright/test": "^1.41.2", | ||
| "@types/node": "^20.11.17", | ||
| "bumpp": "^9.4.0", | ||
| "@playwright/test": "^1.44.0", | ||
| "@types/node": "^20.12.12", | ||
| "bumpp": "^9.4.1", | ||
| "copy-to-clipboard": "^3.3.3", | ||
| "esbuild": "^0.20.0", | ||
| "esbuild-plugin-solid": "^0.5.0", | ||
| "eslint": "^8.56.0", | ||
| "eslint-plugin-solid": "^0.13.2", | ||
| "esbuild": "^0.21.3", | ||
| "esbuild-plugin-solid": "^0.6.0", | ||
| "eslint": "^9.2.0", | ||
| "eslint-plugin-solid": "^0.14.0", | ||
| "highlight.js": "^11.9.0", | ||
| "jsdom": "^24.0.0", | ||
| "solid-js": "^1.8.16", | ||
| "solid-js": "^1.8.17", | ||
| "tsup": "^8.0.2", | ||
| "tsup-preset-solid": "^2.2.0", | ||
| "typescript": "^5.3.3", | ||
| "vite": "^5.2.8", | ||
| "typescript": "^5.4.5", | ||
| "vite": "^5.2.11", | ||
| "vite-plugin-solid": "^2.10.2" | ||
@@ -80,0 +80,0 @@ }, |
+8
-0
@@ -130,2 +130,10 @@ <p> | ||
| ### Loading | ||
| Renders a toast with a loading spinner. Useful when you want to handle various states yourself instead of using a promise toast. | ||
| ```jsx | ||
| toast.loading('Loading data') | ||
| ``` | ||
| ### Custom JSX | ||
@@ -132,0 +140,0 @@ |
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
196123
0.3%- Lines of code
3504
0.49%- Number of lines in readme file
356
2.3%No dependency changes