@nuxt/ui 3.0.0-alpha.9 → 3.0.0-beta.1

package/dist/runtime/components/LinkBase.vue

@@ -13,7 +13,7 @@ export interface LinkBaseProps {
 </script>
 
 <script setup lang="ts">
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 
 const props = withDefaults(defineProps<LinkBaseProps>(), {
   as: 'button',

package/dist/runtime/components/Modal.vue

@@ -1,15 +1,14 @@
 <script lang="ts">
-import { tv } from 'tailwind-variants'
-import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix-vue'
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/modal'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 
-const appConfig = _appConfig as AppConfig & { ui: { modal: Partial<typeof theme> } }
+const appConfigModal = _appConfig as AppConfig & { ui: { modal: Partial<typeof theme> } }
 
-const modal = tv({ extend: tv(theme), ...(appConfig.ui?.modal || {}) })
+const modal = tv({ extend: tv(theme), ...(appConfigModal.ui?.modal || {}) })
 
 export interface ModalProps extends DialogRootProps {
   title?: string
@@ -41,22 +40,24 @@ export interface ModalProps extends DialogRootProps {
    * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
    * @defaultValue true
    */
-  close?: ButtonProps | boolean
+  close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
    */
   closeIcon?: string
   /**
-   * When `true`, the modal will not close when clicking outside.
-   * @defaultValue false
+   * When `false`, the modal will not close when clicking outside or pressing escape.
+   * @defaultValue true
    */
-  preventClose?: boolean
+  dismissible?: boolean
   class?: any
   ui?: Partial<typeof modal.slots>
 }
 
-export interface ModalEmits extends DialogRootEmits {}
+export interface ModalEmits extends DialogRootEmits {
+  'after:leave': []
+}
 
 export interface ModalSlots {
   default(props: { open: boolean }): any
@@ -68,13 +69,11 @@ export interface ModalSlots {
   body(props?: {}): any
   footer(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'ModalExample' })
 </script>
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
-import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
@@ -85,34 +84,32 @@ const props = withDefaults(defineProps<ModalProps>(), {
   portal: true,
   overlay: true,
   transition: true,
-  modal: true
+  modal: true,
+  dismissible: true
 })
 const emits = defineEmits<ModalEmits>()
 const slots = defineSlots<ModalSlots>()
 
+const { t } = useLocale()
+const appConfig = useAppConfig()
+
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
-  if (props.preventClose) {
+  if (!props.dismissible) {
     return {
       pointerDownOutside: (e: Event) => e.preventDefault(),
       interactOutside: (e: Event) => e.preventDefault(),
-      escapeKeyDown: (e: Event) => e.preventDefault()
+      escapeKeyDown: (e: Event) => e.preventDefault(),
+      closeAutoFocus: (e: Event) => e.preventDefault()
     }
   }
 
   return {
-    interactOutside: (e: Event) => {
-      if (e.target instanceof Element && e.target.closest('[data-sonner-toaster]')) {
-        return e.preventDefault()
-      }
-    }
+    closeAutoFocus: (e: Event) => e.preventDefault()
   }
 })
 
-const appConfig = useAppConfig()
-const { t } = useLocale()
-
 const ui = computed(() => modal({
   transition: props.transition,
   fullscreen: props.fullscreen
@@ -121,28 +118,44 @@ const ui = computed(() => modal({
 
 <template>
   <DialogRoot v-slot="{ open }" v-bind="rootProps">
-    <DialogTrigger v-if="!!slots.default" as-child>
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </DialogTrigger>
 
     <DialogPortal :disabled="!portal">
       <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
-      <DialogContent :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">
+        <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
+          <DialogTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DialogTitle>
+
+          <DialogDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DialogDescription>
+        </VisuallyHidden>
+
         <slot name="content">
           <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
             <slot name="header">
-              <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
-                <slot name="title">
-                  {{ title }}
-                </slot>
-              </DialogTitle>
-
-              <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-                <slot name="description">
-                  {{ description }}
-                </slot>
-              </DialogDescription>
+              <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DialogTitle>
+
+                <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DialogDescription>
+              </div>
 
               <DialogClose as-child>
                 <slot name="close" :ui="ui">
@@ -153,7 +166,7 @@ const ui = computed(() => modal({
                     color="neutral"
                     variant="ghost"
                     :aria-label="t('modal.close')"
-                    v-bind="typeof close === 'object' ? close : undefined"
+                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
                     :class="ui.close({ class: props.ui?.close })"
                   />
                 </slot>

package/dist/runtime/components/NavigationMenu.vue

@@ -1,28 +1,38 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, CollapsibleRootProps } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, CollapsibleRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/navigation-menu'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { AvatarProps, BadgeProps, LinkProps } from '../types'
 import type { DynamicSlots, MaybeArrayOfArray, MaybeArrayOfArrayItem, PartialString } from '../types/utils'
 
-const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
+const appConfigNavigationMenu = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
 
-const navigationMenu = tv({ extend: tv(theme), ...(appConfig.ui?.navigationMenu || {}) })
+const navigationMenu = tv({ extend: tv(theme), ...(appConfigNavigationMenu.ui?.navigationMenu || {}) })
 
-export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'children'> {
+export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'children' | 'type'> {
   /** Description is only used when `orientation` is `horizontal`. */
   description?: string
 }
 
-export interface NavigationMenuItem extends Omit<LinkProps, 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
+export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
   label?: string
   icon?: string
   avatar?: AvatarProps
+  /**
+   * Display a badge on the item.
+   * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
+   */
   badge?: string | number | BadgeProps
   trailingIcon?: string
+  /**
+   * The type of the item.
+   * The `label` type only works on `vertical` orientation.
+   * @defaultValue 'link'
+   */
+  type?: 'label' | 'link'
   slot?: string
   value?: string
   children?: NavigationMenuChildItem[]
@@ -31,7 +41,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'raw' | 'custom'>, P
 
 type NavigationMenuVariants = VariantProps<typeof navigationMenu>
 
-export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'modelValue' | 'skipDelayDuration'> {
+export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -42,6 +52,12 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'd
    * @defaultValue appConfig.ui.icons.chevronDown
    */
   trailingIcon?: string
+  /**
+   * The icon displayed when the item is an external link.
+   * Set to `false` to hide the external icon.
+   * @defaultValue appConfig.ui.icons.external
+   */
+  externalIcon?: boolean | string
   items?: T
   color?: NavigationMenuVariants['color']
   variant?: NavigationMenuVariants['variant']
@@ -50,11 +66,23 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'd
    * @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
   highlightColor?: NavigationMenuVariants['highlightColor']
   /** The content of the menu. */
   content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * The orientation of the content.
+   * Only works when `orientation` is `horizontal`.
+   * @defaultValue 'horizontal'
+   */
+  contentOrientation?: NavigationMenuVariants['contentOrientation']
   /**
    * Display an arrow alongside the menu.
    * @defaultValue false
@@ -80,51 +108,13 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
   'item-trailing': SlotProps<T>
   'item-content': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  ignoreProps: ['items'],
-  defaultProps: {
-    items: [
-      [{
-        label: 'Documentation',
-        icon: 'i-lucide-book-open',
-        badge: 10,
-        children: [{
-          label: 'Introduction',
-          description: 'Fully styled and customizable components for Nuxt.',
-          icon: 'i-lucide-house'
-        }, {
-          label: 'Installation',
-          description: 'Learn how to install and configure Nuxt UI in your application.',
-          icon: 'i-lucide-cloud-download'
-        }, {
-          label: 'Theming',
-          description: 'Learn how to customize the look and feel of the components.',
-          icon: 'i-lucide-swatch-book'
-        }, {
-          label: 'Shortcuts',
-          description: 'Learn how to display and define keyboard shortcuts in your app.',
-          icon: 'i-lucide-monitor'
-        }]
-      }, {
-        label: 'GitHub',
-        icon: 'i-simple-icons-github',
-        to: 'https://github.com/nuxt/ui',
-        target: '_blank'
-      }, {
-        label: 'Help',
-        icon: 'i-lucide-circle-help',
-        disabled: true
-      }]
-    ]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<NavigationMenuItem>">
-import { computed, reactive, toRef } from 'vue'
-import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'radix-vue'
+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 } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
@@ -136,27 +126,44 @@ import UCollapsible from './Collapsible.vue'
 
 const props = withDefaults(defineProps<NavigationMenuProps<I>>(), {
   orientation: 'horizontal',
+  contentOrientation: 'horizontal',
+  externalIcon: true,
   delayDuration: 0,
+  unmountOnHide: true,
   labelKey: 'label'
 })
 const emits = defineEmits<NavigationMenuEmits>()
 const slots = defineSlots<NavigationMenuSlots<T>>()
 
-const rootProps = useForwardPropsEmits(reactive({
+const rootProps = useForwardPropsEmits(computed(() => ({
   as: props.as,
   modelValue: props.modelValue,
   defaultValue: props.defaultValue,
   delayDuration: props.delayDuration,
   skipDelayDuration: props.skipDelayDuration,
-  orientation: props.orientation
-}), emits)
+  orientation: props.orientation,
+  disableClickTrigger: props.disableClickTrigger,
+  disableHoverTrigger: props.disableHoverTrigger,
+  disablePointerLeaveClose: props.disablePointerLeaveClose,
+  unmountOnHide: props.unmountOnHide
+})), emits)
 
 const contentProps = toRef(() => props.content)
 
-const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, active?: boolean, index: number }>()
+const appConfig = useAppConfig()
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, active?: boolean }>()
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, level?: number }>({
+  props: {
+    item: Object,
+    index: Number,
+    level: Number
+  }
+})
 
 const ui = computed(() => navigationMenu({
   orientation: props.orientation,
+  contentOrientation: props.contentOrientation,
+  collapsed: props.collapsed,
   color: props.color,
   variant: props.variant,
   highlight: props.highlight,
@@ -167,22 +174,25 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
 </script>
 
 <template>
-  <DefineItemTemplate v-slot="{ item, active, index }">
+  <DefineLinkTemplate v-slot="{ item, active, index }">
     <slot :name="item.slot || 'item'" :item="(item as T)" :index="index">
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="(item as T)" :active="active" :index="index">
         <UAvatar v-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active, disabled: !!item.disabled })" />
       </slot>
 
-      <span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+      <span
+        v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
+        :class="ui.linkLabel({ class: props.ui?.linkLabel })"
+      >
         <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="(item as T)" :active="active" :index="index">
           {{ get(item, props.labelKey as string) }}
         </slot>
 
-        <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
+        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
       </span>
 
-      <span v-if="item.badge || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+      <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="ui.linkTrailing({ class: props.ui?.linkTrailing })">
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="(item as T)" :active="active" :index="index">
           <UBadge
             v-if="item.badge"
@@ -194,79 +204,84 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
           />
 
           <UIcon v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length)" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
+          <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
         </slot>
       </span>
     </slot>
-  </DefineItemTemplate>
+  </DefineLinkTemplate>
 
-  <NavigationMenuRoot v-bind="rootProps" :data-orientation="orientation" :class="ui.root({ class: [props.class, props.ui?.root] })">
-    <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
-      <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
+  <DefineItemTemplate v-slot="{ item, index, level = 0 }">
+    <component
+      :is="(orientation === 'vertical' && item.children?.length && !collapsed) ? UCollapsible : NavigationMenuItem"
+      as="li"
+      :value="item.value || String(index)"
+      :default-open="item.defaultOpen"
+      :unmount-on-hide="(orientation === 'vertical' && item.children?.length && !collapsed) ? unmountOnHide : undefined"
+      :open="item.open"
+    >
+      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: props.ui?.label })">
+        <ReuseLinkTemplate :item="(item as T)" :index="index" />
+      </div>
+      <ULink 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>
         <component
-          :is="(item.children?.length && orientation === 'vertical') ? UCollapsible : NavigationMenuItem"
-          v-for="(item, index) in list"
-          :key="`list-${listIndex}-${index}`"
-          as="li"
-          :value="item.value || String(index)"
-          :default-open="item.defaultOpen"
-          :open="item.open"
-          :class="ui.item({ class: props.ui?.item })"
+          :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"
+          @select="item.onSelect"
         >
-          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-            <component
-              :is="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) ? NavigationMenuTrigger : NavigationMenuLink"
-              as-child
-              :active="active"
-              :disabled="item.disabled"
-              @select="item.onSelect"
-            >
-              <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active, disabled: !!item.disabled })">
-                <ReuseItemTemplate :item="(item as T)" :active="active" :index="index" />
-              </ULinkBase>
-            </component>
-
-            <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
-              <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="(item as T)" :active="active" :index="index">
-                <ul :class="ui.childList({ class: props.ui?.childList })">
-                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
-                    <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
-                      <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                        <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, childItem.class], active: childActive })">
-                          <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: props.ui?.childLinkIcon, active: childActive })" />
-
-                          <div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
-                            <p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
-                              {{ get(childItem, props.labelKey as string) }}
-
-                              <UIcon v-if="childItem.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
-                            </p>
-                            <p v-if="childItem.description" :class="ui.childLinkDescription({ class: props.ui?.childLinkDescription, active: childActive })">
-                              {{ childItem.description }}
-                            </p>
-                          </div>
-                        </ULinkBase>
-                      </NavigationMenuLink>
-                    </ULink>
-                  </li>
-                </ul>
-              </slot>
-            </NavigationMenuContent>
-          </ULink>
+          <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+            <ReuseLinkTemplate :item="(item as T)" :active="active || item.active" :index="index" />
+          </ULinkBase>
+        </component>
 
-          <template v-if="orientation === 'vertical' && item.children?.length" #content>
+        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
+          <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="(item as T)" :active="active" :index="index">
             <ul :class="ui.childList({ class: props.ui?.childList })">
               <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
                 <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                   <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                    <ULinkBase v-bind="childSlotProps" :class="ui.link({ class: [props.ui?.link, childItem.class], active: childActive, disabled: !!childItem.disabled })">
-                      <ReuseItemTemplate :item="(childItem as T)" :active="childActive" :index="childIndex" />
+                    <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, childItem.class], active: childActive })">
+                      <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: props.ui?.childLinkIcon, active: childActive })" />
+
+                      <div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
+                        <p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
+                          {{ get(childItem, props.labelKey as string) }}
+
+                          <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
+                        </p>
+                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: props.ui?.childLinkDescription, active: childActive })">
+                          {{ childItem.description }}
+                        </p>
+                      </div>
                     </ULinkBase>
                   </NavigationMenuLink>
                 </ULink>
               </li>
             </ul>
-          </template>
-        </component>
+          </slot>
+        </NavigationMenuContent>
+      </ULink>
+
+      <template v-if="orientation === 'vertical' && item.children?.length && !collapsed" #content>
+        <ul :class="ui.childList({ class: props.ui?.childList })">
+          <ReuseItemTemplate
+            v-for="(childItem, childIndex) in item.children"
+            :key="childIndex"
+            :item="childItem"
+            :index="childIndex"
+            :level="level + 1"
+            :class="ui.childItem({ class: props.ui?.childItem })"
+          />
+        </ul>
+      </template>
+    </component>
+  </DefineItemTemplate>
+
+  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
+      <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
+        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: props.ui?.item })" />
       </NavigationMenuList>
 
       <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />

package/dist/runtime/components/OverlayProvider.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useOverlay, type Overlay } from '../composables/useOverlay'
+
+const { overlays, unMount, close } = useOverlay()
+
+const mountedOverlays = computed(() => overlays.filter((overlay: Overlay) => overlay.isMounted))
+
+const onAfterLeave = (id: symbol) => {
+  close(id)
+  unMount(id)
+}
+
+const onClose = (id: symbol, value: any) => {
+  close(id, value)
+}
+</script>
+
+<template>
+  <component
+    :is="overlay.component"
+    v-for="overlay in mountedOverlays"
+    :key="overlay.id"
+    v-bind="overlay.props"
+    v-model:open="overlay.modelValue"
+    @close="(value:any) => onClose(overlay.id, value)"
+    @after:leave="onAfterLeave(overlay.id)"
+  />
+</template>

package/dist/runtime/components/Pagination.vue

@@ -1,18 +1,17 @@
 <script lang="ts">
-import { tv } from 'tailwind-variants'
-import type { PaginationRootProps, PaginationRootEmits } from 'radix-vue'
+import type { PaginationRootProps, PaginationRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import type { RouteLocationRaw } from '#vue-router'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/pagination'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 
-const appConfig = _appConfig as AppConfig & { ui: { pagination: Partial<typeof theme> } }
+const appConfigPagination = _appConfig as AppConfig & { ui: { pagination: Partial<typeof theme> } }
 
-const pagination = tv({ extend: tv(theme), ...(appConfig.ui?.pagination || {}) })
+const pagination = tv({ extend: tv(theme), ...(appConfigPagination.ui?.pagination || {}) })
 
-export interface PaginationProps extends Pick<PaginationRootProps, 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'> {
+export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'>> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -98,13 +97,11 @@ export interface PaginationSlots {
     index: number
   }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { total: 50 } })
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast, useForwardPropsEmits } from 'radix-vue'
+import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'