chore(Modal): improve spacing

src/runtime/components/Modal.vue

@@ -80,7 +80,7 @@ const ui = computed(() => tv({ extend: modal, slots: props.ui })({
 
       <DialogContent :class="ui.content({ class: props.class })" v-bind="contentProps" v-on="contentEvents">
         <slot name="content">
-          <div :class="ui.header({ body: !!$slots.body, footer: !!$slots.footer })">
+          <div :class="ui.header()">
             <slot name="header">
               <DialogTitle v-if="title || $slots.title" :class="ui.title()">
                 <slot name="title">
@@ -95,7 +95,7 @@ const ui = computed(() => tv({ extend: modal, slots: props.ui })({
               </DialogDescription>
 
               <DialogClose as-child>
-                <slot name="close">
+                <slot name="close" :class="ui.close()">
                   <UButton
                     v-if="close !== null"
                     :icon="appConfig.ui.icons.close"
@@ -114,7 +114,7 @@ const ui = computed(() => tv({ extend: modal, slots: props.ui })({
             <slot name="body" />
           </div>
 
-          <div v-if="$slots.footer" :class="ui.footer({ body: !!$slots.body })">
+          <div v-if="$slots.footer" :class="ui.footer()">
             <slot name="footer" />
           </div>
         </slot>

src/theme/modal.ts

@@ -1,26 +1,15 @@
 export default {
   slots: {
     overlay: 'fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75',
-    content: 'fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 focus:outline-none',
-    header: 'p-4 sm:px-6',
+    content: 'fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none',
+    header: 'px-4 py-5 sm:px-6',
     body: 'flex-1 p-4 sm:p-6',
     footer: 'flex items-center gap-x-1.5 p-4 sm:px-6',
     title: 'text-gray-900 dark:text-white font-semibold',
     description: 'mt-1 text-gray-500 dark:text-gray-400 text-sm',
-    close: 'absolute top-3 right-4'
+    close: 'absolute top-4 right-4'
   },
   variants: {
-    footer: {
-      true: {
-        header: 'pb-0'
-      }
-    },
-    body: {
-      true: {
-        header: 'pb-0',
-        footer: 'pt-0'
-      }
-    },
     transition: {
       true: {
         overlay: 'data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]',