@baybreezy/docd 0.0.1

package/app/components/Ui/ContextMenu/CheckboxItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <ContextMenuCheckboxItem
+    data-slot="context-menu-checkbox-item"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <UiContextMenuItemIndicator icon="lucide:check" />
+    </span>
+    <slot>
+      <span v-if="title">{{ title }}</span>
+    </slot>
+    <slot name="shortcut">
+      <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>
+    </slot>
+  </ContextMenuCheckboxItem>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuCheckboxItem, useForwardPropsEmits } from "reka-ui";
+  import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    ContextMenuCheckboxItemProps & {
+      /**Custom class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+      /**The shortcut for the item */
+      shortcut?: string;
+      /**The title for the item */
+      title?: string;
+    }
+  >();
+
+  const emits = defineEmits<ContextMenuCheckboxItemEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "shortcut", "title"), emits);
+
+  const styles = tv({
+    base: "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  });
+</script>

package/app/components/Ui/ContextMenu/Content.vue

@@ -0,0 +1,53 @@
+<template>
+  <UiContextMenuPortal>
+    <ContextMenuContent
+      data-slot="context-menu-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        styles({
+          translucent: props.translucent,
+          class: normalizeClass(props.class) || undefined,
+        })
+      "
+    >
+      <slot />
+    </ContextMenuContent>
+  </UiContextMenuPortal>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuContent, useForwardPropsEmits } from "reka-ui";
+  import type { ContextMenuContentEmits, ContextMenuContentProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  defineOptions({ inheritAttrs: false });
+  const props = withDefaults(
+    defineProps<
+      ContextMenuContentProps & {
+        /** Custom class(es) to add to the element */
+        class?: HTMLAttributes["class"];
+        /** Whether to render the content with a translucent surface */
+        translucent?: boolean;
+      }
+    >(),
+    {
+      loop: true,
+      avoidCollisions: true,
+      collisionPadding: 5,
+      sticky: "partial",
+    }
+  );
+
+  const emits = defineEmits<ContextMenuContentEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "translucent"), emits);
+
+  const styles = tv({
+    base: "z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-visible rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+    variants: {
+      translucent: {
+        true: getTranslucentFloatingPanelClasses("popover"),
+      },
+    },
+  });
+</script>

package/app/components/Ui/ContextMenu/ContextMenu.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContextMenuRoot data-slot="context-menu" v-bind="forwarded">
+    <slot />
+  </ContextMenuRoot>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuRoot, useForwardPropsEmits } from "reka-ui";
+  import type { ContextMenuRootEmits, ContextMenuRootProps } from "reka-ui";
+
+  const props = defineProps<ContextMenuRootProps>();
+  const emit = defineEmits<ContextMenuRootEmits>();
+  const forwarded = useForwardPropsEmits(props, emit);
+</script>

package/app/components/Ui/ContextMenu/Group.vue

@@ -0,0 +1,12 @@
+<template>
+  <ContextMenuGroup data-slot="context-menu-group" v-bind="props">
+    <slot />
+  </ContextMenuGroup>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuGroup } from "reka-ui";
+  import type { ContextMenuGroupProps } from "reka-ui";
+
+  const props = defineProps<ContextMenuGroupProps>();
+</script>

package/app/components/Ui/ContextMenu/Item.vue

@@ -0,0 +1,65 @@
+<template>
+  <ContextMenuItem
+    data-slot="context-menu-item"
+    v-bind="forwarded"
+    :data-inset="inset"
+    :data-variant="variant"
+    :class="styles({ inset, class: normalizeClass(props.class) || undefined, variant })"
+  >
+    <slot>
+      <span v-if="title">{{ title }}</span>
+    </slot>
+    <slot name="shortcut">
+      <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>
+    </slot>
+  </ContextMenuItem>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuItem, useForwardPropsEmits } from "reka-ui";
+  import type { ContextMenuItemEmits, ContextMenuItemProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      ContextMenuItemProps & {
+        /**Custom class(es) to add to the element */
+        class?: HTMLAttributes["class"];
+        /** Wether an indentation should be added to the item or not */
+        inset?: boolean;
+        /** The shortcut for the item */
+        shortcut?: string;
+        /** The title for the item */
+        title?: string;
+        /**
+         * The variant of the item.
+         */
+        variant?: "default" | "destructive";
+      }
+    >(),
+    {
+      variant: "default",
+    }
+  );
+
+  const emits = defineEmits<ContextMenuItemEmits>();
+  const forwarded = useForwardPropsEmits(
+    reactiveOmit(props, "class", "inset", "shortcut", "title"),
+    emits
+  );
+
+  const styles = tv({
+    base: "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset=true]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+    variants: {
+      inset: {
+        true: "pl-8",
+      },
+      variant: {
+        default: "",
+        destructive:
+          "text-destructive focus:bg-destructive/10 focus:text-destructive dark:focus:bg-destructive/20",
+      },
+    },
+  });
+</script>

package/app/components/Ui/ContextMenu/ItemIndicator.vue

@@ -0,0 +1,30 @@
+<template>
+  <ContextMenuItemIndicator
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>
+      <Icon v-if="icon" :name="icon" class="size-4" />
+    </slot>
+  </ContextMenuItemIndicator>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuItemIndicator } from "reka-ui";
+  import type { ContextMenuItemIndicatorProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    ContextMenuItemIndicatorProps & {
+      /** The icon to display */
+      icon?: string;
+      class?: HTMLAttributes["class"];
+    }
+  >();
+  const forwarded = reactiveOmit(props, "icon");
+
+  const styles = tv({
+    base: "flex items-center justify-center",
+  });
+</script>

package/app/components/Ui/ContextMenu/Label.vue

@@ -0,0 +1,35 @@
+<template>
+  <ContextMenuLabel
+    data-slot="context-menu-label"
+    :data-inset="inset"
+    :class="styles({ inset, class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot>{{ label }}</slot>
+  </ContextMenuLabel>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuLabel } from "reka-ui";
+  import type { ContextMenuLabelProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    ContextMenuLabelProps & {
+      /**Custom class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+      /** Wether an indentation should be added to the item or not */
+      inset?: boolean;
+      /** The label for the item */
+      label?: string;
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class", "inset", "label");
+  const styles = tv({
+    base: "px-2 py-1.5 text-sm font-medium text-foreground data-[inset=true]:pl-8",
+    variants: {
+      inset: { true: "pl-8" },
+    },
+  });
+</script>

package/app/components/Ui/ContextMenu/Portal.vue

@@ -0,0 +1,12 @@
+<template>
+  <ContextMenuPortal data-slot="context-menu-portal" v-bind="props">
+    <slot />
+  </ContextMenuPortal>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuPortal } from "reka-ui";
+  import type { ContextMenuPortalProps } from "reka-ui";
+
+  const props = defineProps<ContextMenuPortalProps>();
+</script>

package/app/components/Ui/ContextMenu/RadioGroup.vue

@@ -0,0 +1,16 @@
+<template>
+  <ContextMenuRadioGroup data-slot="context-menu-radio-group" v-bind="forwarded">
+    <slot />
+  </ContextMenuRadioGroup>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuRadioGroup, useForwardPropsEmits } from "reka-ui";
+  import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from "reka-ui";
+
+  const props = defineProps<ContextMenuRadioGroupProps>();
+
+  const emits = defineEmits<ContextMenuRadioGroupEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>

package/app/components/Ui/ContextMenu/RadioItem.vue

@@ -0,0 +1,40 @@
+<template>
+  <ContextMenuRadioItem
+    data-slot="context-menu-radio-item"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <UiContextMenuItemIndicator>
+        <Icon v-if="icon" :name="icon" class="size-4" />
+        <Icon v-else name="ph:circle-fill" class="size-2" />
+      </UiContextMenuItemIndicator>
+    </span>
+    <slot>{{ title }}</slot>
+  </ContextMenuRadioItem>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuRadioItem, useForwardPropsEmits } from "reka-ui";
+  import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    ContextMenuRadioItemProps & {
+      /**Custom class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+      /**The icon to display */
+      icon?: string;
+      /**The title for the item */
+      title?: string;
+    }
+  >();
+
+  const emits = defineEmits<ContextMenuRadioItemEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "icon", "title"), emits);
+
+  const styles = tv({
+    base: "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  });
+</script>

package/app/components/Ui/ContextMenu/Separator.vue

@@ -0,0 +1,25 @@
+<template>
+  <ContextMenuSeparator
+    data-slot="context-menu-separator"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="props"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuSeparator } from "reka-ui";
+  import type { ContextMenuSeparatorProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    ContextMenuSeparatorProps & {
+      /**Custom class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+
+  const styles = tv({
+    base: "-mx-1 my-1 h-px bg-border",
+  });
+</script>

package/app/components/Ui/ContextMenu/Shortcut.vue

@@ -0,0 +1,30 @@
+<template>
+  <Primitive
+    data-slot="context-menu-shortcut"
+    :as="as || 'span'"
+    :as-child="asChild"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    PrimitiveProps & {
+      /**
+       * The custom class(es) to add to the element
+       */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+
+  const styles = tv({
+    base: "ml-auto text-xs tracking-widest text-muted-foreground",
+  });
+</script>

package/app/components/Ui/ContextMenu/Sub.vue

@@ -0,0 +1,15 @@
+<template>
+  <ContextMenuSub data-slot="context-menu-sub" v-bind="forwarded">
+    <slot />
+  </ContextMenuSub>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuSub, useForwardPropsEmits } from "reka-ui";
+  import type { ContextMenuSubEmits, ContextMenuSubProps } from "reka-ui";
+
+  const props = defineProps<ContextMenuSubProps>();
+  const emits = defineEmits<ContextMenuSubEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>

package/app/components/Ui/ContextMenu/SubContent.vue

@@ -0,0 +1,55 @@
+<template>
+  <UiContextMenuPortal>
+    <ContextMenuSubContent
+      data-slot="context-menu-sub-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        styles({
+          translucent: props.translucent,
+          class: normalizeClass(props.class) || undefined,
+        })
+      "
+    >
+      <slot />
+    </ContextMenuSubContent>
+  </UiContextMenuPortal>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuSubContent, useForwardPropsEmits } from "reka-ui";
+  import type { ContextMenuSubContentEmits, ContextMenuSubContentProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = withDefaults(
+    defineProps<
+      ContextMenuSubContentProps & {
+        /**Custom class(es) to add to the element */
+        class?: HTMLAttributes["class"];
+        /** Whether to render the content with a translucent surface */
+        translucent?: boolean;
+      }
+    >(),
+    {
+      loop: true,
+      avoidCollisions: true,
+      collisionPadding: 8,
+      sticky: "partial",
+    }
+  );
+
+  const emits = defineEmits<ContextMenuSubContentEmits>();
+
+  const styles = tv({
+    base: "z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-visible rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+    variants: {
+      translucent: {
+        true: getTranslucentFloatingPanelClasses("popover"),
+      },
+    },
+  });
+
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "translucent"), emits);
+</script>

package/app/components/Ui/ContextMenu/SubTrigger.vue

@@ -0,0 +1,42 @@
+<template>
+  <ContextMenuSubTrigger
+    data-slot="context-menu-sub-trigger"
+    :data-inset="inset"
+    v-bind="forwarded"
+    :class="styles({ inset, class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>
+      <span v-if="title">{{ title }}</span>
+    </slot>
+    <Icon class="ml-auto size-4" :name="icon || 'lucide:chevron-right'" />
+  </ContextMenuSubTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuSubTrigger } from "reka-ui";
+  import type { ContextMenuSubTriggerProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    ContextMenuSubTriggerProps & {
+      /**Custom class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+      /** Wether an indentation should be added to the item or not */
+      inset?: boolean;
+      /** The icon to display */
+      icon?: string;
+      /** The title for the item */
+      title?: string;
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class", "inset", "icon", "title");
+  const styles = tv({
+    base: "flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset=true]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    variants: {
+      inset: {
+        true: "pl-8",
+      },
+    },
+  });
+</script>

package/app/components/Ui/ContextMenu/Trigger.vue

@@ -0,0 +1,12 @@
+<template>
+  <ContextMenuTrigger data-slot="context-menu-trigger" v-bind="props">
+    <slot />
+  </ContextMenuTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuTrigger } from "reka-ui";
+  import type { ContextMenuTriggerProps } from "reka-ui";
+
+  const props = defineProps<ContextMenuTriggerProps>();
+</script>

package/app/components/Ui/Dialog/Close.vue

@@ -0,0 +1,12 @@
+<template>
+  <DialogClose data-slot="dialog-close" v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
+
+<script lang="ts" setup>
+  import { DialogClose } from "reka-ui";
+  import type { DialogCloseProps } from "reka-ui";
+
+  const props = defineProps<DialogCloseProps>();
+</script>

package/app/components/Ui/Dialog/Content.vue

@@ -0,0 +1,79 @@
+<template>
+  <UiDialogPortal :to="to">
+    <UiDialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      :class="
+        styles({
+          translucent: props.translucent,
+          class: normalizeClass(props.class) || undefined,
+        })
+      "
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot>
+        <slot name="header">
+          <UiDialogHeader>
+            <slot name="title">
+              <UiDialogTitle v-if="title" :title="title" />
+            </slot>
+            <slot name="description">
+              <UiDialogDescription v-if="description" :description="description" />
+            </slot>
+          </UiDialogHeader>
+        </slot>
+        <slot name="content" />
+        <slot name="footer" />
+      </slot>
+      <slot name="close" />
+      <UiDialogClose
+        v-if="!hideClose"
+        class="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <Icon name="lucide:x" class="size-4" />
+        <span class="sr-only">Close</span>
+      </UiDialogClose>
+    </DialogContent>
+  </UiDialogPortal>
+</template>
+
+<script lang="ts" setup>
+  import { DialogContent, useForwardPropsEmits } from "reka-ui";
+  import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  defineOptions({ inheritAttrs: false });
+  const props = defineProps<
+    DialogContentProps & {
+      /** Icon to display in the close button */
+      icon?: string;
+      /** Title text */
+      title?: string;
+      /** Description text */
+      description?: string;
+      /** Custom class(es) to add to the parent */
+      class?: HTMLAttributes["class"];
+      /** Whether to hide the close button */
+      hideClose?: boolean;
+      /** Where to render the dialog */
+      to?: string | HTMLElement;
+      /** Whether to render the content with a translucent surface */
+      translucent?: boolean;
+    }
+  >();
+  const emits = defineEmits<DialogContentEmits>();
+  const forwarded = useForwardPropsEmits(
+    reactiveOmit(props, "icon", "title", "description", "class", "hideClose", "to", "translucent"),
+    emits
+  );
+
+  const styles = tv({
+    base: "fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-100",
+    variants: {
+      translucent: {
+        true: getTranslucentFloatingPanelClasses("background"),
+      },
+    },
+  });
+</script>

package/app/components/Ui/Dialog/Description.vue

@@ -0,0 +1,29 @@
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot>{{ description }}</slot>
+  </DialogDescription>
+</template>
+
+<script lang="ts" setup>
+  import { DialogDescription } from "reka-ui";
+  import type { DialogDescriptionProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    DialogDescriptionProps & {
+      /** Custom class(es) to add to the parent */
+      class?: HTMLAttributes["class"];
+      /** The description text */
+      description?: string;
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class", "description");
+  const styles = tv({
+    base: "text-sm text-muted-foreground",
+  });
+</script>

package/app/components/Ui/Dialog/Dialog.vue

@@ -0,0 +1,14 @@
+<template>
+  <DialogRoot data-slot="dialog" v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
+
+<script lang="ts" setup>
+  import { DialogRoot, useForwardPropsEmits } from "reka-ui";
+  import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+
+  const props = defineProps<DialogRootProps>();
+  const emit = defineEmits<DialogRootEmits>();
+  const forwarded = useForwardPropsEmits(props, emit);
+</script>