fix: use custom DialogTitle and DialogDescription

Author: lepture

src/components/dialog/DialogContent.vue

@@ -162,19 +162,6 @@ const forwarded = useForwardPropsEmits(props, emits, [
   right: var(--dialog-content-padding);
 }
 
-.ui-DialogContent > h2[id^="reka-dialog-title"] {
-  font-size: var(--font-size-5);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-4);
-  margin-bottom: var(--space-3);
-}
-
-.ui-DialogContent > p[id^="reka-dialog-description"] {
-  font-size: var(--font-size-3);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-}
-
 @media (min-width: 520px) {
   .ui-DialogContainer {
     justify-content: center;

src/components/dialog/DialogDescription.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { useForwardExpose } from 'reka-ui'
+</script>
+
+<script setup lang="ts">
+import { Primitive, injectDialogRootContext } from 'reka-ui'
+
+const props = withDefaults(defineProps<PrimitiveProps>(), { as: 'p' })
+
+useForwardExpose()
+const rootContext = injectDialogRootContext()
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    :id="rootContext.descriptionId"
+    class="ui-DialogDescription"
+  >
+    <slot></slot>
+  </Primitive>
+</template>
+
+<style>
+.ui-DialogDescription {
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-2);
+  color: var(--gray-11);
+}
+.ui-DialogTitle + .ui-DialogDescription {
+  margin-top: var(--space-2);
+}
+</style>

src/components/dialog/DialogHead.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { useForwardExpose } from 'reka-ui'
+</script>
+
+<script setup lang="ts">
+import { Primitive, injectDialogRootContext } from 'reka-ui'
+
+const props = withDefaults(defineProps<PrimitiveProps>(), { as: 'h2' })
+const rootContext = injectDialogRootContext()
+useForwardExpose()
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    :id="rootContext.titleId"
+    class="ui-DialogTitle"
+  >
+    <slot></slot>
+  </Primitive>
+</template>
+
+<style>
+.ui-DialogTitle {
+  font-size: var(--font-size-4);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-4);
+}
+</style>

src/components/dialog/DialogTitle.vue

@@ -1,11 +1,20 @@
 export {
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger,
-  DialogClose,
-  DialogDescription,
+  DialogRoot as DialogRoot,
+  DialogTrigger as DialogTrigger,
+  DialogClose as DialogClose,
+  type DialogRootProps,
+  type DialogTriggerProps,
+  type DialogCloseProps,
 } from 'reka-ui'
 
+export {
+  default as DialogTitle,
+} from './DialogTitle.vue'
+
+export {
+  default as DialogDescription,
+} from './DialogDescription.vue'
+
 export {
   default as DialogContent,
   type DialogContentProps,

src/components/dialog/index.ts

@@ -1,6 +1,7 @@
 export {
   default as ThemeProvider,
   type ThemeProviderProps,
+  injectThemeContext,
 } from './provider/ThemeProvider.vue'
 
 export * from './avatar'