add dialog component

src/app.html

@@ -5,6 +5,14 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
+		<!-- Work Sans font -->
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+			rel="stylesheet"
+		/>
+
 		<!-- Material Design Icons -->
 		<link
 			href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"

src/lib/Dialog.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { Portal } from '@jsrob/svelte-portal';
+	import { onMount, type Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+	import { fade } from 'svelte/transition';
+	import { flyAndScale } from './transition';
+	import Button from './Button.svelte';
+	import { X } from 'phosphor-svelte';
+
+	interface Props {
+		open?: boolean;
+		title: string;
+		description?: string;
+		size?: 'sm' | 'md' | 'lg' | 'max';
+		class?: ClassValue;
+		children?: Snippet;
+		controls?: Snippet;
+		onsubmit?: () => void;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		size = 'sm',
+		class: classValue,
+		children,
+		controls,
+		onsubmit
+	}: Props = $props();
+
+	let dialogContainer = $state<HTMLDivElement | null>(null);
+	let openSince = $state<Date | undefined>(undefined);
+
+	$effect(() => {
+		if (open) {
+			document.body.style.overflow = 'hidden';
+			openSince = new Date();
+		} else {
+			document.body.style.overflow = '';
+			openSince = undefined;
+		}
+	});
+
+	onMount(() => {
+		window.addEventListener('keydown', (e) => {
+			if (e.key === 'Escape' && open) {
+				open = false;
+			}
+		});
+
+		window.addEventListener('click', (e) => {
+			if (open && dialogContainer) {
+				if (openSince && new Date().getTime() - openSince.getTime() < 300) {
+					return; // Ignore clicks immediately after opening
+				}
+
+				const target = e.target as HTMLElement;
+				if (open && !dialogContainer.contains(target) && target !== dialogContainer) {
+					open = false;
+				}
+			}
+		});
+	});
+</script>
+
+<Portal target="body">
+	{#if open}
+		{@render dialog()}
+	{/if}
+</Portal>
+
+{#snippet dialog()}
+	<div
+		class={[
+			'fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm',
+			classValue
+		]}
+		transition:fade={{ duration: 150 }}
+	>
+		<div
+			bind:this={dialogContainer}
+			class={[
+				'relative max-h-[85vh] w-[90vw] rounded-xl bg-white p-6 shadow-lg',
+				size === 'sm' && 'max-w-[450px]',
+				size === 'md' && 'max-w-[650px]',
+				size === 'lg' && 'max-w-[850px]',
+				size === 'max' && 'max-w-[95vw]'
+			]}
+			transition:flyAndScale={{
+				duration: 150,
+				y: -8,
+				start: 0.96
+			}}
+		>
+			<h2 class="pointer-events-none mb-2 text-lg font-medium text-black select-none">{title}</h2>
+			{#if description}
+				<p class="mb-3 leading-normal text-zinc-600">
+					{description}
+				</p>
+			{/if}
+
+			{#if children}{@render children()}{:else}Dialog is empty{/if}
+
+			<div class="mt-6 flex justify-end gap-4">
+				{#if controls}{@render controls()}{:else}
+					<Button onclick={() => (open = false)}>Cancel</Button>
+					<Button onclick={() => onsubmit?.()}>OK</Button>
+				{/if}
+			</div>
+			<button
+				aria-label="close"
+				class="absolute top-4 right-4 inline-flex cursor-pointer items-center justify-center"
+				onclick={() => (open = false)}
+			>
+				<X size="1.5em" weight="bold" />
+			</button>
+		</div>
+	</div>
+{/snippet}

src/lib/index.ts

@@ -1,9 +1,10 @@
 // Reexport your entry components here
 export { default as Button } from './Button.svelte';
 export { default as CenterBox } from './CenterBox.svelte';
-export { default as Checkbox } from './Checkbox.svelte';
+export { default as Checkbox, type CheckboxState } from './Checkbox.svelte';
 export { default as Combobox, type ComboboxItem } from './Combobox.svelte';
 export { default as DateInput } from './DateInput.svelte';
+export { default as Dialog } from './Dialog.svelte';
 export { default as FramelessButton } from './FramelessButton.svelte';
 export { default as InjectGoogleMaps } from './InjectGoogleMaps.svelte';
 export { default as InjectUmami } from './InjectUmami.svelte';

src/lib/transition.ts

@@ -0,0 +1,62 @@
+import { cubicOut } from 'svelte/easing';
+import type { TransitionConfig } from 'svelte/transition';
+
+/**
+ * A utility function that converts a style object to a string.
+ * Credits: https://github.com/melt-ui/melt-ui/blob/42e2dd430c3e13f56062c4d610dabd84ea4e5517/src/lib/internal/helpers/style.ts
+ * License: MIT, https://github.com/melt-ui/melt-ui/blob/develop/LICENSE
+ *
+ * @param style - The style object to convert
+ * @returns The style object as a string
+ */
+export function styleToString(style: StyleObject): string {
+	return Object.keys(style).reduce((str, key) => {
+		if (style[key] === undefined) return str;
+		return str + `${key}:${style[key]};`;
+	}, '');
+}
+
+export type StyleObject = Record<string, number | string | undefined>;
+
+/**
+ * Credits: https://github.com/melt-ui/melt-ui/blob/develop/src/docs/utils/transition.ts
+ * License: MIT, https://github.com/melt-ui/melt-ui/blob/develop/LICENSE
+ * Thanks to the Melt-UI team for such an awesome library!https://github.com/melt-ui/melt-ui/blob/develop/src/docs/utils/transition.ts
+ */
+
+const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
+	const [minA, maxA] = scaleA;
+	const [minB, maxB] = scaleB;
+
+	const percentage = (valueA - minA) / (maxA - minA);
+	const valueB = percentage * (maxB - minB) + minB;
+
+	return valueB;
+};
+
+type FlyAndScaleOptions = {
+	x?: number;
+	y?: number;
+	start: number;
+	duration?: number;
+};
+export const flyAndScale = (node: HTMLElement, options: FlyAndScaleOptions): TransitionConfig => {
+	const style = getComputedStyle(node);
+	const transform = style.transform === 'none' ? '' : style.transform;
+
+	return {
+		duration: options.duration ?? 150,
+		delay: 0,
+		css: (t) => {
+			const x = scaleConversion(t, [0, 1], [options.x ?? 0, 0]);
+			const y = scaleConversion(t, [0, 1], [options.y ?? 0, 0]);
+			const scale = scaleConversion(t, [0, 1], [options.start, 1]);
+
+			return styleToString({
+				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+				opacity: t
+			});
+		},
+		easing: cubicOut
+	};
+};

src/routes/+page.svelte

@@ -3,6 +3,7 @@
 	import Checkbox from '$lib/Checkbox.svelte';
 	import Combobox from '$lib/Combobox.svelte';
 	import DateInput from '$lib/DateInput.svelte';
+	import Dialog from '$lib/Dialog.svelte';
 	import FramelessButton from '$lib/FramelessButton.svelte';
 	import InputGroup from '$lib/InputGroup.svelte';
 	import Link from '$lib/Link.svelte';
@@ -17,6 +18,7 @@
 	import ToggleSelect from '$lib/ToggleSelect.svelte';
 
 	let dateInputValue = $state<Date | undefined>(undefined);
+	let dialogOpen = $state(false);
 </script>
 
 <title>sui</title>
@@ -41,6 +43,8 @@
 		<FramelessButton icon="add">Click Me</FramelessButton>
 
 		<Link href="https://svelte.dev">Visit Svelte</Link>
+
+		<Button onclick={() => (dialogOpen = true)}>Open Dialog</Button>
 	</div>
 </div>
 
@@ -154,6 +158,18 @@
 	<ToggleSelect name="example-toggle-select">Toggle Me!</ToggleSelect>
 </div>
 
+<Dialog
+	bind:open={dialogOpen}
+	title="Dialog Title"
+	size="sm"
+	onsubmit={() => {
+		dialogOpen = false;
+		alert('Dialog submitted!');
+	}}
+>
+	<p>This is a dialog content area.</p>
+</Dialog>
+
 <style lang="postcss">
 	@reference '$lib/styles/tailwind.css';