Svelte 5 Only

.gitignore

@@ -1,7 +1,6 @@
 .DS_Store
 node_modules
 /build
-/dist
 /.svelte-kit
 /package
 .env

dist/README.md

@@ -0,0 +1,77 @@
+<img src="./header-image.png" alt="" />
+<p align="center">
+<img src="https://badgen.net/badge/license/MIT/blue" />
+<img src="https://badgen.net/npm/v/svelte-french-toast" />
+</p>
+<p align="center">
+<a href="https://svelte-french-toast.vercel.app">Website</a> · <a href="https://npmjs.com/package/svelte-french-toast">NPM Package</a>
+</p>
+
+# svelte-french-toast
+
+> Buttery smooth Svelte notifications.
+
+svelte-french-toast is a Svelte port of Timo Lins’s react-hot-toast, a lightweight, customizable, and beautiful-by-default toast notification library.
+
+## Installation
+
+Install the package with your favorite package manager:
+
+```
+npm install svelte-french-toast
+```
+
+```
+pnpm install svelte-french-toast
+```
+
+```
+yarn add svelte-french-toast
+```
+
+## Basic usage
+
+Mount a `<Toaster />` at the top level of your app and use the `toast` API to display toasts.
+
+```js
+<script>
+	import toast, {Toaster} from 'svelte-french-toast'
+
+	function handleClick() {
+		toast.success('Hello, world!')
+	}
+</script>
+
+<Toaster />
+<button type="button" on:click={handleClick}>Toast</button>
+```
+
+For more usage examples, see [the website](https://svelte-french-toast.vercel.app).
+
+## Thanks
+
+Thanks to the original author of React Hot Toast and its contributors.
+
+```
+MIT License
+
+Copyright (c) 2020 Timo Lins
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

dist/components/CheckmarkIcon.svelte

@@ -0,0 +1,71 @@
+<!-- Adapted from https://github.com/timolins/react-hot-toast -->
+<script lang="ts">
+	import type { IconTheme } from '../core/types';
+
+	interface Props {
+		primary?: IconTheme['primary'];
+		secondary?: IconTheme['secondary'];
+	}
+
+	let { primary = '#61d345', secondary = '#fff' }: Props = $props();
+</script>
+
+<div style:--primary={primary} style:--secondary={secondary}></div>
+
+<style>
+	div {
+		width: 20px;
+		opacity: 0;
+		height: 20px;
+		border-radius: 10px;
+		background: var(--primary, #61d345);
+		position: relative;
+		transform: rotate(45deg);
+		animation: circleAnimation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+		animation-delay: 100ms;
+	}
+
+	div::after {
+		content: '';
+		box-sizing: border-box;
+		animation: checkmarkAnimation 0.2s ease-out forwards;
+		opacity: 0;
+		animation-delay: 200ms;
+		position: absolute;
+		border-right: 2px solid;
+		border-bottom: 2px solid;
+		border-color: var(--secondary, #fff);
+		bottom: 6px;
+		left: 6px;
+		height: 10px;
+		width: 6px;
+	}
+
+	@keyframes circleAnimation {
+		from {
+			transform: scale(0) rotate(45deg);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1) rotate(45deg);
+			opacity: 1;
+		}
+	}
+
+	@keyframes checkmarkAnimation {
+		0% {
+			height: 0;
+			width: 0;
+			opacity: 0;
+		}
+		40% {
+			height: 0;
+			width: 6px;
+			opacity: 1;
+		}
+		100% {
+			opacity: 1;
+			height: 10px;
+		}
+	}
+</style>

dist/components/CheckmarkIcon.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { IconTheme } from '../core/types';
+declare const CheckmarkIcon: import("svelte").Component<{
+    primary?: IconTheme["primary"];
+    secondary?: IconTheme["secondary"];
+}, {}, "">;
+export default CheckmarkIcon;

dist/components/ErrorIcon.svelte

@@ -0,0 +1,81 @@
+<!-- Adapted from https://github.com/timolins/react-hot-toast -->
+<script lang="ts">
+	import type { IconTheme } from '../core/types';
+
+	interface Props {
+		primary?: IconTheme['primary'];
+		secondary?: IconTheme['secondary'];
+	}
+
+	let { primary = '#ff4b4b', secondary = '#fff' }: Props = $props();
+</script>
+
+<div style:--primary={primary} style:--secondary={secondary}></div>
+
+<style>
+	div {
+		width: 20px;
+		opacity: 0;
+		height: 20px;
+		border-radius: 10px;
+		background: var(--primary, #ff4b4b);
+		position: relative;
+		transform: rotate(45deg);
+		animation: circleAnimation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+		animation-delay: 100ms;
+	}
+
+	div::after,
+	div::before {
+		content: '';
+		animation: firstLineAnimation 0.15s ease-out forwards;
+		animation-delay: 150ms;
+		position: absolute;
+		border-radius: 3px;
+		opacity: 0;
+		background: var(--secondary, #fff);
+		bottom: 9px;
+		left: 4px;
+		height: 2px;
+		width: 12px;
+	}
+
+	div:before {
+		animation: secondLineAnimation 0.15s ease-out forwards;
+		animation-delay: 180ms;
+		transform: rotate(90deg);
+	}
+
+	@keyframes circleAnimation {
+		from {
+			transform: scale(0) rotate(45deg);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1) rotate(45deg);
+			opacity: 1;
+		}
+	}
+
+	@keyframes firstLineAnimation {
+		from {
+			transform: scale(0);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	@keyframes secondLineAnimation {
+		from {
+			transform: scale(0) rotate(90deg);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1) rotate(90deg);
+			opacity: 1;
+		}
+	}
+</style>

dist/components/ErrorIcon.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { IconTheme } from '../core/types';
+declare const ErrorIcon: import("svelte").Component<{
+    primary?: IconTheme["primary"];
+    secondary?: IconTheme["secondary"];
+}, {}, "">;
+export default ErrorIcon;

dist/components/LoaderIcon.svelte

@@ -0,0 +1,35 @@
+<!-- Adapted from https://github.com/timolins/react-hot-toast -->
+<script lang="ts">
+	import type { IconTheme } from '../core/types';
+
+	interface Props {
+		primary?: IconTheme['primary'];
+		secondary?: IconTheme['secondary'];
+	}
+
+	let { primary = '#616161', secondary = '#e0e0e0' }: Props = $props();
+</script>
+
+<div style:--primary={primary} style:--secondary={secondary}></div>
+
+<style>
+	div {
+		width: 12px;
+		height: 12px;
+		box-sizing: border-box;
+		border: 2px solid;
+		border-radius: 100%;
+		border-color: var(--secondary, #e0e0e0);
+		border-right-color: var(--primary, #616161);
+		animation: rotate 1s linear infinite;
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

dist/components/LoaderIcon.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { IconTheme } from '../core/types';
+declare const LoaderIcon: import("svelte").Component<{
+    primary?: IconTheme["primary"];
+    secondary?: IconTheme["secondary"];
+}, {}, "">;
+export default LoaderIcon;