@nuxt/ui 3.3.3 → 4.0.0-alpha.1

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

@@ -0,0 +1,59 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/content/content-search-button';
+import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ContentSearchButton = ComponentConfig<typeof theme, AppConfig, 'contentSearchButton'>;
+export interface ContentSearchButtonProps {
+    /**
+     * The icon displayed in the button.
+     * @defaultValue appConfig.ui.icons.search
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The label displayed in the button.
+     * @defaultValue t('contentSearchButton.label')
+     */
+    label?: string;
+    /**
+     * The color of the button.
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The variant of the button.
+     * Defaults to 'outline' when not collapsed, 'ghost' when collapsed.
+     */
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+    /**
+     * Whether the button is collapsed.
+     * @defaultValue true
+     */
+    collapsed?: boolean;
+    /**
+     * Display a tooltip on the button when is collapsed with the button label.
+     * This has priority over the global `tooltip` prop.
+     */
+    tooltip?: boolean | TooltipProps;
+    /**
+     * The keyboard keys to display in the button.
+     * `{ variant: 'subtle' }`{lang="ts-type"}
+     * @defaultValue ['meta', 'k']
+     */
+    kbds?: KbdProps['value'][] | KbdProps[];
+    ui?: ContentSearchButton['slots'] & ButtonProps['ui'];
+    class?: any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ContentSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSearchButtonProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    tooltip: boolean | TooltipProps;
+    kbds: KbdProps["value"][] | KbdProps[];
+    collapsed: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,64 @@
+<script>
+import theme from "#build/ui/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";
+import ULink from "../Link.vue";
+import UIcon from "../Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  prevIcon: { type: [String, Object], required: false },
+  nextIcon: { type: [String, Object], 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.ui?.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" v-bind="$attrs" :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 theme from '#build/ui/content/content-surround';
+import type { IconProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ContentSurround = ComponentConfig<typeof theme, AppConfig, 'contentSurround'>;
+export interface ContentSurroundLink extends ContentNavigationItem {
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    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?: IconProps['name'];
+    /**
+     * The icon displayed in the next link.
+     * @defaultValue appConfig.ui.icons.arrowRight
+     * @IconifyIcon
+     */
+    nextIcon?: IconProps['name'];
+    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> & {}> & 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 as K]: T[K];
+} & {};

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

@@ -0,0 +1,148 @@
+<script>
+import theme from "#build/ui/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 { useLocale } from "../../composables/useLocale";
+import { tv } from "../../utils/tv";
+import UIcon from "../Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  trailingIcon: { type: [String, Object], 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 } = useLocale();
+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.ui?.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, ...$attrs }" :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 theme from '#build/ui/content/content-toc';
+import type { IconProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc'>;
+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?: IconProps['name'];
+    /**
+     * 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> & {}> & 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 as K]: T[K];
+} & {};

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

@@ -0,0 +1,90 @@
+<script>
+
+</script>
+
+<script setup>
+import USelectMenu from "../SelectMenu.vue";
+defineProps({
+  locales: { type: Array, required: false }
+});
+const modelValue = defineModel({ type: String });
+function getEmojiFlag(locale) {
+  const languageToCountry = {
+    ar: "sa",
+    // Arabic -> Saudi Arabia
+    bn: "bd",
+    // Bengali -> Bangladesh
+    ca: "es",
+    // Catalan -> Spain
+    ckb: "iq",
+    // Central Kurdish -> Iraq
+    cs: "cz",
+    // Czech -> Czech Republic (note: modern country code is actually 'cz')
+    da: "dk",
+    // Danish -> Denmark
+    el: "gr",
+    // Greek -> Greece
+    en: "gb",
+    // English -> Great Britain
+    et: "ee",
+    // Estonian -> Estonia
+    he: "il",
+    // Hebrew -> Israel
+    hi: "in",
+    // Hindi -> India
+    hy: "am",
+    // Armenian -> Armenia
+    ja: "jp",
+    // Japanese -> Japan
+    kk: "kz",
+    // Kazakh -> Kazakhstan
+    km: "kh",
+    // Khmer -> Cambodia
+    ko: "kr",
+    // Korean -> South Korea
+    ky: "kg",
+    // Kyrgyz -> Kyrgyzstan
+    lb: "lu",
+    // Luxembourgish -> Luxembourg
+    ms: "my",
+    // Malay -> Malaysia
+    nb: "no",
+    // Norwegian Bokmål -> Norway
+    sl: "si",
+    // Slovenian -> Slovenia
+    sv: "se",
+    // Swedish -> Sweden
+    uk: "ua",
+    // Ukrainian -> Ukraine
+    ur: "pk",
+    // Urdu -> Pakistan
+    vi: "vn"
+    // Vietnamese -> Vietnam
+  };
+  const baseLanguage = locale.split("-")[0]?.toLowerCase() || locale;
+  const countryCode = languageToCountry[baseLanguage] || locale.replace(/^.*-/, "").slice(0, 2);
+  return countryCode.toUpperCase().split("").map((char) => String.fromCodePoint(127397 + char.charCodeAt(0))).join("");
+}
+</script>
+
+<template>
+  <USelectMenu
+    v-model="modelValue"
+    :search-input="false"
+    value-key="code"
+    label-key="name"
+    :items="locales"
+  >
+    <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

@@ -0,0 +1,15 @@
+import type { SelectMenuProps } from '../../types';
+import type { Locale } from '../../types/locale';
+export interface LocaleSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+    locales?: Locale<any>[];
+}
+declare const _default: import("vue").DefineComponent<LocaleSelectProps & {
+    modelValue?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<LocaleSelectProps & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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,44 @@
+<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";
+import UAccordion from "../Accordion.vue";
+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(() => {
+  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;
+    };
+};