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

@@ -1,10 +1,8 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import type { ComponentProps } from 'svelte';
+	import Button from './Button.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',
@@ -23,13 +21,11 @@
 {#snippet template({ children: _, ...props }: Partial<ComponentProps<typeof Modal>>)}
 	<Button onclick={() => dialog?.showModal()}>Open</Button>
 	<Modal {...props} backdrop bind:dialog>
-		<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 onclick={() => dialog?.close()}>Close</Button>
-			</ModalActions>
-		</ModalBody>
+		<h3 class="text-lg font-bold">Hello!</h3>
+		<p class="py-4">Press ESC key or click the button below to close</p>
+		{#snippet actions()}
+			<Button onclick={() => dialog?.close()}>Close</Button>
+		{/snippet}
 	</Modal>
 {/snippet}
 

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

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

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

@@ -1,13 +0,0 @@
-<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>

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

@@ -1,13 +0,0 @@
-<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>

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

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

packages/svelte/src/lib/components/Actions/index.ts

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