@nuxt/ui 3.3.1 → 4.0.0-alpha.0

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, 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,38 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/prose/collapsible';
+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?: string;
+    /**
+     * 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, void, {}, {}, {}, 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, void, {}, {}, {}, 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, void, {}, {}, {}, 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, void, {}, {}, {}, 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, void, {}, {}, {}, 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, void, {}, {}, {}, 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, void, {}, {}, {}, 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, void, {}, {}, {}, 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, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseHrProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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

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

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

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

@@ -0,0 +1,82 @@
+<script>
+import theme from "#build/ui/prose/img";
+</script>
+
+<script setup>
+import { ref, computed, useId } from "vue";
+import { withTrailingSlash, withLeadingSlash, joinURL } from "ufo";
+import { DialogRoot, DialogPortal, DialogTrigger } from "reka-ui";
+import { AnimatePresence, Motion } from "motion-v";
+import { useEventListener, createReusableTemplate } from "@vueuse/core";
+import { useRuntimeConfig, useAppConfig } from "#imports";
+import ImageComponent from "#build/ui-image-component";
+import { tv } from "../../utils/tv";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, required: true },
+  width: { type: [String, Number], required: false },
+  height: { type: [String, Number], required: false },
+  class: { type: null, required: false },
+  zoom: { type: Boolean, required: false, default: true },
+  ui: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const [DefineImageTemplate, ReuseImageTemplate] = createReusableTemplate();
+const open = ref(false);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.img || {} })({
+  zoom: props.zoom,
+  open: open.value
+}));
+const refinedSrc = computed(() => {
+  if (props.src?.startsWith("/") && !props.src.startsWith("//")) {
+    const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL));
+    if (_base !== "/" && !props.src.startsWith(_base)) {
+      return joinURL(_base, props.src);
+    }
+  }
+  return props.src;
+});
+const layoutId = computed(() => `${refinedSrc.value}::${useId()}`);
+if (props.zoom) {
+  useEventListener(window, "scroll", () => {
+    open.value = false;
+  });
+}
+</script>
+
+<template>
+  <DefineImageTemplate>
+    <component
+      :is="ImageComponent"
+      :src="refinedSrc"
+      :alt="alt"
+      :width="width"
+      :height="height"
+      v-bind="$attrs"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
+    />
+  </DefineImageTemplate>
+
+  <DialogRoot v-if="zoom" v-slot="{ close }" v-model:open="open" :modal="false">
+    <DialogTrigger as-child>
+      <Motion :layout-id="layoutId" as-child :transition="{ type: 'spring', bounce: 0.2, duration: 0.4 }">
+        <ReuseImageTemplate />
+      </Motion>
+    </DialogTrigger>
+
+    <DialogPortal>
+      <AnimatePresence>
+        <Motion v-if="open" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" :class="ui.overlay({ class: [props.ui?.overlay] })" />
+
+        <div v-if="open" :class="ui.content({ class: [props.ui?.content] })" @click="close">
+          <Motion as-child :layout-id="layoutId" :transition="{ type: 'spring', bounce: 0.2, duration: 0.4 }">
+            <ReuseImageTemplate />
+          </Motion>
+        </div>
+      </AnimatePresence>
+    </DialogPortal>
+  </DialogRoot>
+
+  <ReuseImageTemplate v-else />
+</template>

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

@@ -0,0 +1,21 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../../types/tv';
+import theme from '#build/ui/prose/img';
+type ProseImg = ComponentConfig<typeof theme, AppConfig, 'img', 'ui.prose'>;
+export interface ProseImgProps {
+    src: string;
+    alt: string;
+    width?: string | number;
+    height?: string | number;
+    class?: any;
+    /**
+     * Zoom image on click
+     * @defaultValue true
+     */
+    zoom?: boolean;
+    ui?: ProseImg['slots'];
+}
+declare const _default: import("vue").DefineComponent<ProseImgProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseImgProps> & Readonly<{}>, {
+    zoom: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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

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

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