@nuxt/ui 3.0.0-alpha.7 → 3.0.0-alpha.8

package/dist/runtime/components/Accordion.vue

@@ -1,10 +1,10 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { AccordionRootProps, AccordionRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/accordion'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { DynamicSlots } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
@@ -55,6 +55,36 @@ export type AccordionSlots<T extends { slot?: string }> = {
   body: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
 
+extendDevtoolsMeta({
+  defaultProps: {
+    items: [{
+      label: 'Getting Started',
+      icon: 'i-lucide-info',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Installation',
+      icon: 'i-lucide-download',
+      disabled: true,
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Theming',
+      icon: 'i-lucide-pipette',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Layouts',
+      icon: 'i-lucide-layout-dashboard',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Components',
+      icon: 'i-lucide-layers-3',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Utilities',
+      icon: 'i-lucide-wrench',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }]
+  }
+})
 </script>
 
 <script setup lang="ts" generic="T extends AccordionItem">
@@ -63,6 +93,7 @@ import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, Accord
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { get } from '../utils'
+import UIcon from './Icon.vue'
 
 const props = withDefaults(defineProps<AccordionProps<T>>(), {
   type: 'single',

package/dist/runtime/components/Alert.vue

@@ -3,6 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/alert'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, ButtonProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
@@ -56,6 +57,8 @@ export interface AlertSlots {
   actions(props?: {}): any
   close(props: { ui: any }): any
 }
+
+extendDevtoolsMeta<AlertProps>({ defaultProps: { title: 'Heads up!' } })
 </script>
 
 <script setup lang="ts">
@@ -64,6 +67,7 @@ import { Primitive } from 'radix-vue'
 import { useAppConfig } from '#imports'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
+import UButton from './Button.vue'
 
 const props = defineProps<AlertProps>()
 const emits = defineEmits<AlertEmits>()

package/dist/runtime/components/App.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { ToasterProps } from '../types'
 
 export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
@@ -10,6 +11,12 @@ export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
 export interface AppSlots {
   default(props?: {}): any
 }
+
+export default {
+  name: 'App'
+}
+
+extendDevtoolsMeta({ ignore: true })
 </script>
 
 <script setup lang="ts">
@@ -34,6 +41,7 @@ const toasterProps = toRef(() => props.toaster)
       <UToaster v-if="toaster !== null" v-bind="toasterProps">
         <slot />
       </UToaster>
+      <slot v-else />
     </TooltipProvider>
 
     <UModalProvider />

package/dist/runtime/components/Avatar.vue

@@ -2,6 +2,7 @@
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { AvatarFallbackProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar'
 
@@ -14,9 +15,9 @@ type AvatarVariants = VariantProps<typeof avatar>
 export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'img'
+   * @defaultValue 'span'
    */
-  as?: string | object
+  as?: any
   src?: string
   alt?: string
   icon?: string
@@ -25,6 +26,8 @@ export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
   class?: any
   ui?: Partial<typeof avatar.slots>
 }
+
+extendDevtoolsMeta<AvatarProps>({ defaultProps: { src: 'https://avatars.githubusercontent.com/u/739984?v=4', alt: 'Benjamin Canac' } })
 </script>
 
 <script setup lang="ts">
@@ -33,10 +36,11 @@ import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-
 import { reactivePick } from '@vueuse/core'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 import UIcon from './Icon.vue'
+import ImageComponent from '#build/ui-image-component'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<AvatarProps>()
+const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
 
 const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
@@ -48,15 +52,29 @@ const { size } = useAvatarGroup(props)
 const ui = computed(() => avatar({
   size: size.value
 }))
+
+const sizePx = computed(() => ({
+  '3xs': 16,
+  '2xs': 20,
+  'xs': 24,
+  'sm': 28,
+  'md': 32,
+  'lg': 36,
+  'xl': 40,
+  '2xl': 44,
+  '3xl': 48
+})[props.size || 'md'])
 </script>
 
 <template>
-  <AvatarRoot :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <AvatarRoot :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <AvatarImage
       v-if="src"
-      :as="as"
+      :as="ImageComponent"
       :src="src"
       :alt="alt"
+      :width="sizePx"
+      :height="sizePx"
       v-bind="$attrs"
       :class="ui.image({ class: props.ui?.image })"
     />

package/dist/runtime/components/AvatarGroup.vue

@@ -3,6 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar-group'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
 
@@ -28,6 +29,8 @@ export interface AvatarGroupProps {
 export interface AvatarGroupSlots {
   default(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'AvatarGroupExample' })
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Badge.vue

@@ -3,6 +3,9 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/badge'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
 
@@ -10,7 +13,7 @@ const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
 
 type BadgeVariants = VariantProps<typeof badge>
 
-export interface BadgeProps {
+export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'span'
@@ -21,26 +24,53 @@ export interface BadgeProps {
   variant?: BadgeVariants['variant']
   size?: BadgeVariants['size']
   class?: any
+  ui?: Partial<typeof badge.slots>
 }
 
 export interface BadgeSlots {
+  leading(props?: {}): any
   default(props?: {}): any
+  trailing(props?: {}): any
 }
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import UIcon from './Icon.vue'
 
 const props = withDefaults(defineProps<BadgeProps>(), {
   as: 'span'
 })
 defineSlots<BadgeSlots>()
+
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const ui = computed(() => badge({
+  color: props.color,
+  variant: props.variant,
+  size: props.size
+}))
+
+extendDevtoolsMeta({ defaultProps: { label: 'Badge' } })
 </script>
 
 <template>
-  <Primitive :as="as" :class="badge({ color, variant, size, class: props.class })">
+  <Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
+    <slot name="leading">
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+    </slot>
+
     <slot>
-      {{ label }}
+      <span v-if="label" :class="ui.label({ class: props.ui?.label })">
+        {{ label }}
+      </span>
+    </slot>
+
+    <slot name="trailing">
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
     </slot>
   </Primitive>
 </template>

package/dist/runtime/components/Breadcrumb.vue

@@ -1,9 +1,9 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/breadcrumb'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -49,6 +49,30 @@ export type BreadcrumbSlots<T extends { slot?: string }> = {
   'separator'(props?: {}): any
 } & DynamicSlots<T, SlotProps<T>>
 
+extendDevtoolsMeta({
+  defaultProps: {
+    items: [
+      { label: 'Home', to: '/' },
+      {
+        slot: 'dropdown',
+        icon: 'i-lucide-ellipsis',
+        children: [{
+          label: 'Documentation'
+        }, {
+          label: 'Themes'
+        }, {
+          label: 'GitHub'
+        }]
+      }, {
+        label: 'Components',
+        disabled: true
+      }, {
+        label: 'Breadcrumb',
+        to: '/components/breadcrumb'
+      }
+    ]
+  }
+})
 </script>
 
 <script setup lang="ts" generic="T extends BreadcrumbItem">

package/dist/runtime/components/Button.vue

@@ -5,9 +5,9 @@ import _appConfig from '#build/app.config'
 import theme from '#build/ui/button'
 import type { LinkProps } from './Link.vue'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps } from '../types'
 import type { PartialString } from '../types/utils'
-import { formLoadingInjectionKey } from '../composables/useFormField'
 
 const appConfig = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
 
@@ -31,6 +31,9 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   ui?: PartialString<typeof button.slots>
 }
 
+// Injects props to use as default in the devtools playground.
+extendDevtoolsMeta<ButtonProps>({ defaultProps: { label: 'Click me!' } })
+
 export interface ButtonSlots {
   leading(props?: {}): any
   default(props?: {}): any
@@ -43,9 +46,11 @@ import { type Ref, computed, ref, inject } from 'vue'
 import { useForwardProps } from 'radix-vue'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useButtonGroup } from '../composables/useButtonGroup'
+import { formLoadingInjectionKey } from '../composables/useFormField'
 import { omit } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 import ULink from './Link.vue'
 
 const props = defineProps<ButtonProps>()

package/dist/runtime/components/ButtonGroup.vue

@@ -3,6 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/button-group'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
 
@@ -28,6 +29,8 @@ export interface ButtonGroupProps {
 export interface ButtonGroupSlots {
   default(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'ButtonGroupExample' })
 </script>
 
 <script setup lang="ts">
@@ -47,7 +50,7 @@ provide(buttonGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="buttonGroup({ orientation })">
+  <Primitive :as="as" :class="buttonGroup({ orientation, class: props.class })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/Card.vue

@@ -3,6 +3,7 @@ import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/card'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
 
@@ -23,6 +24,8 @@ export interface CardSlots {
   default(props?: {}): any
   footer(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'CardExample' })
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Carousel.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
@@ -11,6 +10,7 @@ import type { FadeOptionsType } from 'embla-carousel-fade'
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/carousel'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { ButtonProps } from '../types'
 import type { AcceptableValue, PartialString } from '../types/utils'
 
@@ -91,6 +91,7 @@ export type CarouselSlots<T> = {
   default(props: { item: T, index: number }): any
 }
 
+extendDevtoolsMeta({ example: 'CarouselExample' })
 </script>
 
 <script setup lang="ts" generic="T extends AcceptableValue">
@@ -298,7 +299,11 @@ defineExpose({
 
       <div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
-          <button :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })" @click="scrollTo(index)" />
+          <button
+            :aria-label="`Go to slide ${index + 1}`"
+            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            @click="scrollTo(index)"
+          />
         </template>
       </div>
     </div>

package/dist/runtime/components/Checkbox.vue

@@ -4,6 +4,7 @@ import type { CheckboxRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/checkbox'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
 
@@ -42,6 +43,8 @@ export interface CheckboxSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
 }
+
+extendDevtoolsMeta({ defaultProps: { label: 'Check me!' } })
 </script>
 
 <script setup lang="ts">
@@ -50,6 +53,7 @@ import { CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'radix-v
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
 
 const props = defineProps<CheckboxProps>()
 const slots = defineSlots<CheckboxSlots>()

package/dist/runtime/components/Chip.vue

@@ -3,6 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/chip'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
 
@@ -37,13 +38,17 @@ export interface ChipSlots {
   default(props?: {}): any
   content(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'ChipExample' })
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Primitive } from 'radix-vue'
+import { Primitive, Slot } from 'radix-vue'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<ChipProps>(), {
   inset: false,
   standalone: false
@@ -65,7 +70,9 @@ const ui = computed(() => chip({
 
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
-    <slot />
+    <Slot v-bind="$attrs">
+      <slot />
+    </Slot>
 
     <span v-if="show" :class="ui.base({ class: props.ui?.base })">
       <slot name="content">

package/dist/runtime/components/Collapsible.vue

@@ -4,6 +4,7 @@ import type { CollapsibleRootProps, CollapsibleRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/collapsible'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
 
@@ -25,6 +26,8 @@ export interface CollapsibleSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'CollapsibleExample' })
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/CommandPalette.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { ComboboxRootProps, ComboboxRootEmits } from 'radix-vue'
@@ -8,6 +7,7 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/command-palette'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -114,6 +114,7 @@ export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?:
   'item-trailing': SlotProps<T>
 } & DynamicSlots<G, SlotProps<T>> & DynamicSlots<T, SlotProps<T>>
 
+extendDevtoolsMeta({ example: 'CommandPaletteExample', ignoreProps: ['groups'] })
 </script>
 
 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
@@ -127,6 +128,7 @@ import { omit, get } from '../utils'
 import { highlight } from '../utils/fuse'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
+import UButton from './Button.vue'
 import UChip from './Chip.vue'
 import UKbd from './Kbd.vue'
 import UInput from './Input.vue'

package/dist/runtime/components/Container.vue

@@ -3,6 +3,7 @@ import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/container'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { container: Partial<typeof theme> } }
 
@@ -20,6 +21,8 @@ export interface ContainerProps {
 export interface ContainerSlots {
   default(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'ContainerExample' })
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/ContextMenu.vue

@@ -1,10 +1,10 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/context-menu'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, KbdProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -12,9 +12,12 @@ const appConfig = _appConfig as AppConfig & { ui: { contextMenu: Partial<typeof
 
 const contextMenu = tv({ extend: tv(theme), ...(appConfig.ui?.contextMenu || {}) })
 
+type ContextMenuVariants = VariantProps<typeof contextMenu>
+
 export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
   label?: string
   icon?: string
+  color?: ContextMenuVariants['color']
   avatar?: AvatarProps
   content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
   kbds?: KbdProps['value'][] | KbdProps[]
@@ -34,8 +37,6 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
   onUpdateChecked?(checked: boolean): void
 }
 
-type ContextMenuVariants = VariantProps<typeof contextMenu>
-
 export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'> {
   size?: ContextMenuVariants['size']
   items?: T[] | T[][]
@@ -78,6 +79,66 @@ export type ContextMenuSlots<T extends { slot?: string }> = {
   'item-trailing': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
 
+extendDevtoolsMeta({
+  example: 'ContextMenuExample',
+  ignoreProps: ['items'],
+  defaultProps: {
+    items: [
+      [{
+        label: 'My account',
+        avatar: {
+          src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+        }
+      }],
+      [{
+        label: 'Appearance',
+        children: [{
+          label: 'System',
+          icon: 'i-lucide-monitor'
+        }, {
+          label: 'Light',
+          icon: 'i-lucide-sun'
+        }, {
+          label: 'Dark',
+          icon: 'i-lucide-moon'
+        }]
+      }],
+      [{
+        label: 'Show Sidebar',
+        kbds: ['meta', 'S']
+      }, {
+        label: 'Show Toolbar',
+        kbds: ['shift', 'meta', 'D']
+      }, {
+        label: 'Collapse Pinned Tabs',
+        disabled: true
+      }], [{
+        label: 'Refresh the Page'
+      }, {
+        label: 'Clear Cookies and Refresh'
+      }, {
+        label: 'Clear Cache and Refresh'
+      }, {
+        type: 'separator'
+      }, {
+        label: 'Developer',
+        children: [[{
+          label: 'View Source',
+          kbds: ['option', 'meta', 'U']
+        }, {
+          label: 'Developer Tools',
+          kbds: ['option', 'meta', 'I']
+        }], [{
+          label: 'Inspect Elements',
+          kbds: ['option', 'meta', 'C']
+        }], [{
+          label: 'JavaScript Console',
+          kbds: ['option', 'meta', 'J']
+        }]]
+      }]
+    ]
+  }
+})
 </script>
 
 <script setup lang="ts" generic="T extends ContextMenuItem">