{"_id":"@afreidz/svelte-sonner","_rev":"3-dd27f17a51bf19f5a32420f259a80511","name":"@afreidz/svelte-sonner","dist-tags":{"latest":"0.3.31"},"versions":{"0.3.26":{"name":"@afreidz/svelte-sonner","version":"0.3.26","keywords":["svelte","toast"],"author":{"name":"Robert Soriano","email":"sorianorobertc@gmail.com"},"license":"MIT","_id":"@afreidz/svelte-sonner@0.3.26","maintainers":[{"name":"afreidz","email":"afreidenfelds@gmail.com"}],"dist":{"shasum":"25735ee3a026f879899372b5edd5cb1425c3bdc7","tarball":"https://registry.npmjs.org/@afreidz/svelte-sonner/-/svelte-sonner-0.3.26.tgz","fileCount":23,"integrity":"sha512-HCi8P3+UjY6wnnak9D6xUFAz0cR3T9NcBvGHp/T+u+mvmSKJkyyg5NiqxAx0mnHDSSIiwS9F0J5MwCmYpeW46A==","signatures":[{"sig":"MEQCIAbAMvq9aCpwNqHixwNh7ZsZwLisBEOJkHBZD4x31N90AiAnuy6Ga8tzQNo7AsneXjkSFrSQggFSFVSmRBYaCBmh+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":67682},"type":"module","_from":"file:afreidz-svelte-sonner-0.3.26.tgz","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","svelte":"./dist/index.js"}},"scripts":{"dev":"vite dev","lint":"eslint .","test":"playwright test","build":"vite build && npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","package":"svelte-kit sync && svelte-package && publint","preview":"vite preview","release":"pnpm run package && changeset publish","test:unit":"vitest","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"},"_npmUser":{"name":"afreidz","email":"afreidenfelds@gmail.com"},"_resolved":"/private/var/folders/f3/3g1kcqmd0_n_fg8phwfcf0kc0000gn/T/9fa4f69bbae138b81c19cc2ec65eb0b1/afreidz-svelte-sonner-0.3.26.tgz","_integrity":"sha512-HCi8P3+UjY6wnnak9D6xUFAz0cR3T9NcBvGHp/T+u+mvmSKJkyyg5NiqxAx0mnHDSSIiwS9F0J5MwCmYpeW46A==","_npmVersion":"10.8.3","description":"An opinionated toast component for Svelte.","directories":{},"_nodeVersion":"22.9.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.8","jsdom":"^24.1.0","tslib":"^2.7.0","eslint":"^9.12.0","svelte":"5.0.0-next.262","vitest":"^2.1.2","globals":"^15.10.0","publint":"^0.2.2","prettier":"^3.2.5","typescript":"^5.6.2","highlight.js":"^11.8.0","mode-watcher":"^0.4.1","svelte-check":"^4.0.4","@sveltejs/kit":"^2.6.2","@types/eslint":"^9.6.1","@changesets/cli":"^2.27.1","@types/jest-axe":"^3.5.9","@playwright/test":"^1.38.0","@sveltejs/package":"^2.3.2","copy-to-clipboard":"^3.3.3","svelte-preprocess":"^6.0.3","typescript-eslint":"^8.8.0","@testing-library/dom":"^10.3.1","eslint-plugin-svelte":"^2.44.1","@sveltejs/adapter-auto":"^3.2.5","eslint-config-prettier":"^9.1.0","prettier-plugin-svelte":"^3.2.7","@testing-library/svelte":"^5.2.3","@testing-library/jest-dom":"^6.4.6","@typescript-eslint/parser":"^6.7.2","@testing-library/user-event":"^14.5.2","@sveltejs/vite-plugin-svelte":"4.0.0-next.7","@types/testing-library__jest-dom":"^5.14.9","@typescript-eslint/eslint-plugin":"^6.7.2","@svitejs/changesets-changelog-github-compact":"^1.1.0"},"peerDependencies":{"svelte":"^5.0.0-next.1"},"_npmOperationalInternal":{"tmp":"tmp/svelte-sonner_0.3.26_1729528911937_0.8081729318978166","host":"s3://npm-registry-packages"}},"0.3.27":{"name":"@afreidz/svelte-sonner","version":"0.3.27","keywords":["svelte","toast"],"author":{"name":"Robert Soriano","email":"sorianorobertc@gmail.com"},"license":"MIT","_id":"@afreidz/svelte-sonner@0.3.27","maintainers":[{"name":"afreidz","email":"afreidenfelds@gmail.com"}],"dist":{"shasum":"cd5e7623059116a012f3e8b85bd9e7de5c7389b0","tarball":"https://registry.npmjs.org/@afreidz/svelte-sonner/-/svelte-sonner-0.3.27.tgz","fileCount":23,"integrity":"sha512-/c4Hwc5Pg1t69f6lJONAfffoDzYJ5/N8Vpoqv2aH5JrNl9EWoMJMOfFX+T4j8U3/fbdsrayMYNggWnsGovginA==","signatures":[{"sig":"MEUCIDZybltVGD1tj0p8DtzejN9Wz1ZWMqVIY9mQx/VxsDocAiEA5pao5u8g0AdJrIklL1KCTtGbUBqmFFNDgN4PSrhtrqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":67022},"type":"module","_from":"file:afreidz-svelte-sonner-0.3.27.tgz","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","svelte":"./dist/index.js"}},"scripts":{"dev":"vite dev","lint":"eslint .","test":"playwright test","build":"vite build && npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","package":"svelte-kit sync && svelte-package && publint","preview":"vite preview","release":"pnpm run package && changeset publish","test:unit":"vitest","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"},"_npmUser":{"name":"afreidz","email":"afreidenfelds@gmail.com"},"_resolved":"/private/var/folders/f3/3g1kcqmd0_n_fg8phwfcf0kc0000gn/T/b85038387519bd64f24a5ccb7dbb0e41/afreidz-svelte-sonner-0.3.27.tgz","_integrity":"sha512-/c4Hwc5Pg1t69f6lJONAfffoDzYJ5/N8Vpoqv2aH5JrNl9EWoMJMOfFX+T4j8U3/fbdsrayMYNggWnsGovginA==","_npmVersion":"10.8.3","description":"An opinionated toast component for Svelte.","directories":{},"_nodeVersion":"22.9.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.8","jsdom":"^24.1.0","tslib":"^2.7.0","eslint":"^9.12.0","svelte":"5.0.0-next.262","vitest":"^2.1.2","globals":"^15.10.0","publint":"^0.2.2","prettier":"^3.2.5","typescript":"^5.6.2","highlight.js":"^11.8.0","mode-watcher":"^0.4.1","svelte-check":"^4.0.4","@sveltejs/kit":"^2.6.2","@types/eslint":"^9.6.1","@changesets/cli":"^2.27.1","@types/jest-axe":"^3.5.9","@playwright/test":"^1.38.0","@sveltejs/package":"^2.3.2","copy-to-clipboard":"^3.3.3","svelte-preprocess":"^6.0.3","typescript-eslint":"^8.8.0","@testing-library/dom":"^10.3.1","eslint-plugin-svelte":"^2.44.1","@sveltejs/adapter-auto":"^3.2.5","eslint-config-prettier":"^9.1.0","prettier-plugin-svelte":"^3.2.7","@testing-library/svelte":"^5.2.3","@testing-library/jest-dom":"^6.4.6","@typescript-eslint/parser":"^6.7.2","@testing-library/user-event":"^14.5.2","@sveltejs/vite-plugin-svelte":"4.0.0-next.7","@types/testing-library__jest-dom":"^5.14.9","@typescript-eslint/eslint-plugin":"^6.7.2","@svitejs/changesets-changelog-github-compact":"^1.1.0"},"peerDependencies":{"svelte":"^5.0.0-next.1"},"_npmOperationalInternal":{"tmp":"tmp/svelte-sonner_0.3.27_1729529224742_0.17913999365632693","host":"s3://npm-registry-packages"}},"0.3.30":{"name":"@afreidz/svelte-sonner","version":"0.3.30","keywords":["svelte","toast"],"author":{"name":"Robert Soriano","email":"sorianorobertc@gmail.com"},"license":"MIT","_id":"@afreidz/svelte-sonner@0.3.30","maintainers":[{"name":"afreidz","email":"afreidenfelds@gmail.com"}],"dist":{"shasum":"591f4e454f787b89676168345413c560a9540860","tarball":"https://registry.npmjs.org/@afreidz/svelte-sonner/-/svelte-sonner-0.3.30.tgz","fileCount":23,"integrity":"sha512-vm/Ryo/6SrdBiEd4yUfn0ARwEghPc06zPsWKzcZbgWSWB7o6kNf71Ji2vjgUMMN0nWaxhoj8dA6/wOhCoM0oUg==","signatures":[{"sig":"MEUCIFnYz+kvYqojN8vURAeCseoDLhl2bDvmFVA+7dkh9BtWAiEAzyjyyO1TAapV5ujbVa1gnyUAjDVCS6VsrLtE3l45uMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71027},"type":"module","_from":"file:afreidz-svelte-sonner-0.3.30.tgz","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","svelte":"./dist/index.js"}},"scripts":{"dev":"vite dev","lint":"eslint .","test":"playwright test","build":"vite build && npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","package":"svelte-kit sync && svelte-package && publint","preview":"vite preview","release":"pnpm run package && changeset publish","test:unit":"vitest","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"},"_npmUser":{"name":"afreidz","email":"afreidenfelds@gmail.com"},"_resolved":"/private/var/folders/f3/3g1kcqmd0_n_fg8phwfcf0kc0000gn/T/7781e46bdb5b7befeadabb33ab6bdc54/afreidz-svelte-sonner-0.3.30.tgz","_integrity":"sha512-vm/Ryo/6SrdBiEd4yUfn0ARwEghPc06zPsWKzcZbgWSWB7o6kNf71Ji2vjgUMMN0nWaxhoj8dA6/wOhCoM0oUg==","_npmVersion":"10.8.3","description":"An opinionated toast component for Svelte.","directories":{},"_nodeVersion":"22.9.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.67.0","vite":"^5.4.4","bumpp":"^9.2.0","jsdom":"22.1.0","tslib":"^2.6.2","eslint":"^8.49.0","svelte":"^5.0.0","vitest":"^1.0.0","publint":"^0.2.2","prettier":"^3.1.1","typescript":"^5.5.0","highlight.js":"^11.8.0","mode-watcher":"^0.1.2","svelte-check":"^4.0.0","@sveltejs/kit":"^2.5.27","@changesets/cli":"^2.27.1","@types/jest-axe":"^3.5.9","@playwright/test":"^1.38.0","@sveltejs/package":"^2.2.2","copy-to-clipboard":"^3.3.3","svelte-preprocess":"^6.0.0","@testing-library/dom":"9.3.1","eslint-plugin-svelte":"^2.45.1","@sveltejs/adapter-auto":"^3.0.0","eslint-config-prettier":"^9.1.0","prettier-plugin-svelte":"^3.2.6","@testing-library/svelte":"4.0.5","@testing-library/jest-dom":"5.17.0","@typescript-eslint/parser":"^6.7.2","@testing-library/user-event":"14.4.3","@sveltejs/vite-plugin-svelte":"^4.0.0","@types/testing-library__jest-dom":"^5.14.9","@typescript-eslint/eslint-plugin":"^6.7.2","@svitejs/changesets-changelog-github-compact":"^1.1.0"},"peerDependencies":{"svelte":"^3.0.0 || ^4.0.0 || ^5.0.0-next.1"},"_npmOperationalInternal":{"tmp":"tmp/svelte-sonner_0.3.30_1729698221020_0.6019992363902595","host":"s3://npm-registry-packages"}},"0.3.31":{"name":"@afreidz/svelte-sonner","description":"An opinionated toast component for Svelte.","license":"MIT","author":{"name":"Robert Soriano","email":"sorianorobertc@gmail.com"},"keywords":["svelte","toast"],"version":"0.3.31","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","import":"./dist/index.js"}},"peerDependencies":{"svelte":"^3.0.0 || ^4.0.0 || ^5.0.0-next.1"},"devDependencies":{"@changesets/cli":"^2.27.1","@playwright/test":"^1.38.0","@sveltejs/adapter-auto":"^3.0.0","@sveltejs/kit":"^2.5.27","@sveltejs/package":"^2.2.2","@sveltejs/vite-plugin-svelte":"^4.0.0","@svitejs/changesets-changelog-github-compact":"^1.1.0","@testing-library/dom":"9.3.1","@testing-library/jest-dom":"5.17.0","@testing-library/svelte":"4.0.5","@testing-library/user-event":"14.4.3","@types/jest-axe":"^3.5.9","@types/testing-library__jest-dom":"^5.14.9","@typescript-eslint/eslint-plugin":"^6.7.2","@typescript-eslint/parser":"^6.7.2","bumpp":"^9.2.0","copy-to-clipboard":"^3.3.3","eslint":"^8.49.0","eslint-config-prettier":"^9.1.0","eslint-plugin-svelte":"^2.45.1","highlight.js":"^11.8.0","jsdom":"22.1.0","mode-watcher":"^0.1.2","prettier":"^3.1.1","prettier-plugin-svelte":"^3.2.6","publint":"^0.2.2","sass":"^1.67.0","svelte":"^5.0.0","svelte-check":"^4.0.0","svelte-preprocess":"^6.0.0","tslib":"^2.6.2","typescript":"^5.5.0","vite":"^5.4.4","vitest":"^1.0.0"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","scripts":{"dev":"vite dev","build":"vite build && npm run package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","test":"playwright test","test:unit":"vitest","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","release":"pnpm run package && changeset publish","lint":"eslint .","format":"prettier --write ."},"_id":"@afreidz/svelte-sonner@0.3.31","_integrity":"sha512-y0tp2pN655Sr7yY/+BWMj5NDDakVeiBTpEfdab31m/yEdJUFo8Ep8lt4UqH0qVH8NjuFO3WB3oe0RB3eOTOfGQ==","_resolved":"/private/var/folders/f3/3g1kcqmd0_n_fg8phwfcf0kc0000gn/T/176ce59f310e5dacaf29855bdcda8552/afreidz-svelte-sonner-0.3.31.tgz","_from":"file:afreidz-svelte-sonner-0.3.31.tgz","_nodeVersion":"22.10.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-y0tp2pN655Sr7yY/+BWMj5NDDakVeiBTpEfdab31m/yEdJUFo8Ep8lt4UqH0qVH8NjuFO3WB3oe0RB3eOTOfGQ==","shasum":"a3ab3de864ba38b11a7ae976a95b583de4a8a131","tarball":"https://registry.npmjs.org/@afreidz/svelte-sonner/-/svelte-sonner-0.3.31.tgz","fileCount":23,"unpackedSize":71327,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEFFISgQNObXTVQCyn5fGk/x+NL6QTB1YFocjGGknMj7AiEAr20nLXuzZvh1+0CKs0NH7Z6njOScS3KmQaoU01sJRcM="}]},"_npmUser":{"name":"afreidz","email":"afreidenfelds@gmail.com"},"directories":{},"maintainers":[{"name":"afreidz","email":"afreidenfelds@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-sonner_0.3.31_1729700192822_0.5769385397892353"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-21T16:41:51.840Z","modified":"2024-10-23T16:16:33.244Z","0.3.26":"2024-10-21T16:41:52.283Z","0.3.27":"2024-10-21T16:47:04.973Z","0.3.30":"2024-10-23T15:43:41.279Z","0.3.31":"2024-10-23T16:16:33.051Z"},"author":{"name":"Robert Soriano","email":"sorianorobertc@gmail.com"},"license":"MIT","keywords":["svelte","toast"],"description":"An opinionated toast component for Svelte.","maintainers":[{"name":"afreidz","email":"afreidenfelds@gmail.com"}],"readme":"https://github.com/wobsoriano/svelte-sonner/assets/13049130/4b9c250f-1431-4130-9c5b-5a4f8b0210c5\n\n# svelte-sonner\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)\n\nAn opinionated toast component for Svelte.\n\nBased on [emilkowalski](https://github.com/emilkowalski)'s React [implementation](https://sonner.emilkowal.ski/).\n\n## Quick start\n\nInstall it:\n\n```bash\nnpm i svelte-sonner\n# or\nyarn add svelte-sonner\n# or\npnpm add svelte-sonner\n```\n\nAdd `<Toaster />` to your app, it will be the place where all your toasts will be rendered. After that, you can use `toast()` from anywhere in your app.\n\n```svelte\n<script>\n\timport { Toaster, toast } from 'svelte-sonner';\n</script>\n\n<Toaster />\n<button on:click={() => toast('My first toast')}>Give me a toast</button>\n```\n\n## Types\n\n### Default\n\nMost basic toast. You can customize it (and any other type) by passing an options object as the second argument.\n\n```js\ntoast('Event has been created');\n```\n\nWith custom icon and description:\n\n```js\nimport Icon from './Icon.svelte';\n\ntoast('Event has been created', {\n\tdescription: 'Monday, January 3rd at 6:00pm',\n\ticon: Icon\n});\n```\n\n### Success\n\nRenders a checkmark icon in front of the message.\n\n```js\ntoast.success('Event has been created');\n```\n\n### Info\n\nRenders a question mark icon in front of the message.\n\n```js\ntoast.info('Event has new information');\n```\n\n### Warning\n\nRenders a warning icon in front of the message.\n\n```js\ntoast.warning('Event has warning');\n```\n\n### Error\n\nRenders an error icon in front of the message.\n\n```js\ntoast.error('Event has not been created');\n```\n\n### Action\n\nRenders a button.\n\n```js\ntoast('Event has been created', {\n\taction: {\n\t\tlabel: 'Undo',\n\t\tonClick: () => console.log('Undo')\n\t}\n});\n```\n\n### Promise\n\nStarts in a loading state and will update automatically after the promise resolves or fails.\n\n```js\ntoast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {\n\tloading: 'Loading',\n\tsuccess: 'Success',\n\terror: 'Error'\n});\n```\n\nYou can pass a function to the success/error messages to incorporate the result/error of the promise.\n\n```js\ntoast.promise(promise, {\n\tloading: 'Loading...',\n\tsuccess: (data) => {\n\t\treturn `${data.name} has been added!`;\n\t},\n\terror: 'Error'\n});\n```\n\n### Custom Component\n\nYou can pass a component as the first argument instead of a string to render custom component while maintaining default styling. You can use the headless version below for a custom, unstyled toast.\n\n```js\ntoast(CustomComponent);\n```\n\n### Updating a toast\n\nYou can update a toast by using the `toast` function and passing it the id of the toast you want to update, the rest stays the same.\n\n```js\nconst toastId = toast('Sonner');\n\ntoast.success('Toast has been updated', {\n\tid: toastId\n});\n```\n\n## Customization\n\n### Headless\n\nYou can use `toast.custom` to render an unstyled toast with custom component while maintaining the functionality.\n\n```svelte\n<script>\n\timport { createEventDispatcher } from 'svelte';\n\n\tconst dispatch = createEventDispatcher();\n</script>\n\n<div>\n\tThis is a custom component <button on:click={() => dispatch('closeToast')}>close</button>\n</div>\n```\n\n```js\nimport HeadlessToast from './HeadlessToast.svelte';\n\ntoast.custom(HeadlessToast);\n```\n\n### Theme\n\nYou can change the theme using the `theme` prop. Default theme is light.\n\n```svelte\n<Toaster theme=\"dark\" />\n```\n\n### Position\n\nYou can change the position through the `position` prop on the `<Toaster />` component. Default is `bottom-right`.\n\n```svelte\n<!-- Available positions -->\n<!-- top-left, top-center, top-right, bottom-left, bottom-center, bottom-right -->\n\n<Toaster position=\"top-center\" />\n```\n\n### Expanded\n\nToasts can also be expanded by default through the `expand` prop. You can also change the amount of visible toasts which is 3 by default.\n\n```svelte\n<Toaster expand visibleToasts={9} />\n```\n\n### Styling\n\nStyling can be done globally via `toastOptions`, this way every toast will have the same styling.\n\n```svelte\n<Toaster\n\ttoastOptions={{\n\t\tstyle: 'background: red;',\n\t\tclass: 'my-toast',\n\t\tdescriptionClass: 'my-toast-description'\n\t}}\n/>\n```\n\nYou can also use the same props when calling `toast` to style a specific toast.\n\n```js\ntoast('Event has been created', {\n\tstyle: 'background: red;',\n\tclass: 'my-toast',\n\tdescriptionClass: 'my-toast-description'\n});\n```\n\n### Tailwind CSS\n\nThe preferred way to style the toasts with tailwind is by using the `unstyled` prop. That will give you an unstyled toast which you can then style with tailwind.\n\n```svelte\n<Toaster\n\ttoastOptions={{\n\t\tunstyled: true,\n\t\tclasses: {\n\t\t\ttoast: 'bg-blue-400',\n\t\t\ttitle: 'text-red-400',\n\t\t\tdescription: 'text-red-400',\n\t\t\tactionButton: 'bg-zinc-400',\n\t\t\tcancelButton: 'bg-orange-400',\n\t\t\tcloseButton: 'bg-lime-400'\n\t\t}\n\t}}\n/>\n```\n\nYou can do the same when calling `toast()`.\n\n```js\ntoast('Hello World', {\n\tunstyled: true,\n\tclasses: {\n\t\ttoast: 'bg-blue-400',\n\t\ttitle: 'text-red-400 text-2xl',\n\t\tdescription: 'text-red-400',\n\t\tactionButton: 'bg-zinc-400',\n\t\tcancelButton: 'bg-orange-400',\n\t\tcloseButton: 'bg-lime-400'\n\t}\n});\n```\n\nStyling per toast type is also possible.\n\n```svelte\n<Toaster\n\ttoastOptions={{\n\t\tunstyled: true,\n\t\tclasses: {\n\t\t\terror: 'bg-red-400',\n\t\t\tsuccess: 'text-green-400',\n\t\t\twarning: 'text-yellow-400',\n\t\t\tinfo: 'bg-blue-400'\n\t\t}\n\t}}\n/>\n```\n\n### Changing Icon\n\nYou can change the default icons using slots:\n\n```svelte\n<Toaster>\n\t<LoadingIcon slot=\"loading-icon\" />\n\t<SuccessIcon slot=\"success-icon\" />\n\t<ErrorIcon slot=\"error-icon\" />\n\t<InfoIcon slot=\"info-icon\" />\n\t<WarningIcon slot=\"warning-icon\" />\n</Toaster>\n```\n\n### Close button\n\nAdd a close button to all toasts that shows on hover by adding the `closeButton` prop.\n\n```svelte\n<Toaster closeButton />\n```\n\n### Rich colors\n\nYou can make error and success state more colorful by adding the `richColors` prop.\n\n```svelte\n<Toaster richColors />\n```\n\n### Custom offset\n\nOffset from the edges of the screen.\n\n```svelte\n<Toaster offset=\"80px\" />\n```\n\n### Programmatically remove toast\n\nTo remove a toast programmatically use `toast.dismiss(id)`.\n\n```js\nconst toastId = toast('Event has been created');\n\ntoast.dismiss(toastId);\n```\n\nTo remove a toast from inside a custom component, dispatch `closeToast`:\n\n```js\nimport { createEventDispatcher } from 'svelte';\n\nconst dispatch = createEventDispatcher();\n\ndispatch('closeToast');\n```\n\nYou can also dismiss all toasts at once by calling `toast.dismiss()` without an id.\n\n```js\ntoast.dismiss();\n```\n\n### Duration\n\nYou can change the duration of each toast by using the `duration` property, or change the duration of all toasts like this:\n\n```svelte\n<Toaster duration={10000} />\n```\n\n```js\ntoast('Event has been created', {\n\tduration: 10000\n});\n\n// Persisent toast\ntoast('Event has been created', {\n\tduration: Number.POSITIVE_INFINITY\n});\n```\n\n### On Close Callback\n\nYou can pass `onDismiss` and `onAutoClose` callbacks. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (`duration` prop).\n\n```js\ntoast('Event has been created', {\n\tonDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),\n\tonAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`)\n});\n```\n\n## Keyboard focus\n\nYou can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of `event.code` values for each key.\n\n```svelte\n<Toaster hotkey={['KeyC']} />\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}