@nuxt/ui 4.0.0-alpha.1 → 4.0.0-beta.0

package/dist/runtime/components/Tree.vue.d.ts

@@ -2,7 +2,7 @@ import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
 import type { IconProps } from '../types';
-import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '../types/utils';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>;
 export type TreeItem = {
@@ -17,7 +17,6 @@ export type TreeItem = {
     trailingIcon?: IconProps['name'];
     defaultExpanded?: boolean;
     disabled?: boolean;
-    value?: string;
     slot?: string;
     children?: TreeItem[];
     onToggle?(e: Event): void;
@@ -26,7 +25,7 @@ export type TreeItem = {
     ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
     [key: string]: any;
 };
-export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
+export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'ul'
@@ -40,16 +39,13 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
      * @defaultValue 'md'
      */
     size?: Tree['variants']['size'];
-    /**
-     * The key used to get the value from the item.
-     * @defaultValue 'value'
-     */
-    valueKey?: VK;
+    /** This function is passed the index of each item and should return a unique key for that item */
+    getKey?: (val: T[number]) => string;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
      */
-    labelKey?: keyof NestedItem<T>;
+    labelKey?: GetItemKeys<T>;
     /**
      * The icon displayed on the right side of a parent node.
      * @defaultValue appConfig.ui.icons.chevronDown
@@ -70,15 +66,15 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
     collapsedIcon?: IconProps['name'];
     items?: T;
     /** The controlled value of the Tree. Can be bind as `v-model`. */
-    modelValue?: GetModelValue<T, VK, M>;
+    modelValue?: M extends true ? T[number][] : T[number];
     /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
-    defaultValue?: GetModelValue<T, VK, M>;
+    defaultValue?: M extends true ? T[number][] : T[number];
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     class?: any;
     ui?: Tree['slots'];
 }
-export type TreeEmits<A extends TreeItem[], VK extends GetItemKeys<A> | undefined, M extends boolean> = Omit<TreeRootEmits, 'update:modelValue'> & GetModelValueEmits<A, VK, M>;
+export type TreeEmits<T extends TreeItem[] = TreeItem[], M extends boolean = false> = TreeRootEmits<T[number], M>;
 type SlotProps<T extends TreeItem> = (props: {
     item: T;
     index: number;
@@ -86,27 +82,27 @@ type SlotProps<T extends TreeItem> = (props: {
     expanded: boolean;
     selected: boolean;
 }) => any;
-export type TreeSlots<A extends TreeItem[] = TreeItem[], T extends NestedItem<A> = NestedItem<A>> = {
-    'item-wrapper': SlotProps<T>;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
-    'item-trailing': SlotProps<T>;
-} & DynamicSlots<T, undefined, {
+export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
+    'item-wrapper': SlotProps<T[number]>;
+    'item': SlotProps<T[number]>;
+    'item-leading': SlotProps<T[number]>;
+    'item-label': SlotProps<T[number]>;
+    'item-trailing': SlotProps<T[number]>;
+} & DynamicSlots<T[number], undefined, {
     index: number;
     level: number;
     expanded: boolean;
     selected: boolean;
 }>;
-declare const _default: <T extends TreeItem[], VK extends GetItemKeys<T> = "value", M extends boolean = false>(__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<{
+declare const _default: <T extends TreeItem[], M extends boolean = false>(__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:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((val: M extends true ? T[number][] : T[number]) => any) | undefined;
         readonly "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, VK, M> & {}> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, M> & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: TreeSlots<T, NestedItem<T>>;
-    emit: ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "update:expanded", val: string[]) => void);
+    slots: TreeSlots<T>;
+    emit: ((evt: "update:modelValue", val: M extends true ? T[number][] : T[number]) => void) & ((evt: "update:expanded", val: string[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/User.d.vue.ts

@@ -0,0 +1,47 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/user';
+import type { AvatarProps, ChipProps, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type User = ComponentConfig<typeof theme, AppConfig, 'user'>;
+export interface UserProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    name?: string;
+    description?: string;
+    avatar?: Omit<AvatarProps, 'size'> & {
+        [key: string]: any;
+    };
+    chip?: boolean | Omit<ChipProps, 'size' | 'inset'>;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: User['variants']['size'];
+    /**
+     * The orientation of the user.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: User['variants']['orientation'];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    ui?: User['slots'];
+}
+export interface UserSlots {
+    avatar(props?: {}): any;
+    name(props?: {}): any;
+    description(props?: {}): any;
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+    orientation: User["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/color-mode/ColorModeAvatar.d.vue.ts

@@ -0,0 +1,7 @@
+import type { AvatarProps } from '@nuxt/ui';
+export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+    light: string;
+    dark: string;
+}
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/color-mode/ColorModeButton.d.vue.ts

@@ -0,0 +1,23 @@
+import type { ButtonProps } from '@nuxt/ui';
+export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: ButtonProps["color"];
+    variant: ButtonProps["variant"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    fallback(props?: {}): any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/color-mode/ColorModeImage.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    dark: string;
+    light: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/color-mode/ColorModeSelect.d.vue.ts

@@ -0,0 +1,5 @@
+import type { SelectMenuProps } from '@nuxt/ui';
+export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/color-mode/ColorModeSwitch.d.vue.ts

@@ -0,0 +1,5 @@
+import type { SwitchProps } from '@nuxt/ui';
+export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,102 @@
+import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import type { ContentNavigationItem } from '@nuxt/content';
+import theme from '#build/ui/content/content-navigation';
+import type { BadgeProps, IconProps, LinkProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ContentNavigation = ComponentConfig<typeof theme, AppConfig, 'contentNavigation'>;
+export interface ContentNavigationLink extends ContentNavigationItem {
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * Display a badge on the link.
+     * `{ color: 'neutral', variant: 'outline', size: 'sm' }`{lang="ts-type"}
+     */
+    badge?: string | number | BadgeProps;
+    target?: LinkProps['target'];
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    disabled?: boolean;
+    children?: ContentNavigationLink[];
+    defaultOpen?: boolean;
+    active?: boolean;
+    class?: any;
+    ui?: Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>;
+}
+export interface ContentNavigationProps<T extends ContentNavigationLink = ContentNavigationLink> extends Pick<AccordionRootProps, 'disabled' | 'type' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'nav'
+     */
+    as?: any;
+    /**
+     * When `true`, the tree will be opened based on the current route.
+     * When `false`, the tree will be closed.
+     * When `undefined` (default), the first item will be opened with `type="single"` and the first level will be opened with `type="multiple"`.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The icon displayed to toggle the accordion.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ContentNavigation['variants']['color'];
+    /**
+     * @defaultValue 'pill'
+     */
+    variant?: ContentNavigation['variants']['variant'];
+    /**
+     * Display a line next to the active link.
+     * @defaultValue false
+     */
+    highlight?: boolean;
+    /**
+     * @defaultValue 'primary'
+     */
+    highlightColor?: ContentNavigation['variants']['highlightColor'];
+    /**
+     * When type is "single", prevents closing the open item when clicking its trigger.
+     * When type is "multiple", disables the collapsible behavior.
+     * @defaultValue true
+     */
+    collapsible?: boolean;
+    level?: number;
+    navigation?: T[];
+    class?: any;
+    ui?: ContentNavigation['slots'];
+}
+export interface ContentNavigationEmits extends AccordionRootEmits {
+}
+type SlotProps<T> = (props: {
+    link: T;
+    active?: boolean;
+}) => any;
+export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
+    'link': SlotProps<T>;
+    'link-leading': SlotProps<T>;
+    'link-title': SlotProps<T>;
+    'link-trailing': SlotProps<T>;
+}
+declare const _default: <T extends ContentNavigationLink>(__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:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & ContentNavigationProps<T> & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ContentNavigationSlots<T>;
+    emit: (evt: "update:modelValue", value: string | string[] | undefined) => 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/content/ContentNavigation.vue

@@ -35,7 +35,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "collapsible", "disabled", "type", "unmountOnHide"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "collapsible", "type", "unmountOnHide"), emits);
 const route = useRoute();
 const appConfig = useAppConfig();
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
@@ -45,6 +45,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentNaviga
   highlight: props.highlight,
   highlightColor: props.highlightColor || props.color
 }));
+const disabled = computed(() => props.disabled || props.type === "multiple" && props.collapsible === false);
 const defaultValue = computed(() => {
   if (props.defaultOpen === false) {
     return void 0;
@@ -91,14 +92,14 @@ const defaultValue = computed(() => {
   </DefineLinkTemplate>
 
   <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <AccordionRoot as="ul" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
+    <AccordionRoot as="ul" :disabled="disabled" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
       <template v-for="(link, index) in navigation" :key="index">
         <AccordionItem v-if="link.children?.length" as="li" :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })" :value="String(index)">
           <AccordionTrigger
             as="button"
             :class="[
-  ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled }),
-  ui.trigger({ class: [props.ui?.trigger, link.ui?.trigger] })
+  ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled || disabled }),
+  ui.trigger({ class: [props.ui?.trigger, link.ui?.trigger], disabled })
 ]"
           >
             <ReuseLinkTemplate :link="link" :active="link.active" />

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

@@ -63,8 +63,8 @@ export interface ContentNavigationProps<T extends ContentNavigationLink = Conten
      */
     highlightColor?: ContentNavigation['variants']['highlightColor'];
     /**
-     * When type is "single", allows closing content when clicking trigger for an open item.
-     * When type is "multiple", this prop has no effect.
+     * When type is "single", prevents closing the open item when clicking its trigger.
+     * When type is "multiple", disables the collapsible behavior.
      * @defaultValue true
      */
     collapsible?: boolean;

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

@@ -0,0 +1,114 @@
+import type { ContentNavigationItem } from '@nuxt/content';
+import type { AppConfig } from '@nuxt/schema';
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
+import theme from '#build/ui/content/content-search';
+import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>;
+export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
+    label?: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    children?: ContentSearchLink[];
+}
+export interface ContentSearchFile {
+    id: string;
+    title: string;
+    titles: string[];
+    level: number;
+    content: string;
+}
+export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPaletteItem {
+    level?: number;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+}
+export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends /* @vue-ignore */ Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+    /**
+     * The icon displayed in the input.
+     * @defaultValue appConfig.ui.icons.search
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The placeholder text for the input.
+     * @defaultValue t('commandPalette.placeholder')
+     */
+    placeholder?: InputProps['placeholder'];
+    /**
+     * Automatically focus the input when component is mounted.
+     * @defaultValue true
+     */
+    autofocus?: boolean;
+    /** When `true`, the loading icon will be displayed. */
+    loading?: boolean;
+    /**
+     * The icon when the `loading` prop is `true`.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
+    /**
+     * Display a close button in the input (useful when inside a Modal for example).
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @emits 'update:open'
+     * @defaultValue true
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: IconProps['name'];
+    /**
+     * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
+     * @defaultValue 'meta_k'
+     */
+    shortcut?: string;
+    /** Links group displayed as the first group in the command palette. */
+    links?: T[];
+    navigation?: ContentNavigationItem[];
+    /** Custom groups displayed between navigation and color mode group. */
+    groups?: CommandPaletteGroup<ContentSearchItem>[];
+    files?: ContentSearchFile[];
+    /**
+     * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://ui.nuxt.com/docs/components/command-palette).
+     * @defaultValue { fuseOptions: { includeMatches: true } }
+     */
+    fuse?: UseFuseOptions<T>;
+    /**
+     * When `true`, the theme command will be added to the groups.
+     * @defaultValue true
+     */
+    colorMode?: boolean;
+    class?: any;
+    ui?: ContentSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>['ui'];
+}
+export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem> & {
+    content(props?: {}): any;
+};
+declare const _default: <T extends ContentSearchLink>(__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:searchTerm"?: ((value: string) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:searchTerm"> & (ContentSearchProps<T> & {
+        searchTerm?: string;
+    }) & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        commandPaletteRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{}> | null>>;
+    }>): void;
+    attrs: any;
+    slots: ContentSearchSlots;
+    emit: (evt: "update:searchTerm", value: 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/content/ContentSearch.vue

@@ -39,7 +39,7 @@ const { open } = useContentSearch();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
 const commandPaletteProps = useForwardProps(reactivePick(props, "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
-const proxySlots = omit(slots, ["content"]);
+const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {
     includeMatches: true
@@ -164,7 +164,7 @@ defineExpose({
           @update:model-value="onSelect"
           @update:open="open = $event"
         >
-          <template v-for="(_, name) in proxySlots" #[name]="slotData">
+          <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
             <slot :name="name" v-bind="slotData" />
           </template>
         </UCommandPalette>

package/dist/runtime/components/content/ContentSearchButton.d.vue.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/ContentSearchButton.vue

@@ -30,7 +30,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const [DefineButtonTemplate, ReuseButtonTemplate] = createReusableTemplate();
-const proxySlots = omit(slots, ["trailing"]);
+const getProxySlots = () => omit(slots, ["trailing"]);
 const rootProps = useForwardProps(reactivePick(props, "color", "size"));
 const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
 const { t } = useLocale();
@@ -58,7 +58,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch
       :ui="transformUI(ui, props.ui)"
       @click="open = true"
     >
-      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+      <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
 

package/dist/runtime/components/content/ContentSurround.d.vue.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];
+} & {};