add dialog component

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';