@bitrix24/b24ui-nuxt 0.5.11 → 0.6.1

package/dist/runtime/components/NavbarSpacer.vue

@@ -1,38 +1,20 @@
-<script lang="ts">
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/navbar-spacer'
-import { tv } from '../utils/tv'
-
-const appConfigNavbarSpacer = _appConfig as AppConfig & { b24ui: { navbarSpacer: Partial<typeof theme> } }
-
-const navbarSpacer = tv({ extend: tv(theme), ...(appConfigNavbarSpacer.b24ui?.navbarSpacer || {}) })
-
-export interface NavbarSpacerProps {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  class?: any
-  b24ui?: Partial<typeof navbarSpacer.slots>
-}
-
-export interface NavbarSpacerSlots {
-  default(props?: {}): any
-}
+<script>
+import theme from "#build/b24ui/navbar-spacer";
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-
-const props = withDefaults(defineProps<NavbarSpacerProps>(), {
-  as: 'div'
-})
-defineSlots<NavbarSpacerSlots>()
-
-// eslint-disable-next-line vue/no-dupe-keys
-const b24ui = navbarSpacer()
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false, default: "div" },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navbarSpacer || {} })());
 </script>
 
 <template>

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

@@ -0,0 +1,46 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/navbar-spacer';
+import type { ComponentConfig } from '../types/utils';
+type NavbarSpacer = ComponentConfig<typeof theme, AppConfig, 'navbarSpacer'>;
+export interface NavbarSpacerProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: NavbarSpacer['slots'];
+}
+export interface NavbarSpacerSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<NavbarSpacerProps>, {
+    as: string;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<NavbarSpacerProps>, {
+    as: string;
+}>>> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<NavbarSpacerSlots> & NavbarSpacerSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/NavigationMenu.vue

@@ -1,176 +1,50 @@
-<!-- eslint-disable vue/block-tag-newline -->
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/navigation-menu'
-import { tv } from '../utils/tv'
-import type { AvatarProps, BadgeProps, LinkProps, IconComponent } from '../types'
-import type {
-  ArrayOrNested,
-  DynamicSlots,
-  MergeTypes,
-  NestedItem,
-  PartialString,
-  EmitsToProps
-} from '../types/utils'
-
-const appConfigNavigationMenu = _appConfig as AppConfig & { b24ui: { navigationMenu: Partial<typeof theme> } }
-
-const navigationMenu = tv({ extend: tv(theme), ...(appConfigNavigationMenu.b24ui?.navigationMenu || {}) })
-
-export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type'> {
-  /** Description is only used when `orientation` is `horizontal`. */
-  description?: string
-  [key: string]: any
-}
-
-export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
-  label?: string
-  /**
-   * @IconComponent
-   */
-  icon?: IconComponent
-  avatar?: AvatarProps
-  /**
-   * Display a badge on the item.
-   * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
-   */
-  badge?: string | number | BadgeProps
-  /**
-   * @IconComponent
-   */
-  trailingIcon?: IconComponent
-  /**
-   * The type of the item.
-   * The `label` type only works on `vertical` orientation.
-   * @defaultValue 'link'
-   */
-  type?: 'label' | 'link'
-  slot?: string
-  value?: string
-  children?: NavigationMenuChildItem[]
-  /**
-   * With orientation=`horizontal` if `true` it will position the dropdown menu correctly
-   */
-  viewportRtl?: boolean
-  onSelect?(e: Event): void
-  [key: string]: any
-}
-
-type NavigationMenuVariants = VariantProps<typeof navigationMenu>
-
-export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  /**
-   * The icon displayed to open the menu.
-   * @defaultValue icons.chevronDown
-   * @IconComponent
-   */
-  trailingIcon?: IconComponent
-  /**
-   * The icon displayed when the item is an external link.
-   * Set to `false` to hide the external icon.
-   * @defaultValue icons.external
-   * @IconComponent
-   */
-  externalIcon?: boolean | IconComponent
-  items?: T
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: NavigationMenuVariants['color']
-  /**
-   * @defaultValue 'pill'
-   */
-  variant?: NavigationMenuVariants['variant']
-  /**
-   * The orientation of the menu.
-   * @defaultValue 'horizontal'
-   */
-  orientation?: NavigationMenuRootProps['orientation']
-  /**
-   * Collapse the navigation menu to only show icons.
-   * Only works when `orientation` is `vertical`.
-   * @defaultValue false
-   */
-  collapsed?: boolean
-  /** Display a line next to the active item. */
-  highlight?: boolean
-  /**
-   * @defaultValue 'primary'
-   */
-  highlightColor?: NavigationMenuVariants['highlightColor']
-  /**
-   * The content of the menu.
-   */
-  content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<NavigationMenuContentEmits>>
-  /**
-   * The orientation of the content.
-   * Only works when `orientation` is `horizontal`.
-   * @defaultValue 'vertical'
-   */
-  contentOrientation?: NavigationMenuVariants['contentOrientation']
-  /**
-   * Display an arrow alongside the menu.
-   * @defaultValue false
-   */
-  arrow?: boolean
-  /**
-   * The key used to get the label from the item.
-   * @defaultValue 'label'
-   */
-  labelKey?: keyof NestedItem<T>
-  class?: any
-  b24ui?: PartialString<typeof navigationMenu.slots>
-}
-
-export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
-
-type SlotProps<T extends NavigationMenuItem> = (props: { item: T, index: number, active?: boolean }) => any
-
-export type NavigationMenuSlots<
-  A extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>,
-  T extends NestedItem<A> = NestedItem<A>
-> = {
-  'item': SlotProps<T>
-  'item-leading': SlotProps<T>
-  'item-label': SlotProps<T>
-  'item-trailing': SlotProps<T>
-  'item-content': SlotProps<T>
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing' | 'content', { index: number, active?: boolean }>
-
+<script>
+import theme from "#build/b24ui/navigation-menu";
 </script>
 
-<script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>">
-import { computed, toRef } from 'vue'
-import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'reka-ui'
-import { createReusableTemplate } from '@vueuse/core'
-import { get, isArrayOfArray } from '../utils'
-import { pickLinkProps } from '../utils/link'
-import icons from '../dictionary/icons'
-import B24LinkBase from './LinkBase.vue'
-import B24Link from './Link.vue'
-import B24Avatar from './Avatar.vue'
-import B24Badge from './Badge.vue'
-import B24Collapsible from './Collapsible.vue'
-
-const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
-  orientation: 'horizontal',
-  contentOrientation: 'vertical',
-  externalIcon: true,
-  delayDuration: 0,
-  unmountOnHide: true,
-  labelKey: 'label'
-})
-const emits = defineEmits<NavigationMenuEmits>()
-const slots = defineSlots<NavigationMenuSlots<T>>()
-
+<script setup>
+import { computed, toRef } from "vue";
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { get, isArrayOfArray } from "../utils";
+import { tv } from "../utils/tv";
+import { pickLinkProps } from "../utils/link";
+import icons from "../dictionary/icons";
+import B24LinkBase from "./LinkBase.vue";
+import B24Link from "./Link.vue";
+import B24Avatar from "./Avatar.vue";
+import B24Badge from "./Badge.vue";
+import B24Collapsible from "./Collapsible.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  trailingIcon: { type: [Function, Object], required: false },
+  externalIcon: { type: [Boolean, Function, Object], required: false, default: true },
+  items: { type: null, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  collapsed: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  highlightColor: { type: null, required: false },
+  content: { type: Object, required: false },
+  contentOrientation: { type: null, required: false, default: "vertical" },
+  arrow: { type: Boolean, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  modelValue: { type: String, required: false },
+  defaultValue: { type: String, required: false },
+  delayDuration: { type: Number, required: false, default: 0 },
+  disableClickTrigger: { type: Boolean, required: false },
+  disableHoverTrigger: { type: Boolean, required: false },
+  skipDelayDuration: { type: Number, required: false },
+  disablePointerLeaveClose: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(computed(() => ({
   as: props.as,
   modelValue: props.modelValue,
@@ -182,12 +56,10 @@ const rootProps = useForwardPropsEmits(computed(() => ({
   disableHoverTrigger: props.disableHoverTrigger,
   disablePointerLeaveClose: props.disablePointerLeaveClose,
   unmountOnHide: props.unmountOnHide
-})), emits)
-
-const contentProps = toRef(() => props.content)
-
-const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, active?: boolean }>()
-const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, level?: number }>({
+})), emits);
+const contentProps = toRef(() => props.content);
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
     item: Object,
     index: Number,
@@ -197,13 +69,11 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: N
       default: 0
     }
   }
-})
-
-const getLabel = (item: NavigationMenuItem) => {
-  return get(item, props.labelKey as string)
-}
-
-const b24ui = computed(() => navigationMenu({
+});
+const getLabel = (item) => {
+  return get(item, props.labelKey);
+};
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navigationMenu || {} })({
   orientation: props.orientation,
   contentOrientation: props.contentOrientation,
   collapsed: props.collapsed,
@@ -211,35 +81,30 @@ const b24ui = computed(() => navigationMenu({
   variant: props.variant,
   highlight: props.highlight,
   highlightColor: props.highlightColor || props.color
-}))
-
-const lists = computed<NavigationMenuItem[][]>(() =>
-  props.items?.length
-    ? isArrayOfArray(props.items)
-      ? props.items
-      : [props.items]
-    : []
-)
+}));
+const lists = computed(
+  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
+);
 </script>
 
 <template>
   <DefineLinkTemplate v-slot="{ item, active, index }">
-    <slot :name="((item.slot || 'item') as keyof NavigationMenuSlots<T>)" :item="item" :index="index">
+    <slot :name="item.slot || 'item'" :item="item" :index="index">
       <span :class="b24ui.linkLabelWrapper({ class: props.b24ui?.linkLabelWrapper, active })">
-        <slot :name="((item.slot ? `${item.slot}-leading` : 'item-leading') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+        <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
           <Component
             :is="item.icon"
             v-if="item.icon"
             :class="b24ui.linkLeadingIcon({ class: props.b24ui?.linkLeadingIcon, active, disabled: !!item.disabled })"
           />
-          <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: props.b24ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
+          <B24Avatar v-else-if="item.avatar" :size="props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: props.b24ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
         </slot>
 
         <span
-          v-if="(!collapsed || orientation !== 'vertical') && (getLabel(item) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>])"
+          v-if="(!collapsed || orientation !== 'vertical') && (getLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
           :class="b24ui.linkLabel({ class: props.b24ui?.linkLabel, active })"
         >
-          <slot :name="((item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+          <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
             {{ getLabel(item) }}
           </slot>
 
@@ -250,11 +115,11 @@ const lists = computed<NavigationMenuItem[][]>(() =>
           />
         </span>
       </span>
-      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" :class="b24ui.linkTrailing({ class: props.b24ui?.linkTrailing })">
-        <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])" :class="b24ui.linkTrailing({ class: props.b24ui?.linkTrailing })">
+        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <Component
             :is="item.trailingIcon || trailingIcon || icons.chevronDown"
-            v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length)"
+            v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length"
             :class="b24ui.linkTrailingIcon({ class: props.b24ui?.linkTrailingIcon, active })"
           />
           <Component
@@ -268,8 +133,8 @@ const lists = computed<NavigationMenuItem[][]>(() =>
             color="danger"
             depth="dark"
             :use-fill="true"
-            :size="((props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
-            v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
+            :size="props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()"
+            v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
             :class="b24ui.linkTrailingBadge({ class: props.b24ui?.linkTrailingBadge })"
           />
         </slot>
@@ -279,19 +144,19 @@ const lists = computed<NavigationMenuItem[][]>(() =>
 
   <DefineItemTemplate v-slot="{ item, index, level }">
     <component
-      :is="(orientation === 'vertical' && item.children?.length && !collapsed) ? B24Collapsible : NavigationMenuItem"
+      :is="orientation === 'vertical' && item.children?.length && !collapsed ? B24Collapsible : NavigationMenuItem"
       as="li"
       :value="item.value || String(index)"
       :default-open="item.defaultOpen"
-      :unmount-on-hide="(orientation === 'vertical' && item.children?.length && !collapsed) ? unmountOnHide : undefined"
+      :unmount-on-hide="orientation === 'vertical' && item.children?.length && !collapsed ? unmountOnHide : void 0"
       :open="item.open"
     >
       <div v-if="orientation === 'vertical' && item.type === 'label'" :class="b24ui.label({ class: props.b24ui?.label })">
         <ReuseLinkTemplate :item="item" :index="index" />
       </div>
-      <B24Link v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && !collapsed) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
+      <B24Link v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="orientation === 'vertical' && item.children?.length && !collapsed ? {} : pickLinkProps(item)" custom>
         <component
-          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : NavigationMenuLink"
+          :is="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : NavigationMenuLink"
           as-child
           :active="active || item.active"
           :disabled="item.disabled"
@@ -303,12 +168,12 @@ const lists = computed<NavigationMenuItem[][]>(() =>
         </component>
 
         <NavigationMenuContent
-          v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])"
+          v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])"
           v-bind="contentProps"
           :data-viewport="item.viewportRtl ? 'rtl' : 'ltr'"
           :class="b24ui.content({ class: props.b24ui?.content })"
         >
-          <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+          <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active" :index="index">
             <ul :class="b24ui.childList({ class: props.b24ui?.childList })">
               <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="b24ui.childItem({ class: props.b24ui?.childItem })">
                 <B24Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>

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

@@ -0,0 +1,159 @@
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/navigation-menu';
+import type { AvatarProps, BadgeProps, LinkProps, IconComponent } from '../types';
+import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
+export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type'> {
+    /** Description is only used when `orientation` is `horizontal`. */
+    description?: string;
+    [key: string]: any;
+}
+export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
+    label?: string;
+    /**
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    avatar?: AvatarProps;
+    /**
+     * Display a badge on the item.
+     * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
+     */
+    badge?: string | number | BadgeProps;
+    /**
+     * @IconComponent
+     */
+    trailingIcon?: IconComponent;
+    /**
+     * The type of the item.
+     * The `label` type only works on `vertical` orientation.
+     * @defaultValue 'link'
+     */
+    type?: 'label' | 'link';
+    slot?: string;
+    value?: string;
+    children?: NavigationMenuChildItem[];
+    /**
+     * With orientation=`horizontal` if `true` it will position the dropdown menu correctly
+     */
+    viewportRtl?: boolean;
+    onSelect?(e: Event): void;
+    [key: string]: any;
+}
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed to open the menu.
+     * @defaultValue icons.chevronDown
+     * @IconComponent
+     */
+    trailingIcon?: IconComponent;
+    /**
+     * The icon displayed when the item is an external link.
+     * Set to `false` to hide the external icon.
+     * @defaultValue icons.external
+     * @IconComponent
+     */
+    externalIcon?: boolean | IconComponent;
+    items?: T;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: NavigationMenu['variants']['color'];
+    /**
+     * @defaultValue 'pill'
+     */
+    variant?: NavigationMenu['variants']['variant'];
+    /**
+     * The orientation of the menu.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: NavigationMenuRootProps['orientation'];
+    /**
+     * Collapse the navigation menu to only show icons.
+     * Only works when `orientation` is `vertical`.
+     * @defaultValue false
+     */
+    collapsed?: boolean;
+    /** Display a line next to the active item. */
+    highlight?: boolean;
+    /**
+     * @defaultValue 'primary'
+     */
+    highlightColor?: NavigationMenu['variants']['highlightColor'];
+    /**
+     * The content of the menu.
+     */
+    content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<NavigationMenuContentEmits>>;
+    /**
+     * The orientation of the content.
+     * Only works when `orientation` is `horizontal`.
+     * @defaultValue 'vertical'
+     */
+    contentOrientation?: NavigationMenu['variants']['contentOrientation'];
+    /**
+     * Display an arrow alongside the menu.
+     * @defaultValue false
+     */
+    arrow?: boolean;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: keyof NestedItem<T>;
+    class?: any;
+    b24ui?: NavigationMenu['slots'];
+}
+export interface NavigationMenuEmits extends NavigationMenuRootEmits {
+}
+type SlotProps<T extends NavigationMenuItem> = (props: {
+    item: T;
+    index: number;
+    active?: boolean;
+}) => any;
+export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
+    'item': SlotProps<T>;
+    'item-leading': SlotProps<T>;
+    'item-label': SlotProps<T>;
+    'item-trailing': SlotProps<T>;
+    'item-content': SlotProps<T>;
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing' | 'content', {
+    index: number;
+    active?: boolean;
+}>;
+declare const _default: <T extends ArrayOrNested<NavigationMenuItem>>(__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<any & NavigationMenuProps<T> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        item: SlotProps<NestedItem<T>>;
+        'item-leading': SlotProps<NestedItem<T>>;
+        'item-label': SlotProps<NestedItem<T>>;
+        'item-trailing': SlotProps<NestedItem<T>>;
+        'item-content': SlotProps<NestedItem<T>>;
+    } & DynamicSlots<MergeTypes<NestedItem<T>>, "leading" | "trailing" | "label" | "content", {
+        index: number;
+        active?: boolean;
+    }>> & {
+        item: SlotProps<NestedItem<T>>;
+        'item-leading': SlotProps<NestedItem<T>>;
+        'item-label': SlotProps<NestedItem<T>>;
+        'item-trailing': SlotProps<NestedItem<T>>;
+        'item-content': SlotProps<NestedItem<T>>;
+    } & DynamicSlots<MergeTypes<NestedItem<T>>, "leading" | "trailing" | "label" | "content", {
+        index: number;
+        active?: boolean;
+    }>;
+    emit: (evt: "update:modelValue", value: string) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};