create modal component

src/lib/components/Actions/Modal/Modal.stories.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import type { ComponentProps } from 'svelte';
+	import Modal from './Modal.svelte';
+	import ModalBody from './ModalBody.svelte';
+	import ModalActions from './ModalActions.svelte';
+	import Button from '../Button.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Actions/Modal',
+		component: Modal,
+		argTypes: {
+			open: {
+				control: 'boolean',
+				defaultValue: false,
+			},
+		},
+	});
+</script>
+
+{#snippet template({ children: _, ...props }: Partial<ComponentProps<typeof Modal>>)}
+	<Modal {...props}>
+		<ModalBody>
+			<h3 class="text-lg font-bold">Hello!</h3>
+			<p class="py-4">Press ESC key or click the button below to close</p>
+			<ModalActions>
+				<Button>Close</Button>
+			</ModalActions>
+		</ModalBody>
+	</Modal>
+{/snippet}
+
+<Story name="Default" children={template} />

src/lib/components/Actions/Modal/Modal.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = SvelteHTMLElements['dialog'] & {
+		backdrop?: boolean;
+		dialog?: HTMLDialogElement;
+	};
+
+	let { backdrop, dialog = $bindable(), children, class: className, ...props }: Props = $props();
+</script>
+
+<dialog {...props} class={twMerge('modal', clsx(className))} bind:this={dialog}>
+	{@render children?.()}
+	{#if backdrop}
+		<form method="dialog" class="modal-backdrop">
+			<button>close</button>
+		</form>
+	{/if}
+</dialog>

src/lib/components/Actions/Modal/ModalActions.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = SvelteHTMLElements['div'];
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<div {...props} class={twMerge('modal-action', clsx(className))}>
+	{@render children?.()}
+</div>

src/lib/components/Actions/Modal/ModalBody.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = SvelteHTMLElements['div'];
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<div {...props} class={twMerge('modal-box', clsx(className))}>
+	{@render children?.()}
+</div>

src/lib/components/Actions/Modal/index.ts

@@ -0,0 +1,3 @@
+export { default as Modal } from './Modal.svelte';
+export { default as ModalActions } from './ModalActions.svelte';
+export { default as ModalBody } from './ModalBody.svelte';

src/lib/components/Actions/index.ts

@@ -1 +1,2 @@
 export { default as Button } from './Button.svelte';
+export * from './Modal/';