@eslamdevui/ui 3.2.0-beta.1 → 3.2.0-beta.2

package/dist/runtime/components/content/ContentSurround.vue

@@ -0,0 +1,61 @@
+<script>
+import theme from "#build/ui-pro/content/content-surround";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  prevIcon: { type: String, required: false },
+  nextIcon: { type: String, required: false },
+  surround: { type: Array, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate({
+  props: {
+    link: Object,
+    icon: String,
+    direction: String
+  }
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.uiPro?.contentSurround || {} })());
+</script>
+
+<template>
+  <DefineLinkTemplate v-slot="{ link, icon, direction }">
+    <ULink v-if="link" :to="link.path" raw :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], direction })">
+      <slot name="link" :link="link">
+        <div :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading] })">
+          <slot name="link-leading" :link="link">
+            <UIcon :name="link.icon || icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
+          </slot>
+        </div>
+
+        <p :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle] })">
+          <slot name="link-title" :link="link">
+            {{ link.title }}
+          </slot>
+        </p>
+
+        <p :class="ui.linkDescription({ class: [props.ui?.linkDescription, link.ui?.linkDescription] })">
+          <slot name="link-description" :link="link">
+            {{ link.description }}
+          </slot>
+        </p>
+      </slot>
+    </ULink>
+    <span v-else class="hidden lg:block">&nbsp;</span>
+  </DefineLinkTemplate>
+
+  <Primitive v-if="surround" :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ReuseLinkTemplate :link="surround[0]" :icon="prevIcon || appConfig.ui.icons.arrowLeft" direction="left" />
+    <ReuseLinkTemplate :link="surround[1]" :icon="nextIcon || appConfig.ui.icons.arrowRight" direction="right" />
+  </Primitive>
+</template>

package/dist/runtime/components/content/ContentSurround.vue.d.ts

@@ -0,0 +1,59 @@
+import type { ContentNavigationItem } from '@nuxt/content'
+import type { AppConfig } from '@nuxt/schema'
+import type { ComponentConfig } from '@nuxt/ui'
+import type theme from '#build/ui-pro/content/content-surround'
+
+type ContentSurround = ComponentConfig<typeof theme, AppConfig, 'contentSurround', 'uiPro'>
+export interface ContentSurroundLink extends ContentNavigationItem {
+  description?: string
+  /**
+   * @IconifyIcon
+   */
+  icon?: string
+  class?: any
+  ui?: Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>
+}
+export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSurroundLink> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The icon displayed in the prev link.
+   * @defaultValue appConfig.ui.icons.arrowLeft
+   * @IconifyIcon
+   */
+  prevIcon?: string
+  /**
+   * The icon displayed in the next link.
+   * @defaultValue appConfig.ui.icons.arrowRight
+   * @IconifyIcon
+   */
+  nextIcon?: string
+  surround?: T[]
+  class?: any
+  ui?: ContentSurround['slots']
+}
+type SlotProps<T> = (props: {
+  link: T
+}) => any
+export interface ContentSurroundSlots<T extends ContentSurroundLink = ContentSurroundLink> {
+  'link': SlotProps<T>
+  'link-leading': SlotProps<T>
+  'link-title': SlotProps<T>
+  'link-description': SlotProps<T>
+}
+declare const _default: <T extends ContentSurroundLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & ContentSurroundProps<T> & Partial<{}>> & import('vue').PublicProps
+  expose(exposed: import('vue').ShallowUnwrapRef<{}>): void
+  attrs: any
+  slots: ContentSurroundSlots<T>
+  emit: {}
+}>) => import('vue').VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>
+}
+export default _default
+type __VLS_PrettifyLocal<T> = {
+  [K in keyof T]: T[K];
+} & {}

package/dist/runtime/components/content/ContentToc.vue

@@ -0,0 +1,146 @@
+<script>
+import theme from "#build/ui-pro/content/content-toc";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from "reka-ui";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { useRouter, useAppConfig, useNuxtApp } from "#imports";
+import { useScrollspy } from "../../composables/useScrollspy";
+import { useLocalePro } from "../../composables/useLocalePro";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  trailingIcon: { type: String, required: false },
+  title: { type: String, required: false },
+  color: { type: null, required: false },
+  highlight: { type: Boolean, required: false },
+  highlightColor: { type: null, required: false },
+  links: { type: Array, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false }
+});
+const emits = defineEmits(["update:open", "move"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "open", "defaultOpen"), emits);
+const { t } = useLocalePro();
+const router = useRouter();
+const appConfig = useAppConfig();
+const { activeHeadings, updateHeadings } = useScrollspy();
+const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate({
+  props: {
+    links: Array,
+    level: Number
+  }
+});
+const [DefineTriggerTemplate, ReuseTriggerTemplate] = createReusableTemplate();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.uiPro?.contentToc || {} })({
+  color: props.color,
+  highlight: props.highlight,
+  highlightColor: props.highlightColor || props.color
+}));
+function scrollToHeading(id) {
+  const encodedId = encodeURIComponent(id);
+  router.push(`#${encodedId}`);
+  emits("move", id);
+}
+function flattenLinks(links) {
+  return links.flatMap((link) => [link, ...link.children ? flattenLinks(link.children) : []]);
+}
+const indicatorStyle = computed(() => {
+  if (!activeHeadings.value?.length) {
+    return;
+  }
+  const flatLinks = flattenLinks(props.links || []);
+  const activeIndex = flatLinks.findIndex((link) => activeHeadings.value.includes(link.id));
+  const linkHeight = 28;
+  const gapSize = 0;
+  return {
+    "--indicator-size": `${linkHeight * activeHeadings.value.length + gapSize * (activeHeadings.value.length - 1)}px`,
+    "--indicator-position": activeIndex >= 0 ? `${activeIndex * (linkHeight + gapSize)}px` : "0px"
+  };
+});
+const nuxtApp = useNuxtApp();
+nuxtApp.hooks.hook("page:loading:end", () => {
+  const headings = Array.from(document.querySelectorAll("h2, h3"));
+  updateHeadings(headings);
+});
+nuxtApp.hooks.hook("page:transition:finish", () => {
+  const headings = Array.from(document.querySelectorAll("h2, h3"));
+  updateHeadings(headings);
+});
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-template-shadow -->
+  <DefineListTemplate v-slot="{ links, level }">
+    <ul :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
+      <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, link.ui?.item] })">
+        <a :href="`#${link.id}`" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })" @click.prevent="scrollToHeading(link.id)">
+          <slot name="link" :link="link">
+            <span :class="ui.linkText({ class: [props.ui?.linkText, link.ui?.linkText] })">
+              {{ link.text }}
+            </span>
+          </slot>
+        </a>
+
+        <ReuseListTemplate v-if="link.children?.length" :links="link.children" :level="level + 1" />
+      </li>
+    </ul>
+  </DefineListTemplate>
+
+  <DefineTriggerTemplate v-slot="{ open }">
+    <slot name="leading" :open="open" />
+
+    <span :class="ui.title({ class: props.ui?.title })">
+      <slot :open="open">{{ title || t("contentToc.title") }}</slot>
+    </span>
+
+    <span :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing" :open="open">
+        <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </DefineTriggerTemplate>
+
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :default-open="defaultOpen" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.top" :class="ui.top({ class: props.ui?.top })">
+        <slot name="top" :links="links" />
+      </div>
+
+      <template v-if="links?.length">
+        <CollapsibleTrigger :class="ui.trigger({ class: 'lg:hidden' })">
+          <ReuseTriggerTemplate :open="open" />
+        </CollapsibleTrigger>
+
+        <CollapsibleContent :class="ui.content({ class: [props.ui?.content, 'lg:hidden'] })">
+          <div v-if="highlight" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+
+          <slot name="content" :links="links">
+            <ReuseListTemplate :links="links" :level="0" />
+          </slot>
+        </CollapsibleContent>
+
+        <p :class="ui.trigger({ class: 'hidden lg:flex' })">
+          <ReuseTriggerTemplate :open="open" />
+        </p>
+
+        <div :class="ui.content({ class: [props.ui?.content, 'hidden lg:flex'] })">
+          <div v-if="highlight" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+
+          <slot name="content" :links="links">
+            <ReuseListTemplate :links="links" :level="0" />
+          </slot>
+        </div>
+      </template>
+
+      <div v-if="!!slots.bottom" :class="ui.bottom({ class: props.ui?.bottom, body: !!slots.top || !!links?.length })">
+        <slot name="bottom" :links="links" />
+      </div>
+    </div>
+  </CollapsibleRoot>
+</template>

package/dist/runtime/components/content/ContentToc.vue.d.ts

@@ -0,0 +1,88 @@
+import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui'
+import type { TocLink } from '@nuxt/content'
+import type { AppConfig } from '@nuxt/schema'
+import type { ComponentConfig } from '@nuxt/ui'
+import type theme from '#build/ui-pro/content/content-toc'
+
+type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc', 'uiPro'>
+export type ContentTocLink = TocLink & {
+  class?: any
+  ui?: Pick<ContentToc['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkText'>
+}
+export interface ContentTocProps<T extends ContentTocLink = ContentTocLink> extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'nav'
+   */
+  as?: any
+  /**
+   * The icon displayed to collapse the content.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
+   */
+  trailingIcon?: string
+  /**
+   * The title of the table of contents.
+   * @defaultValue t('contentToc.title')
+   */
+  title?: string
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: ContentToc['variants']['color']
+  /**
+   * Display a line next to the active link.
+   * @defaultValue false
+   */
+  highlight?: boolean
+  /**
+   * @defaultValue 'primary'
+   */
+  highlightColor?: ContentToc['variants']['highlightColor']
+  links?: T[]
+  class?: any
+  ui?: ContentToc['slots']
+}
+export type ContentTocEmits = CollapsibleRootEmits & {
+  move: [id: string]
+}
+type SlotProps<T> = (props: {
+  link: T
+}) => any
+export interface ContentTocSlots<T extends ContentTocLink = ContentTocLink> {
+  leading(props: {
+    open: boolean
+  }): any
+  default(props: {
+    open: boolean
+  }): any
+  trailing(props: {
+    open: boolean
+  }): any
+  content(props: {
+    links: T[]
+  }): any
+  link: SlotProps<T>
+  top(props: {
+    links?: T[]
+  }): any
+  bottom(props: {
+    links?: T[]
+  }): any
+}
+declare const _default: <T extends ContentTocLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+    readonly 'onUpdate:open'?: ((value: boolean) => any) | undefined
+    readonly 'onMove'?: ((id: string) => any) | undefined
+  } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, 'onUpdate:open' | 'onMove'> & ContentTocProps<T> & Partial<{}>> & import('vue').PublicProps
+  expose(exposed: import('vue').ShallowUnwrapRef<{}>): void
+  attrs: any
+  slots: ContentTocSlots<T>
+  emit: ((evt: 'update:open', value: boolean) => void) & ((evt: 'move', id: string) => void)
+}>) => import('vue').VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>
+}
+export default _default
+type __VLS_PrettifyLocal<T> = {
+  [K in keyof T]: T[K];
+} & {}

package/dist/runtime/components/locale/LocaleSelect.vue

@@ -38,24 +38,24 @@ function getEmojiFlag(locale) {
 </script>
 
 <template>
-  <USelectMenu
-    v-model="modelValue"
-    :search-input="false"
-    value-key="code"
-    label-key="name"
-    :items="props.locales"
-    v-bind="$attrs"
-  >
-    <template #leading>
-      <span v-if="modelValue" class="size-5 text-center">
-        {{ getEmojiFlag(modelValue) }}
-      </span>
-    </template>
-
-    <template #item-leading="{ item }">
-      <span class="size-5 text-center">
-        {{ getEmojiFlag(item.code) }}
-      </span>
-    </template>
-  </USelectMenu>
+  <USelectMenu
+    v-model="modelValue"
+    :search-input="false"
+    value-key="code"
+    label-key="name"
+    :items="props.locales"
+    v-bind="$attrs"
+  >
+    <template #leading>
+      <span v-if="modelValue" class="size-5 text-center">
+        {{ getEmojiFlag(modelValue) }}
+      </span>
+    </template>
+
+    <template #item-leading="{ item }">
+      <span class="size-5 text-center">
+        {{ getEmojiFlag(item.code) }}
+      </span>
+    </template>
+  </USelectMenu>
 </template>

package/dist/runtime/components/locale/LocaleSelect.vue.d.ts

@@ -1,4 +1,4 @@
-import type { SelectMenuProps, Locale } from '@eslamdevui/ui';
+import type { SelectMenuProps, Locale } from '../../types';
 export interface LocaleSelectProps extends 
 /** @vue-ignore */
 Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {

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

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

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

@@ -0,0 +1,15 @@
+export interface ProseAProps {
+    href?: string;
+    target?: '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;
+    class?: any;
+}
+export interface ProseASlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseAProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseAProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseASlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,43 @@
+<script>
+import theme from "#build/ui/prose/accordion";
+</script>
+
+<script setup>
+import { computed, ref, onBeforeUpdate } from "vue";
+import { useAppConfig } from "#imports";
+import { transformUI } from "../../utils";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  type: { type: String, required: false, default: "multiple" },
+  class: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.accordion || {} }));
+const rerenderCount = ref(1);
+const items = computed(() => {
+  const _ = rerenderCount.value;
+  return slots.default?.()?.flatMap(transformSlot).filter(Boolean) || [];
+});
+function transformSlot(slot, index) {
+  if (typeof slot.type === "symbol") {
+    return slot.children?.map(transformSlot);
+  }
+  return {
+    index,
+    label: slot.props?.label || `${index}`,
+    description: slot.props?.description,
+    icon: slot.props?.icon,
+    component: slot
+  };
+}
+onBeforeUpdate(() => rerenderCount.value++);
+</script>
+
+<template>
+  <UAccordion :type="type" :items="items" :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui())">
+    <template #content="{ item }">
+      <component :is="item.component" />
+    </template>
+  </UAccordion>
+</template>

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+<script>
+import theme from "#build/ui/prose/badge";
+</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?.badge || {} }));
+</script>
+
+<template>
+  <UBadge color="primary" variant="subtle" :class="ui({ class: props.class })">
+    <slot mdc-unwrap="p" />
+  </UBadge>
+</template>

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

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

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

@@ -0,0 +1,21 @@
+<script>
+import theme from "#build/ui/prose/blockquote";
+</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?.blockquote || {} }));
+</script>
+
+<template>
+  <blockquote :class="ui({ class: props.class })">
+    <slot />
+  </blockquote>
+</template>

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

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