@byyuurin/ui 0.3.0 → 0.4.0

package/dist/runtime/components/Carousel.vue

@@ -9,6 +9,7 @@ import { Primitive, useForwardProps } from "reka-ui";
 import { computed, onBeforeMount, onMounted, ref, watch } from "vue";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Button from "./Button.vue";
 const props = defineProps({
@@ -52,7 +53,7 @@ const { t, dir } = useLocale();
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.carousel));
-  return styler(props);
+  return styler(pick(props, ["orientation"]));
 });
 const rootProps = useForwardProps(reactivePick(props, "active", "align", "breakpoints", "containScroll", "dragFree", "dragThreshold", "duration", "inViewThreshold", "loop", "skipSnaps", "slidesToScroll", "startIndex", "watchDrag", "watchResize", "watchSlides", "watchFocus"));
 const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
@@ -189,70 +190,70 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive
-    :as="props.as"
-    role="region"
-    tabindex="0"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
-    aria-roledescription="carousel"
-    :data-orientation="props.orientation"
-    data-part="root"
-    @keydown="onKeyDown"
-  >
-    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
-      <div :class="ui.container({ class: props.ui?.container })" data-part="container">
-        <div
-          v-for="(item, index) in props.items"
-          :key="index"
-          v-bind="props.dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
-          :class="ui.item({ class: [props.ui?.item, ...isCarouselItem(item) ? [item.ui?.item, item.class] : []] })"
-          data-part="item"
-        >
-          <slot :item="item" :index="index"></slot>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="props.arrows || props.dots" :class="ui.controls({ class: props.ui?.controls })" data-part="controls">
-      <div v-if="props.arrows" :class="ui.arrows({ class: props.ui?.arrows })" data-part="arrows">
-        <Button
-          :disabled="!canScrollPrev"
-          :icon="prevIcon"
-          color="neutral"
-          variant="outline"
-          :aria-label="t('carousel.prev')"
-          v-bind="typeof props.prev === 'object' ? props.prev : void 0"
-          :class="ui.prev({ class: props.ui?.prev })"
-          data-part="prev"
-          @click="scrollPrev"
-        />
-        <Button
-          :disabled="!canScrollNext"
-          :icon="nextIcon"
-          color="neutral"
-          variant="outline"
-          :aria-label="t('carousel.next')"
-          v-bind="typeof props.next === 'object' ? props.next : void 0"
-          :class="ui.next({ class: props.ui?.next })"
-          data-part="next"
-          @click="scrollNext"
-        />
-      </div>
-
-      <div v-if="props.dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })" data-part="dots">
-        <template v-for="(_, index) in scrollSnaps" :key="index">
-          <button
-            type="button"
-            role="tab"
-            :aria-label="t('carousel.goto', { page: index + 1 })"
-            :aria-selected="selectedIndex === index"
-            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
-            data-part="dot"
-            :data-state="selectedIndex === index ? 'active' : void 0"
-            @click="scrollTo(index)"
-          ></button>
-        </template>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive
+    :as="props.as"
+    role="region"
+    tabindex="0"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    aria-roledescription="carousel"
+    :data-orientation="props.orientation"
+    data-part="root"
+    @keydown="onKeyDown"
+  >
+    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
+      <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+        <div
+          v-for="(item, index) in props.items"
+          :key="index"
+          v-bind="props.dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
+          :class="ui.item({ class: [props.ui?.item, ...isCarouselItem(item) ? [item.ui?.item, item.class] : []] })"
+          data-part="item"
+        >
+          <slot :item="item" :index="index"></slot>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="props.arrows || props.dots" :class="ui.controls({ class: props.ui?.controls })" data-part="controls">
+      <div v-if="props.arrows" :class="ui.arrows({ class: props.ui?.arrows })" data-part="arrows">
+        <Button
+          :disabled="!canScrollPrev"
+          :icon="prevIcon"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.prev')"
+          v-bind="typeof props.prev === 'object' ? props.prev : void 0"
+          :class="ui.prev({ class: props.ui?.prev })"
+          data-part="prev"
+          @click="scrollPrev"
+        />
+        <Button
+          :disabled="!canScrollNext"
+          :icon="nextIcon"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.next')"
+          v-bind="typeof props.next === 'object' ? props.next : void 0"
+          :class="ui.next({ class: props.ui?.next })"
+          data-part="next"
+          @click="scrollNext"
+        />
+      </div>
+
+      <div v-if="props.dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })" data-part="dots">
+        <template v-for="(_, index) in scrollSnaps" :key="index">
+          <button
+            type="button"
+            role="tab"
+            :aria-label="t('carousel.goto', { page: index + 1 })"
+            :aria-selected="selectedIndex === index"
+            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            data-part="dot"
+            :data-state="selectedIndex === index ? 'active' : void 0"
+            @click="scrollTo(index)"
+          ></button>
+        </template>
+      </div>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Checkbox.vue

@@ -8,6 +8,7 @@ import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } fr
 import { computed, useId } from "vue";
 import { useAppConfig } from "#imports";
 import { useFormField } from "../composables/useFormField";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -35,14 +36,15 @@ const emit = defineEmits(["update:modelValue", "change"]);
 const slots = defineSlots();
 const modelValue = useVModel(props, "modelValue", emit);
 const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
-const { id: _id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormField(props);
+const { id: _id, name, size, color, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormField(props);
 const id = _id.value ?? useId();
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.checkbox));
   return styler({
-    ...props,
+    ...pick(props, ["variant", "indicator", "required"]),
     size: size.value,
+    color: color.value,
     disabled: disabled.value
   });
 });
@@ -55,50 +57,50 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="props.variant && props.variant !== 'list' ? Label : props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.container({ class: props.ui?.container })" data-part="container">
-      <CheckboxRoot
-        v-bind="{ id, ...rootProps, ...$attrs, ...ariaAttrs, name, disabled }"
-        v-model="modelValue"
-        :class="ui.base({ class: props.ui?.base })"
-        data-part="base"
-        @update:model-value="onUpdate"
-      >
-        <template #default="{ modelValue }">
-          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
-            <Icon
-              v-if="modelValue === 'indeterminate'"
-              :name="props.indeterminateIcon || appConfig.ui.icons.minus"
-              :class="ui.icon({ class: props.ui?.icon })"
-              data-part="icon"
-            />
-            <Icon
-              v-else
-              :name="props.icon || appConfig.ui.icons.check"
-              :class="ui.icon({ class: props.ui?.icon })"
-              data-part="icon"
-            />
-          </CheckboxIndicator>
-        </template>
-      </CheckboxRoot>
-    </div>
-    <div v-if="props.label || !!slots.label || props.description || !!slots.description" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <component
-        :is="!props.variant || props.variant === 'list' ? Label : 'p'"
-        v-if="props.label || !!slots.label"
-        :for="id"
-        :class="ui.label({ class: props.ui?.label })"
-        data-part="label"
-      >
-        <slot name="label" :label="props.label">
-          {{ props.label }}
-        </slot>
-      </component>
-      <p v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
-        <slot name="description" :description="props.description">
-          {{ props.description }}
-        </slot>
-      </p>
-    </div>
-  </Primitive>
+  <Primitive :as="props.variant && props.variant !== 'list' ? Label : props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+      <CheckboxRoot
+        v-bind="{ id, ...rootProps, ...$attrs, ...ariaAttrs, name, disabled }"
+        v-model="modelValue"
+        :class="ui.base({ class: props.ui?.base })"
+        data-part="base"
+        @update:model-value="onUpdate"
+      >
+        <template #default="{ modelValue }">
+          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
+            <Icon
+              v-if="modelValue === 'indeterminate'"
+              :name="props.indeterminateIcon || appConfig.ui.icons.minus"
+              :class="ui.icon({ class: props.ui?.icon })"
+              data-part="icon"
+            />
+            <Icon
+              v-else
+              :name="props.icon || appConfig.ui.icons.check"
+              :class="ui.icon({ class: props.ui?.icon })"
+              data-part="icon"
+            />
+          </CheckboxIndicator>
+        </template>
+      </CheckboxRoot>
+    </div>
+    <div v-if="props.label || !!slots.label || props.description || !!slots.description" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <component
+        :is="!props.variant || props.variant === 'list' ? Label : 'p'"
+        v-if="props.label || !!slots.label"
+        :for="id"
+        :class="ui.label({ class: props.ui?.label })"
+        data-part="label"
+      >
+        <slot name="label" :label="props.label">
+          {{ props.label }}
+        </slot>
+      </component>
+      <p v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/CheckboxGroup.vue

@@ -8,7 +8,7 @@ import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from "reka-u
 import { computed, useId } from "vue";
 import { useAppConfig } from "#imports";
 import { useFormField } from "../composables/useFormField";
-import { get, omit } from "../utils";
+import { get, omit, pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Checkbox from "./Checkbox.vue";
 const props = defineProps({
@@ -91,41 +91,42 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.checkboxGroup));
   return styler({
-    ...props,
+    ...pick(props, ["required", "orientation", "variant"]),
     size: size.value,
-    color: color.value
+    color: color.value,
+    disabled: disabled.value
   });
 });
 </script>
 
 <template>
-  <CheckboxGroupRoot
-    v-bind="{ ...rootProps, id, name, disabled }"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-    @update:model-value="onUpdate"
-  >
-    <fieldset v-bind="ariaAttrs" :class="ui.fieldset({ class: props.ui?.fieldset })" data-part="fieldset">
-      <legend v-if="props.legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })" data-part="legend">
-        <slot name="legend">
-          {{ props.legend }}
-        </slot>
-      </legend>
-
-      <Checkbox
-        v-for="item in normalizedItems"
-        :key="item.id"
-        v-bind="{ ...item, ...checkboxProps, color, size, name }"
-        :variant="props.variant"
-        :disabled="item.disabled || disabled"
-        :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
-        :class="ui.item({ disabled: item.disabled || disabled, class: [props.ui?.item, item.ui?.item, item.class] })"
-        data-part="item"
-      >
-        <template v-for="(_, name) in getProxySlots()" #[name]>
-          <slot :name="name" :item="item"></slot>
-        </template>
-      </Checkbox>
-    </fieldset>
-  </CheckboxGroupRoot>
+  <CheckboxGroupRoot
+    v-bind="{ ...rootProps, id, name, disabled }"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <fieldset v-bind="ariaAttrs" :class="ui.fieldset({ class: props.ui?.fieldset })" data-part="fieldset">
+      <legend v-if="props.legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })" data-part="legend">
+        <slot name="legend">
+          {{ props.legend }}
+        </slot>
+      </legend>
+
+      <Checkbox
+        v-for="item in normalizedItems"
+        :key="item.id"
+        v-bind="{ ...item, ...checkboxProps, color, size, name }"
+        :variant="props.variant"
+        :disabled="item.disabled || disabled"
+        :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
+        :class="ui.item({ disabled: item.disabled || disabled, class: [props.ui?.item, item.ui?.item, item.class] })"
+        data-part="item"
+      >
+        <template v-for="(_, name) in getProxySlots()" #[name]>
+          <slot :name="name" :item="item"></slot>
+        </template>
+      </Checkbox>
+    </fieldset>
+  </CheckboxGroupRoot>
 </template>

package/dist/runtime/components/Chip.vue

@@ -8,6 +8,7 @@ import { Primitive, Slot } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -29,24 +30,27 @@ const { size } = useAvatarGroup(props);
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.chip));
-  return styler({ ...props, size: size.value });
+  return styler({
+    ...pick(props, ["color", "position", "inset", "standalone"]),
+    size: size.value
+  });
 });
 </script>
 
 <template>
-  <Primitive
-    :as="props.as"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-  >
-    <Slot v-bind="$attrs">
-      <slot></slot>
-    </Slot>
-
-    <span v-if="show" :class="ui.base({ class: props.ui?.base })" data-part="base">
-      <slot name="content">
-        {{ props.text }}
-      </slot>
-    </span>
-  </Primitive>
+  <Primitive
+    :as="props.as"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+  >
+    <Slot v-bind="$attrs">
+      <slot></slot>
+    </Slot>
+
+    <span v-if="show" :class="ui.base({ class: props.ui?.base })" data-part="base">
+      <slot name="content">
+        {{ props.text }}
+      </slot>
+    </span>
+  </Primitive>
 </template>

package/dist/runtime/components/Collapsible.vue

@@ -7,6 +7,7 @@ import { reactivePick } from "@vueuse/core";
 import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useForwardPropsEmits } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false },
@@ -23,25 +24,25 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen",
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.collapsible));
-  return styler(props);
+  return styler(pick(props, []));
 });
 </script>
 
 <template>
-  <CollapsibleRoot
-    v-slot="{ open }"
-    v-bind="rootProps"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-  >
-    <CollapsibleTrigger v-if="!!slots.default" as-child>
-      <slot :open="open"></slot>
-    </CollapsibleTrigger>
-
-    <CollapsibleContent :class="ui.content({ class: props.ui?.content })" data-part="content">
-      <slot name="content"></slot>
-    </CollapsibleContent>
-  </CollapsibleRoot>
+  <CollapsibleRoot
+    v-slot="{ open }"
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+  >
+    <CollapsibleTrigger v-if="!!slots.default" as-child>
+      <slot :open="open"></slot>
+    </CollapsibleTrigger>
+
+    <CollapsibleContent :class="ui.content({ class: props.ui?.content })" data-part="content">
+      <slot name="content"></slot>
+    </CollapsibleContent>
+  </CollapsibleRoot>
 </template>
 
 <style>

package/dist/runtime/components/Drawer.vue

@@ -9,6 +9,7 @@ import { computed, toRef } from "vue";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Button from "./Button.vue";
 const props = defineProps({
@@ -53,85 +54,85 @@ const { t } = useLocale();
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.drawer));
-  return styler(props);
+  return styler(pick(props, ["transition", "direction", "inset"]));
 });
 </script>
 
 <template>
-  <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
-    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
-      <slot :open="open"></slot>
-    </DialogTrigger>
-
-    <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="props.overlay" :class="ui.overlay({ class: props.ui?.overlay })" data-part="overlay" />
-
-      <DialogContent
-        :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
-        v-bind="contentProps"
-        :data-direction="props.direction"
-        data-part="content"
-        @after-enter="emit('after-enter')"
-        @after-leave="emit('after-leave')"
-        v-on="contentEvents"
-      >
-        <VisuallyHidden v-if="!!slots.content || !!slots.header || !props.title && !slots.title">
-          <DialogTitle />
-        </VisuallyHidden>
-
-        <slot name="content" :close="close">
-          <div
-            v-if="slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.close || !!slots.close)"
-            :class="ui.header({ class: props.ui?.header })"
-            data-part="header"
-          >
-            <slot name="header" :close="close">
-              <DialogTitle
-                v-if="props.title || slots.title"
-                :class="ui.title({ class: props.ui?.title })"
-                data-part="title"
-              >
-                <slot name="title">
-                  {{ props.title }}
-                </slot>
-              </DialogTitle>
-
-              <DialogClose v-if="props.close || !!slots.close" as-child>
-                <slot name="close" :close="close" :ui="ui">
-                  <Button
-                    v-if="props.close"
-                    color="neutral"
-                    variant="ghost"
-                    :icon="props.closeIcon || appConfig.ui.icons.close"
-                    :aria-label="t('modal.close')"
-                    v-bind="typeof props.close === 'object' ? props.close : {}"
-                    :class="ui.close({ class: props.ui?.close })"
-                    data-part="close"
-                  />
-                </slot>
-              </DialogClose>
-
-              <DialogDescription
-                v-if="props.description || !!slots.description"
-                :class="ui.description({ class: props.ui?.description })"
-                data-part="description"
-              >
-                <slot name="description">
-                  {{ props.description }}
-                </slot>
-              </DialogDescription>
-            </slot>
-          </div>
-
-          <div v-if="slots.body" :class="ui.body({ class: props.ui?.body })" data-part="body">
-            <slot name="body" :close="close"></slot>
-          </div>
-
-          <div v-if="slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
-            <slot name="footer" :close="close"></slot>
-          </div>
-        </slot>
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
+  <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open"></slot>
+    </DialogTrigger>
+
+    <DialogPortal v-bind="portalProps">
+      <DialogOverlay v-if="props.overlay" :class="ui.overlay({ class: props.ui?.overlay })" data-part="overlay" />
+
+      <DialogContent
+        :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
+        v-bind="contentProps"
+        :data-direction="props.direction"
+        data-part="content"
+        @after-enter="emit('after-enter')"
+        @after-leave="emit('after-leave')"
+        v-on="contentEvents"
+      >
+        <VisuallyHidden v-if="!!slots.content || !!slots.header || !props.title && !slots.title">
+          <DialogTitle />
+        </VisuallyHidden>
+
+        <slot name="content" :close="close">
+          <div
+            v-if="slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.close || !!slots.close)"
+            :class="ui.header({ class: props.ui?.header })"
+            data-part="header"
+          >
+            <slot name="header" :close="close">
+              <DialogTitle
+                v-if="props.title || slots.title"
+                :class="ui.title({ class: props.ui?.title })"
+                data-part="title"
+              >
+                <slot name="title">
+                  {{ props.title }}
+                </slot>
+              </DialogTitle>
+
+              <DialogClose v-if="props.close || !!slots.close" as-child>
+                <slot name="close" :close="close" :ui="ui">
+                  <Button
+                    v-if="props.close"
+                    color="neutral"
+                    variant="ghost"
+                    :icon="props.closeIcon || appConfig.ui.icons.close"
+                    :aria-label="t('modal.close')"
+                    v-bind="typeof props.close === 'object' ? props.close : {}"
+                    :class="ui.close({ class: props.ui?.close })"
+                    data-part="close"
+                  />
+                </slot>
+              </DialogClose>
+
+              <DialogDescription
+                v-if="props.description || !!slots.description"
+                :class="ui.description({ class: props.ui?.description })"
+                data-part="description"
+              >
+                <slot name="description">
+                  {{ props.description }}
+                </slot>
+              </DialogDescription>
+            </slot>
+          </div>
+
+          <div v-if="slots.body" :class="ui.body({ class: props.ui?.body })" data-part="body">
+            <slot name="body" :close="close"></slot>
+          </div>
+
+          <div v-if="slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
+            <slot name="footer" :close="close"></slot>
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
 </template>