Modal: Close is a promise + onClickOutside

Make the modal closing function a promise as it's done asynchronously.
Add another optional callback that's called only in the case when clicking outside the modal.

packages/ui/src/lib/Modal.svelte

@@ -11,7 +11,17 @@
 		type?: 'info' | 'warning' | 'error' | 'success';
 		title?: string;
 		noPadding?: boolean;
+		/**
+		 * Callback to be called when the modal is closed.
+		 *
+		 * Whether closing by clicking outside the modal, subtmitting the form or calling the `close` function.
+		 * This is called after the closing animation is finished.
+		 */
 		onClose?: () => void;
+		/**
+		 * Callback to be called when the modal is closed by clicking outside the modal.
+		 */
+		onClickOutside?: () => void;
 		onSubmit?: (close: () => void) => void;
 		onKeyDown?: (e: KeyboardEvent) => void;
 		children: Snippet<[item: any, close: () => void]>;
@@ -23,6 +33,7 @@
 		title,
 		type = 'info',
 		onClose,
+		onClickOutside,
 		children,
 		controls,
 		onSubmit,
@@ -52,14 +63,20 @@
 		window.addEventListener('keydown', handleKeyDown);
 	}
 
-	export function close() {
+	export function close(): Promise<void> {
+		if (isClosing) return Promise.resolve();
+		if (!open) return Promise.resolve();
+
 		isClosing = true;
-		setTimeout(() => {
-			item = undefined;
-			open = false;
-			isClosing = false;
-			onClose?.();
-		}, 100); // This should match the duration of the closing animation
+		return new Promise((resolve) => {
+			setTimeout(() => {
+				item = undefined;
+				open = false;
+				isClosing = false;
+				onClose?.();
+				resolve();
+			}, 100); // This should match the duration of the closing animation
+		});
 	}
 
 	export const imports = {
@@ -79,6 +96,7 @@
 			e.stopPropagation();
 
 			if (e.target === e.currentTarget) {
+				onClickOutside?.();
 				close();
 			}
 		}}