@nuxt/ui 3.3.2 → 4.0.0-alpha.0

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

@@ -0,0 +1,61 @@
+<script>
+import theme from "#build/ui/prose/card";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+import ULink from "../Link.vue";
+import UIcon from "../Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  icon: { type: String, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  color: { type: null, 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?.card || {} })({
+  color: props.color,
+  to: !!props.to,
+  title: !!props.title
+}));
+const target = computed(() => props.target || (!!props.to && typeof props.to === "string" && props.to.startsWith("http") ? "_blank" : void 0));
+const ariaLabel = computed(() => (props.title || "Card link").trim());
+</script>
+
+<template>
+  <div :class="ui.base({ class: props.class })">
+    <ULink
+      v-if="to"
+      :aria-label="ariaLabel"
+      v-bind="{ to, target, ...$attrs }"
+      class="focus:outline-none"
+      tabindex="-1"
+      raw
+    >
+      <span class="absolute inset-0" aria-hidden="true" />
+    </ULink>
+
+    <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+    <UIcon v-if="!!to && target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.externalIcon({ class: props.ui?.externalIcon })" />
+
+    <p v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+      <slot name="title" mdc-unwrap="p">
+        {{ title }}
+      </slot>
+    </p>
+
+    <div v-if="!!slots.default" :class="ui.description({ class: props.ui?.description })">
+      <slot>
+        {{ description }}
+      </slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/prose/card';
+import type { LinkProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ProseCard = ComponentConfig<typeof theme, AppConfig, 'card', 'ui.prose'>;
+export interface ProseCardProps {
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    icon?: string;
+    title?: string;
+    description?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ProseCard['variants']['color'];
+    class?: any;
+    ui?: ProseCard['slots'];
+}
+export interface ProseCardSlots {
+    default(props?: {}): any;
+    title(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCardProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCardSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../../types/tv';
+import theme from '#build/ui/prose/code';
+type ProseCode = ComponentConfig<typeof theme, AppConfig, 'code', 'ui.prose'>;
+export interface ProseCodeProps {
+    lang?: string;
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ProseCode['variants']['color'];
+    class?: any;
+}
+export interface ProseCodeSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCodeProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,45 @@
+<script>
+import theme from "#build/ui/prose/code-collapse";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../../composables/useLocale";
+import { tv } from "../../utils/tv";
+import UButton from "../Button.vue";
+const props = defineProps({
+  icon: { type: String, 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 open = defineModel("open", { type: Boolean, ...{ default: false } });
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codeCollapse || {} })({
+  open: open.value
+}));
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot />
+
+    <div :class="ui.footer({ class: props.ui?.footer })">
+      <UButton
+        :icon="icon || appConfig.ui.icons.chevronDown"
+        color="neutral"
+        variant="outline"
+        :data-state="open ? 'open' : 'closed'"
+        :label="`${open ? props.closeText || t('prose.codeCollapse.closeText') : props.openText || t('prose.codeCollapse.openText')} ${props.name || t('prose.codeCollapse.name')}`"
+        :class="ui.trigger({ class: props.ui?.trigger })"
+        :ui="{ leadingIcon: ui.triggerIcon({ class: props.ui?.triggerIcon }) }"
+        @click="open = !open"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,46 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/prose/code-collapse';
+import type { ComponentConfig } from '../../types/tv';
+type ProseCodeCollapse = ComponentConfig<typeof theme, AppConfig, 'codeCollapse', 'ui.prose'>;
+export interface ProseCodeCollapseProps {
+    /**
+     * The icon displayed to toggle the code.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     */
+    icon?: string;
+    /**
+     * The name displayed in the trigger label.
+     * @defaultValue t('prose.codeCollapse.name')
+     */
+    name?: string;
+    /**
+     * The text displayed when the code is collapsed.
+     * @defaultValue t('prose.codeCollapse.openText')
+     */
+    openText?: string;
+    /**
+     * The text displayed when the code is expanded.
+     * @defaultValue t('prose.codeCollapse.closeText')
+     */
+    closeText?: string;
+    class?: any;
+    ui?: ProseCodeCollapse['slots'];
+}
+export interface ProseCodeCollapseSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCodeCollapseProps & {
+    open?: boolean;
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ProseCodeCollapseProps & {
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeCollapseSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,70 @@
+<script>
+import theme from "#build/ui/prose/code-group";
+</script>
+
+<script setup>
+import { computed, watch, onMounted, ref, onBeforeUpdate } from "vue";
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from "reka-ui";
+import { useState, useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+import UCodeIcon from "./CodeIcon.vue";
+const props = defineProps({
+  defaultValue: { type: String, required: false, default: "0" },
+  sync: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const model = defineModel({ type: String });
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codeGroup || {} })());
+const rerenderCount = ref(1);
+const items = computed(() => {
+  rerenderCount.value;
+  return slots.default?.()?.flatMap(transformSlot).filter(Boolean) || [];
+});
+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
+  };
+}
+onMounted(() => {
+  if (props.sync) {
+    const syncKey = `code-group-${props.sync}`;
+    const syncValue = useState(syncKey, () => localStorage.getItem(syncKey));
+    watch(syncValue, () => {
+      if (!syncValue.value) return;
+      model.value = syncValue.value;
+    }, { immediate: true });
+    watch(model, () => {
+      if (!model.value) return;
+      syncValue.value = model.value;
+      localStorage.setItem(syncKey, model.value);
+    });
+  }
+});
+onBeforeUpdate(() => rerenderCount.value++);
+</script>
+
+<template>
+  <TabsRoot v-model="model" :default-value="defaultValue" :unmount-on-hide="false" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <TabsList :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+
+      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" :class="ui.trigger({ class: props.ui?.trigger })">
+        <UCodeIcon :icon="item.icon" :filename="item.label" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
+
+        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">{{ item.label }}</span>
+      </TabsTrigger>
+    </TabsList>
+
+    <TabsContent v-for="(item, index) of items" :key="index" :value="String(index)" as-child>
+      <component :is="item.component" hide-header tabindex="-1" />
+    </TabsContent>
+  </TabsRoot>
+</template>

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

@@ -0,0 +1,37 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../../types/tv';
+import theme from '#build/ui/prose/code-group';
+type ProseCodeGroup = ComponentConfig<typeof theme, AppConfig, 'codeGroup', 'ui.prose'>;
+export interface ProseCodeGroupProps {
+    /**
+     * The default tab to select.
+     * @example '1'
+     */
+    defaultValue?: string;
+    /**
+     * Sync the selected tab with a local storage key.
+     */
+    sync?: string;
+    class?: any;
+    ui?: ProseCodeGroup['slots'];
+}
+export interface ProseCodeGroupSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCodeGroupProps & {
+    modelValue?: string;
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<ProseCodeGroupProps & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    defaultValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeGroupSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,32 @@
+<script>
+import theme from "#build/ui/prose/code-icon";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { defu } from "defu";
+import { useAppConfig } from "#imports";
+import UIcon from "../Icon.vue";
+const props = defineProps({
+  icon: { type: String, required: false },
+  filename: { type: String, required: false }
+});
+const appConfig = useAppConfig();
+const icons = computed(() => defu(appConfig.ui?.prose?.codeIcon || {}, theme));
+const icon = computed(() => {
+  if (props.icon) {
+    return props.icon;
+  }
+  if (!props.filename) {
+    return;
+  }
+  const cleanFilename = props.filename.replace(/\s*\(.*\)\s*$/, "");
+  const extension = cleanFilename.includes(".") && cleanFilename.split(".").pop();
+  const name = cleanFilename.split("/").pop();
+  return (name && icons.value[name.toLowerCase()]) ?? (extension && (icons.value[extension] ?? `i-vscode-icons-file-type-${extension}`));
+});
+</script>
+
+<template>
+  <UIcon v-if="icon" :name="icon" />
+</template>

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

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

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

@@ -0,0 +1,28 @@
+<script>
+import theme from "#build/ui/prose/code-preview";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  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?.codePreview || {} })({ code: !!slots.code }));
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.preview({ class: [props.ui?.preview] })">
+      <slot />
+    </div>
+
+    <div v-if="!!slots.code" :class="ui.code({ class: [props.ui?.code] })">
+      <slot name="code" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/prose/CodePreview.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/code-preview';
+type ProseCodePreview = ComponentConfig<typeof theme, AppConfig, 'codePreview', 'ui.prose'>;
+export interface ProseCodePreviewProps {
+    class?: any;
+    ui?: ProseCodePreview['slots'];
+}
+export interface ProseCodePreviewSlots {
+    default(props?: {}): any;
+    code(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCodePreviewProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodePreviewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodePreviewSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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, void, {}, {}, {}, 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;
+    };
+};