@nuxt/ui 4.3.0 → 4.4.0

package/dist/runtime/components/CommandPalette.vue

@@ -4,7 +4,7 @@ import theme from "#build/ui/command-palette";
 
 <script setup>
 import { computed, ref, useTemplateRef, toRef } from "vue";
-import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from "reka-ui";
+import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick, createReusableTemplate, refThrottled } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
@@ -26,6 +26,7 @@ import UKbd from "./Kbd.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
+  size: { type: null, required: false },
   icon: { type: null, required: false },
   trailingIcon: { type: null, required: false },
   selectedIcon: { type: null, required: false },
@@ -36,9 +37,11 @@ const props = defineProps({
   closeIcon: { type: null, required: false },
   back: { type: [Boolean, Object], required: false, default: true },
   backIcon: { type: null, required: false },
+  input: { type: [Boolean, Object], required: false, default: true },
   groups: { type: Array, required: false },
   fuse: { type: Object, required: false },
   virtualize: { type: [Boolean, Object], required: false, default: false },
+  valueKey: { type: null, required: false },
   labelKey: { type: null, required: false, default: "label" },
   descriptionKey: { type: null, required: false, default: "description" },
   preserveGroupOrder: { type: Boolean, required: false, default: false },
@@ -46,10 +49,11 @@ const props = defineProps({
   ui: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  modelValue: { type: null, required: false, default: "" },
+  modelValue: { type: null, required: false },
   defaultValue: { type: null, required: false },
   highlightOnHover: { type: Boolean, required: false, default: true },
   selectionBehavior: { type: String, required: false },
+  by: { type: [String, Function], required: false },
   loading: { type: Boolean, required: false },
   loadingIcon: { type: null, required: false }
 });
@@ -58,12 +62,11 @@ const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover"), emits);
-const inputProps = useForwardProps(reactivePick(props, "loading"));
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover", "by"), emits);
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
   return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-    estimateSize: getEstimateSize(filteredItems.value, "md", props.descriptionKey)
+    estimateSize: getEstimateSize(filteredItems.value, "md", props.descriptionKey, !!slots["item-description"])
   });
 });
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
@@ -83,6 +86,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   }
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} })({
+  size: props.size,
   virtualize: !!props.virtualize
 }));
 const fuse = computed(() => defu({}, props.fuse, {
@@ -211,13 +215,13 @@ function onSelect(e, item) {
 
 <template>
   <DefineItemTemplate v-slot="{ item, index, group }">
-    <ListboxItem
-      :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
-      :disabled="item.disabled"
-      as-child
-      @select="onSelect($event, item)"
-    >
-      <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+    <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+      <ListboxItem
+        :value="props.valueKey ? get(item, props.valueKey) : omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
+        :disabled="item.disabled"
+        as-child
+        @select="onSelect($event, item)"
+      >
         <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
           <slot :name="item.slot || group?.slot || 'item'" :item="item" :index="index" :ui="ui">
             <slot :name="item.slot ? `${item.slot}-leading` : group?.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index" :ui="ui">
@@ -248,7 +252,7 @@ function onSelect(e, item) {
                 </slot>
               </span>
 
-              <span v-if="get(item, props.descriptionKey)" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
+              <span v-if="get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`]" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
                 <slot :name="item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`" :item="item" :index="index" :ui="ui">
                   {{ get(item, props.descriptionKey) }}
                 </slot>
@@ -277,17 +281,19 @@ function onSelect(e, item) {
             </span>
           </slot>
         </ULinkBase>
-      </ULink>
-    </ListboxItem>
+      </ListboxItem>
+    </ULink>
   </DefineItemTemplate>
 
   <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <ListboxFilter v-model="searchTerm" as-child>
+    <ListboxFilter v-if="input" v-model="searchTerm" as-child>
       <UInput
-        :placeholder="placeholder"
         variant="none"
+        :size="size"
+        v-bind="typeof props.input === 'object' ? props.input : {}"
+        :placeholder="placeholder"
         :autofocus="autofocus"
-        v-bind="inputProps"
+        :loading="loading"
         :loading-icon="loadingIcon"
         :trailing-icon="trailingIcon"
         :icon="icon || appConfig.ui.icons.search"
@@ -298,6 +304,7 @@ function onSelect(e, item) {
         <template v-if="history?.length && (back || !!slots.back)" #leading>
           <slot name="back" :ui="ui">
             <UButton
+              :size="size"
               :icon="backIcon || appConfig.ui.icons.arrowLeft"
               color="neutral"
               variant="link"
@@ -314,6 +321,7 @@ function onSelect(e, item) {
           <slot name="close" :ui="ui">
             <UButton
               v-if="close"
+              :size="size"
               :icon="closeIcon || appConfig.ui.icons.close"
               color="neutral"
               variant="ghost"

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

@@ -52,12 +52,16 @@ export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPalet
      */
     highlightedIcon?: IconProps['name'];
 }
-export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior' | 'by'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: CommandPalette['variants']['size'];
     /**
      * The icon displayed in the input.
      * @defaultValue appConfig.ui.icons.search
@@ -117,6 +121,11 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @IconifyIcon
      */
     backIcon?: IconProps['name'];
+    /**
+     * Configure the input or hide it with `false`.
+     * @defaultValue true
+     */
+    input?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
     groups?: G[];
     /**
      * Options for [useFuse](https://vueuse.org/integrations/useFuse).
@@ -143,11 +152,16 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
          */
         overscan?: number;
         /**
-         * Estimated size (in px) of each item
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
          * @defaultValue 32
          */
-        estimateSize?: number;
+        estimateSize?: number | ((index: number) => number);
     };
+    /**
+     * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+     * @defaultValue undefined
+     */
+    valueKey?: GetItemKeys<T>;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -194,13 +208,22 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
     'item-description': SlotProps<T>;
     'item-trailing': SlotProps<T>;
 } & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>;
-declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends CommandPaletteItem>(__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<(CommandPaletteProps<G, T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends CommandPaletteItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(CommandPaletteProps<G, T> & {
         searchTerm?: string;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
-        ref: HTMLElement;
-        value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void) & ((evt: "update:searchTerm", value: string) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+        onHighlight?: ((payload: {
+            ref: HTMLElement;
+            value: T;
+        } | undefined) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+        onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+        onLeave?: ((event: Event) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -213,8 +236,8 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -9,9 +9,9 @@ export interface ContainerProps {
 export interface ContainerSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -9,9 +9,9 @@ export interface ContainerProps {
 export interface ContainerSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -119,8 +119,12 @@ export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrN
     index: number;
     ui: ContextMenu['ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ContextMenuProps<T> & {
+        "onUpdate:open"?: ((payload: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -130,8 +134,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -119,8 +119,12 @@ export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrN
     index: number;
     ui: ContextMenu['ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ContextMenuProps<T> & {
+        "onUpdate:open"?: ((payload: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -130,8 +134,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -28,8 +28,16 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
     ui: ContextMenu['ui'];
     uiOverride?: ContextMenu['slots'];
 }
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuContentProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ContextMenuContentProps<T> & {
+        onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+        onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -39,8 +47,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/ContextMenuContent.vue

@@ -76,7 +76,7 @@ const groups = computed(
           <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="itemLabelExternalIcon" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
         </span>
 
-        <span v-if="get(item, props.descriptionKey)" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
+        <span v-if="get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description']" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
           <slot :name="item.slot ? `${item.slot}-description` : 'item-description'" :item="item" :active="active" :index="index">
             {{ get(item, props.descriptionKey) }}
           </slot>
@@ -153,19 +153,18 @@ const groups = computed(
             >
               <ReuseItemTemplate :item="item" :index="index" />
             </ContextMenu.CheckboxItem>
-            <ContextMenu.Item
-              v-else
-              as-child
-              :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
-              @select="item.onSelect"
-            >
-              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+            <ULink v-else v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+              <ContextMenu.Item
+                as-child
+                :disabled="item.disabled"
+                :text-value="get(item, props.labelKey)"
+                @select="item.onSelect"
+              >
                 <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </ULinkBase>
-              </ULink>
-            </ContextMenu.Item>
+              </ContextMenu.Item>
+            </ULink>
           </template>
         </ContextMenu.Group>
       </div>

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

@@ -28,8 +28,16 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
     ui: ContextMenu['ui'];
     uiOverride?: ContextMenu['slots'];
 }
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuContentProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ContextMenuContentProps<T> & {
+        onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+        onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -39,8 +47,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -10,9 +10,14 @@ export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' |
 export interface DashboardGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
+    storage: "cookie" | "local";
+    storageKey: string;
+    persistent: boolean;
+    unit: "%" | "rem" | "px";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -10,9 +10,14 @@ export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' |
 export interface DashboardGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
+    storage: "cookie" | "local";
+    storageKey: string;
+    persistent: boolean;
+    unit: "%" | "rem" | "px";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -46,9 +46,12 @@ export interface DashboardNavbarSlots {
         ui: DashboardNavbar['ui'];
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
+    toggle: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -46,9 +46,12 @@ export interface DashboardNavbarSlots {
         ui: DashboardNavbar['ui'];
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
+    toggle: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -18,9 +18,12 @@ export interface DashboardPanelSlots {
         onDoubleClick: (e: MouseEvent) => void;
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {
+    minSize: number;
+    resizable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -18,9 +18,12 @@ export interface DashboardPanelSlots {
         onDoubleClick: (e: MouseEvent) => void;
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {
+    minSize: number;
+    resizable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -9,9 +9,9 @@ export interface DashboardResizeHandleProps {
 export interface DashboardResizeHandleSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardResizeHandleSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardResizeHandleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -9,9 +9,9 @@ export interface DashboardResizeHandleProps {
 export interface DashboardResizeHandleSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardResizeHandleSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardResizeHandleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,6 +5,10 @@ import type { ButtonProps, InputProps, ModalProps, CommandPaletteProps, CommandP
 import type { ComponentConfig } from '../types/tv';
 type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch'>;
 export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: DashboardSearch['variants']['size'];
     /**
      * The icon displayed in the input.
      * @defaultValue appConfig.ui.icons.search
@@ -66,11 +70,13 @@ export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteGroup<Comma
         close: () => void;
     }): any;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchProps<CommandPaletteItem> & {
     open?: boolean;
     searchTerm?: string;
 }, {
-    commandPaletteRef: Readonly<import("vue").ShallowRef<any>>;
+    commandPaletteRef: Readonly<import("vue").ShallowRef<{} | null, {} | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "update:searchTerm": (value: string) => any;
@@ -80,9 +86,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dashbo
 }> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSearchSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    colorMode: boolean;
+    fullscreen: boolean;
+    shortcut: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSearchSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/DashboardSearch.vue

@@ -14,6 +14,7 @@ import { tv } from "../utils/tv";
 import UCommandPalette from "./CommandPalette.vue";
 import UModal from "./Modal.vue";
 const props = defineProps({
+  size: { type: null, required: false },
   icon: { type: null, required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false },
@@ -46,13 +47,14 @@ useRuntimeHook("dashboard:search:toggle", () => {
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
-const commandPaletteProps = useForwardProps(reactivePick(props, "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
+const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {}
 }));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSearch || {} })({
+  size: props.size,
   fullscreen: props.fullscreen
 }));
 const groups = computed(() => {