@nuxt/ui 3.3.3 → 4.0.0-alpha.1

package/dist/runtime/components/prose/CodeTree.vue

@@ -0,0 +1,149 @@
+<script>
+import theme from "#build/ui/prose/code-tree";
+</script>
+
+<script setup>
+import { computed, ref, watch, onBeforeUpdate } from "vue";
+import { TreeRoot, TreeItem } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+import UCodeIcon from "./CodeIcon.vue";
+import UIcon from "../Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  defaultValue: { type: String, required: false },
+  expandAll: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codeTree || {} })());
+const model = ref(props.defaultValue ? { path: props.defaultValue } : void 0);
+const lastSelectedItem = ref();
+const rerenderCount = ref(1);
+const flatItems = computed(() => {
+  rerenderCount.value;
+  return slots.default?.()?.flatMap(transformSlot).filter(Boolean) || [];
+});
+const items = computed(() => buildTree(flatItems.value));
+function buildTree(items2) {
+  const map = /* @__PURE__ */ new Map();
+  const root = [];
+  items2.forEach((item) => {
+    const parts = item.label.split("/");
+    let path = "";
+    parts.forEach((part, i) => {
+      path = path ? `${path}/${part}` : part;
+      if (!map.has(path)) {
+        const node = { label: part, path, ...i < parts.length - 1 && { children: [] } };
+        map.set(path, node);
+        if (i === 0) {
+          root.push(node);
+        } else {
+          map.get(parts.slice(0, i).join("/"))?.children?.push(node);
+        }
+      }
+    });
+  });
+  const sort = (nodes) => nodes.sort(
+    (a, b) => !!a.children === !!b.children ? a.label.localeCompare(b.label) : b.children ? 1 : -1
+  ).map((n) => ({ ...n, children: n.children && sort(n.children) }));
+  return sort(root);
+}
+function transformSlot(slot, index) {
+  if (typeof slot.type === "symbol") {
+    return slot.children?.map(transformSlot);
+  }
+  return {
+    label: slot.props?.filename || slot.props?.label || `${index}`,
+    icon: slot.props?.icon,
+    component: slot
+  };
+}
+const expanded = computed(() => {
+  if (props.expandAll) {
+    const allPaths = /* @__PURE__ */ new Set();
+    flatItems.value.forEach((item) => {
+      const parts2 = item.label.split("/");
+      for (let i = 1; i < parts2.length; i++) {
+        allPaths.add(parts2.slice(0, i).join("/"));
+      }
+    });
+    return Array.from(allPaths);
+  }
+  const path = model.value?.path;
+  if (!path) {
+    return [];
+  }
+  const parts = path.split("/");
+  return parts.map((_, index) => parts.slice(0, index + 1).join("/"));
+});
+watch(model, (value) => {
+  const item = flatItems.value.find((item2) => value?.path === item2.label);
+  if (item?.component) {
+    lastSelectedItem.value = item;
+  }
+}, { immediate: true });
+onBeforeUpdate(() => rerenderCount.value++);
+</script>
+
+<template>
+  <DefineTreeTemplate v-slot="{ items, level }">
+    <li
+      v-for="(item, index) in items"
+      :key="`${level}-${index}`"
+      :class="level > 0 ? ui.itemWithChildren({ class: props.ui?.itemWithChildren }) : ui.item({ class: props.ui?.item })"
+    >
+      <TreeItem
+        v-slot="{ isExpanded, isSelected }"
+        as-child
+        :level="level"
+        :value="item"
+      >
+        <button :class="ui.link({ class: props.ui?.link, active: isSelected })">
+          <UIcon
+            v-if="item.children?.length"
+            :name="isExpanded ? appConfig.ui.icons.folderOpen : appConfig.ui.icons.folder"
+            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+          />
+          <UCodeIcon
+            v-else
+            :filename="item.label"
+            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+          />
+
+          <span :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+            {{ item.label }}
+          </span>
+
+          <span v-if="item.children?.length" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+            <UIcon :name="appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })" />
+          </span>
+        </button>
+
+        <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: props.ui?.listWithChildren })">
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </DefineTreeTemplate>
+
+  <div v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <TreeRoot
+      v-model="model"
+      :class="ui.list({ class: props.ui?.list })"
+      :items="items"
+      :get-key="(item2) => item2.path"
+      :default-expanded="expanded"
+    >
+      <ReuseTreeTemplate :items="items" :level="0" />
+    </TreeRoot>
+
+    <div :class="ui.content({ class: props.ui?.content })">
+      <component :is="lastSelectedItem?.component" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/prose/CodeTree.vue.d.ts

@@ -0,0 +1,28 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/prose/code-tree';
+import type { ComponentConfig } from '../../types/tv';
+type ProseCodeTree = ComponentConfig<typeof theme, AppConfig, 'codeTree', 'ui.prose'>;
+export interface ProseCodeTreeProps {
+    /**
+     * The default path to select.
+     * @example 'package.json'
+     */
+    defaultValue?: string;
+    /**
+     * Expand all directories by default.
+     * @defaultValue false
+     */
+    expandAll?: boolean;
+    class?: any;
+    ui?: ProseCodeTree['slots'];
+}
+export interface ProseCodeTreeSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCodeTreeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodeTreeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeTreeSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/Collapsible.vue

@@ -0,0 +1,43 @@
+<script>
+import theme from "#build/ui/prose/collapsible";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../../composables/useLocale";
+import { transformUI } from "../../utils";
+import { tv } from "../../utils/tv";
+import UCollapsible from "../Collapsible.vue";
+import UIcon from "../Icon.vue";
+const props = defineProps({
+  icon: { type: [String, Object], required: false },
+  name: { type: String, required: false },
+  openText: { type: String, required: false },
+  closeText: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.collapsible || {} })());
+</script>
+
+<template>
+  <UCollapsible :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui)">
+    <template #default="{ open }">
+      <button :class="ui.trigger({ class: props.ui?.trigger })">
+        <UIcon :name="icon || appConfig.ui.icons.chevronDown" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
+
+        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">
+          {{ open ? props.closeText || t("prose.collapsible.closeText") : props.openText || t("prose.collapsible.openText") }} {{ props.name || t("prose.collapsible.name") }}
+        </span>
+      </button>
+    </template>
+
+    <template #content>
+      <slot />
+    </template>
+  </UCollapsible>
+</template>

package/dist/runtime/components/prose/Collapsible.vue.d.ts

@@ -0,0 +1,39 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/prose/collapsible';
+import type { IconProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ProseCollapsible = ComponentConfig<typeof theme, AppConfig, 'collapsible', 'ui.prose'>;
+export interface ProseCollapsibleProps {
+    /**
+     * The icon displayed to toggle the collapsible.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     */
+    icon?: IconProps['name'];
+    /**
+     * The name displayed in the trigger label.
+     * @defaultValue t('prose.collapsible.name')
+     */
+    name?: string;
+    /**
+     * The text displayed when the collapsible is open.
+     * @defaultValue t('prose.collapsible.openText')
+     */
+    openText?: string;
+    /**
+     * The text displayed when the collapsible is closed.
+     * @defaultValue t('prose.collapsible.closeText')
+     */
+    closeText?: string;
+    class?: any;
+    ui?: ProseCollapsible['slots'];
+}
+export interface ProseCollapsibleSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCollapsibleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCollapsibleSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/Em.vue

@@ -0,0 +1,19 @@
+<script>
+import theme from "#build/ui/prose/em";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  class: { type: String, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.em || {} }));
+</script>
+
+<template>
+  <em :class="ui({ class: props.class })"><slot /></em>
+</template>

package/dist/runtime/components/prose/Em.vue.d.ts

@@ -0,0 +1,13 @@
+export interface ProseEmProps {
+    class?: string;
+}
+export interface ProseEmSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseEmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseEmProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseEmSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/Field.vue

@@ -0,0 +1,48 @@
+<script>
+import theme from "#build/ui/prose/field";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  type: { type: String, required: false },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.field || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <span v-if="name" :class="ui.name({ class: props.ui?.name })">
+        {{ name }}
+      </span>
+
+      <div v-if="type || required" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <span v-if="type" :class="ui.type({ class: props.ui?.type })">
+          {{ type }}
+        </span>
+
+        <span v-if="required" :class="ui.required({ class: props.ui?.required })">
+          required
+        </span>
+      </div>
+    </div>
+
+    <div v-if="!!slots.default || description" :class="ui.description({ class: props.ui?.description })">
+      <slot mdc-unwrap="p">
+        {{ description }}
+      </slot>
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/prose/Field.vue.d.ts

@@ -0,0 +1,39 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../../types/tv';
+import theme from '#build/ui/prose/field';
+type ProseField = ComponentConfig<typeof theme, AppConfig, 'field', 'ui.prose'>;
+export interface ProseFieldProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The name of the field.
+     */
+    name?: string;
+    /**
+     * Expected type of the field’s value
+     */
+    type?: string;
+    /**
+     * Description of the field
+     */
+    description?: string;
+    /**
+     * Indicate whether the field is required
+     */
+    required?: boolean;
+    class?: any;
+    ui?: ProseField['slots'];
+}
+export interface ProseFieldSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/FieldGroup.vue

@@ -0,0 +1,23 @@
+<script>
+import theme from "#build/ui/prose/field-group";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.fieldGroup || {} }));
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui({ class: props.class })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/prose/FieldGroup.vue.d.ts

@@ -0,0 +1,18 @@
+export interface ProseFieldGroupProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+}
+export interface ProseFieldGroupSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldGroupSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/H1.vue

@@ -0,0 +1,28 @@
+<script>
+import theme from "#build/ui/prose/h1";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig, useRuntimeConfig } from "#imports";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  id: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const { headings } = useRuntimeConfig().public?.mdc || {};
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h1 || {} })());
+const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h1);
+</script>
+
+<template>
+  <h1 :id="id" :class="ui.base({ class: props.class })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+      <slot />
+    </a>
+    <slot v-else />
+  </h1>
+</template>

package/dist/runtime/components/prose/H1.vue.d.ts

@@ -0,0 +1,19 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../../types/tv';
+import theme from '#build/ui/prose/h1';
+type ProseH1 = ComponentConfig<typeof theme, AppConfig, 'h1', 'ui.prose'>;
+export interface ProseH1Props {
+    id?: string;
+    class?: any;
+    ui?: ProseH1['slots'];
+}
+export interface ProseH1Slots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseH1Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH1Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH1Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/H2.vue

@@ -0,0 +1,33 @@
+<script>
+import theme from "#build/ui/prose/h2";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useRuntimeConfig, useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+import UIcon from "../Icon.vue";
+const props = defineProps({
+  id: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const { headings } = useRuntimeConfig().public?.mdc || {};
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h2 || {} })());
+const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h2);
+</script>
+
+<template>
+  <h2 :id="id" :class="ui.base({ class: props.class })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+      <span :class="ui.leading({ class: props.ui?.leading })">
+        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      </span>
+
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
+</template>

package/dist/runtime/components/prose/H2.vue.d.ts

@@ -0,0 +1,19 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/prose/h2';
+import type { ComponentConfig } from '../../types/tv';
+type ProseH2 = ComponentConfig<typeof theme, AppConfig, 'h2', 'ui.prose'>;
+export interface ProseH2Props {
+    id?: string;
+    class?: any;
+    ui?: ProseH2['slots'];
+}
+export interface ProseH2Slots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseH2Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH2Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH2Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/H3.vue

@@ -0,0 +1,33 @@
+<script>
+import theme from "#build/ui/prose/h3";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useRuntimeConfig, useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+import UIcon from "../Icon.vue";
+const props = defineProps({
+  id: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const { headings } = useRuntimeConfig().public?.mdc || {};
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h3 || {} })());
+const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h3);
+</script>
+
+<template>
+  <h3 :id="id" :class="ui.base({ class: props.class })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+      <span :class="ui.leading({ class: props.ui?.leading })">
+        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      </span>
+
+      <slot />
+    </a>
+    <slot v-else />
+  </h3>
+</template>

package/dist/runtime/components/prose/H3.vue.d.ts

@@ -0,0 +1,19 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/prose/h3';
+import type { ComponentConfig } from '../../types/tv';
+type ProseH3 = ComponentConfig<typeof theme, AppConfig, 'h3', 'ui.prose'>;
+export interface ProseH3Props {
+    id?: string;
+    class?: any;
+    ui?: ProseH3['slots'];
+}
+export interface ProseH3Slots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseH3Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH3Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH3Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/H4.vue

@@ -0,0 +1,28 @@
+<script>
+import theme from "#build/ui/prose/h4";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useRuntimeConfig, useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  id: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const { headings } = useRuntimeConfig().public?.mdc || {};
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h4 || {} })());
+const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h4);
+</script>
+
+<template>
+  <h4 :id="id" :class="ui.base({ class: props.class })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+      <slot />
+    </a>
+    <slot v-else />
+  </h4>
+</template>

package/dist/runtime/components/prose/H4.vue.d.ts

@@ -0,0 +1,19 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../../types/tv';
+import theme from '#build/ui/prose/h4';
+type ProseH4 = ComponentConfig<typeof theme, AppConfig, 'h4', 'ui.prose'>;
+export interface ProseH4Props {
+    id?: string;
+    class?: any;
+    ui?: ProseH4['slots'];
+}
+export interface ProseH4Slots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseH4Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH4Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH4Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/Hr.vue

@@ -0,0 +1,18 @@
+<script>
+import theme from "#build/ui/prose/hr";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.hr || {} }));
+</script>
+
+<template>
+  <hr :class="ui({ class: props.class })">
+</template>

package/dist/runtime/components/prose/Hr.vue.d.ts

@@ -0,0 +1,5 @@
+export interface ProseHrProps {
+    class?: any;
+}
+declare const _default: import("vue").DefineComponent<ProseHrProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseHrProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;