@byyuurin/ui 0.0.9 → 0.0.10

package/dist/runtime/app/injections.js

@@ -9,6 +9,41 @@ export const {
   inject: injectButtonGroup,
   provide: provideButtonGroup
 } = defineInjection("ui.button-group");
+export const {
+  InjectionKey: InjectionKeyFormOptions,
+  inject: injectFormOptions,
+  provide: provideFormOptions
+} = defineInjection("ui.form-options");
+export const {
+  InjectionKey: InjectionKeyFormBus,
+  inject: injectFormBus,
+  provide: provideFormBus
+} = defineInjection("ui.form-bus");
+export const {
+  InjectionKey: InjectionKeyFormItem,
+  inject: injectFormItem,
+  provide: provideFormItem
+} = defineInjection("ui.form-item");
+export const {
+  InjectionKey: InjectionKeyFormInputId,
+  inject: injectFormInputId,
+  provide: provideFormInputId
+} = defineInjection("ui.form-input-id");
+export const {
+  InjectionKey: InjectionKeyFormInputs,
+  inject: injectFormInputs,
+  provide: provideFormInputs
+} = defineInjection("ui.form-inputs");
+export const {
+  InjectionKey: InjectionKeyFormLoading,
+  inject: injectFormLoading,
+  provide: provideFormLoading
+} = defineInjection("ui.form-loading");
+export const {
+  InjectionKey: InjectionKeyFormErrors,
+  inject: injectFormErrors,
+  provide: provideFormErrors
+} = defineInjection("ui.form-errors", null);
 export const {
   InjectionKey: InjectionKeyLocaleContext,
   inject: injectLocaleContext,

package/dist/runtime/components/Accordion.vue

@@ -1,25 +1,10 @@
 <script lang="ts">
 import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
 import type { accordion } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ComponentAttrs, DynamicSlots } from '../types'
 
 export interface AccordionEmits extends AccordionRootEmits {}
 
-type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
-
-type DynamicSlots<T extends { slot?: string }, SlotProps, Slot = T['slot']> =
-  Slot extends string
-    ? Record<Slot | `${Slot}-body`, SlotProps>
-    : Record<string, never>
-
-export type AccordionSlots<T extends { slot?: string }> = {
-  default?: SlotProps<T>
-  leading?: SlotProps<T>
-  trailing?: SlotProps<T>
-  content?: SlotProps<T>
-  body?: SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
-
 export interface AccordionItem {
   label?: string
   icon?: string
@@ -29,9 +14,20 @@ export interface AccordionItem {
   /** A unique value for the accordion item. Defaults to the index. */
   value?: string
   disabled?: boolean
+  [key: string]: any
 }
 
-export interface AccordionProps<T> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'as' | 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
+type SlotProps<T extends AccordionItem> = (props: { item: T, index: number, open: boolean }) => any
+
+export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
+  default?: SlotProps<T>
+  leading?: SlotProps<T>
+  trailing?: SlotProps<T>
+  content?: SlotProps<T>
+  body?: SlotProps<T>
+} & DynamicSlots<T, 'body', SlotProps<T>>
+
+export interface AccordionProps<T extends AccordionItem = AccordionItem> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'as' | 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
   items?: T[]
   /**
    * The icon displayed on the right side of the trigger.
@@ -91,12 +87,12 @@ const style = computed(() => generateStyle('accordion', props))
       </AccordionHeader>
 
       <AccordionContent
-        v-if="item.content || slots.content || (item.slot && slots[item.slot]) || slots.body || (item.slot && slots[`${item.slot}-body`])"
+        v-if="item.content || slots.content || (item.slot && slots[item.slot as keyof AccordionSlots<T>]) || slots.body || (item.slot && slots[`${item.slot}-body` as keyof AccordionSlots<T>])"
         :class="style.content({ class: props.ui?.content })"
       >
-        <slot :name="item.slot || 'content'" v-bind="{ item, index, open }">
+        <slot :name="((item.slot || 'content') as keyof AccordionSlots<T>)" v-bind="{ item, index, open }">
           <div :class="style.body({ class: props.ui?.body })">
-            <slot :name="item.slot ? `${item.slot}-body` : 'body'" v-bind="{ item, index, open }">
+            <slot :name="((item.slot ? `${item.slot}-body` : 'body') as keyof AccordionSlots<T>)" v-bind="{ item, index, open }">
               {{ item.content }}
             </slot>
           </div>

package/dist/runtime/components/Alert.vue

@@ -5,7 +5,7 @@ import type { alert } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
 export interface AlertEmits {
-  (event: 'update:open', value: boolean): void
+  'update:open': [value: boolean]
 }
 
 export interface AlertSlots {

package/dist/runtime/components/Badge.vue

@@ -5,7 +5,7 @@ import type { badge } from '../theme'
 import type { ComponentAttrs } from '../types'
 
 export interface BadgeEmits {
-  (e: 'update:show', payload: boolean): void
+  'update:show': [payload: boolean]
 }
 
 export interface BadgeSlots {

package/dist/runtime/components/Breadcrumb.vue

@@ -1,30 +1,26 @@
 <script lang="ts">
 import type { PrimitiveProps } from 'reka-ui'
 import type { breadcrumb } from '../theme'
-import type { ComponentAttrs, LinkProps } from '../types'
+import type { ComponentAttrs, DynamicSlots, LinkProps } from '../types'
 
-type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
+export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
+  label?: string
+  icon?: string
+  slot?: string
+  [key: string]: any
+}
 
-type DynamicSlots<T extends { slot?: string }, SlotProps, Slot = T['slot']> =
-  Slot extends string
-    ? Record<Slot | `${Slot}-${'leading' | 'label' | 'trailing'}`, SlotProps>
-    : Record<string, never>
+type SlotProps<T extends BreadcrumbItem> = (props: { item: T, index: number, active?: boolean }) => any
 
-export type BreadcrumbSlots<T extends { slot?: string }> = {
+export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
   'item'?: SlotProps<T>
   'item-leading'?: SlotProps<T>
   'item-label'?: SlotProps<T>
   'item-trailing'?: SlotProps<T>
-  'separator'?: (props?: {}) => any
-} & DynamicSlots<T, SlotProps<T>>
-
-export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
-  label?: string
-  icon?: string
-  slot?: string
-}
+  'separator'?: any
+} & DynamicSlots<T, 'leading' | 'label' | 'trailing', SlotProps<T>>
 
-export interface BreadcrumbProps<T> extends ComponentAttrs<typeof breadcrumb> {
+export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> extends ComponentAttrs<typeof breadcrumb> {
   /**
    * The element or component this component should render as.
    * @default "nav"
@@ -80,18 +76,18 @@ const style = computed(() => generateStyle('breadcrumb', props))
               :aria-current="active && (index === items!.length - 1) ? 'page' : undefined"
               :class="style.link({ class: props.ui?.link, active: index === items!.length - 1, disabled: item.disabled, to: !!item.to })"
             >
-              <slot :name="item.slot || 'item'" :item="item" :index="index">
-                <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="index === items!.length - 1" :index="index">
+              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="item" :index="index">
+                <slot :name="(`${item.slot || 'item'}-leading` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
                   <span v-if="item.icon" :class="style.linkLeadingIcon({ class: [item.icon, props.ui?.linkLeadingIcon] })"></span>
                 </slot>
 
-                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="style.linkLabel({ class: props.ui?.linkLabel })">
-                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="index === items!.length - 1" :index="index">
+                <span v-if="get(item, props.labelKey) || slots[(`${item.slot || 'item'}-label` as keyof BreadcrumbSlots<T>)]" :class="style.linkLabel({ class: props.ui?.linkLabel })">
+                  <slot :name="(`${item.slot || 'item'}-label` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
                     {{ get(item, props.labelKey) }}
                   </slot>
                 </span>
 
-                <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="index === items!.length - 1" :index="index"></slot>
+                <slot :name="(`${item.slot || 'item'}-trailing` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index"></slot>
               </slot>
             </LinkBase>
           </Link>

package/dist/runtime/components/Calendar.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
 import type { DateValue } from '@internationalized/date'
-import type { CalendarCellTriggerProps, CalendarRootEmits, CalendarRootProps, DateRange, RangeCalendarRootEmits } from 'reka-ui'
+import type { CalendarCellTriggerProps, CalendarRootEmits, CalendarRootProps, DateRange, RangeCalendarRootEmits, RangeCalendarRootProps } from 'reka-ui'
 import type { calendar } from '../theme'
 import type { ComponentAttrs } from '../types'
 
@@ -17,11 +17,20 @@ export interface CalendarSlots {
 
 type CalendarVariants = VariantProps<typeof calendar>
 
-type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true
+type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true
   ? DateRange
   : M extends true ? DateValue[] : DateValue
 
-export interface CalendarProps<R extends boolean, M extends boolean> extends ComponentAttrs<typeof calendar>, Omit<CalendarRootProps, 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'> {
+type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true
+  ? (DateRange | null)
+  : M extends true
+    ? (DateValue[] | undefined)
+    : (DateValue | undefined)
+
+type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>
+type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>
+
+export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends ComponentAttrs<typeof calendar>, _CalendarRootProps, _RangeCalendarRootProps {
   /**
    * The icon to use for the next year control.
    * @default app.icons.chevronDoubleRight
@@ -54,12 +63,12 @@ export interface CalendarProps<R extends boolean, M extends boolean> extends Com
   monthControls?: boolean
   /** Show year controls */
   yearControls?: boolean
-  defaultValue?: CalendarModelValue<R, M>
-  modelValue?: CalendarModelValue<R, M>
+  defaultValue?: CalendarDefaultValue<R, M>
+  modelValue?: CalendarDefaultValue<R, M>
 }
 </script>
 
-<script setup lang="ts" generic="R extends boolean = false, M extends boolean = false">
+<script setup lang="ts" generic="R extends boolean, M extends boolean">
 import { reactiveOmit } from '@vueuse/core'
 import { useForwardPropsEmits } from 'reka-ui'
 import { Calendar as BaseCalendar, RangeCalendar } from 'reka-ui/namespaced'

package/dist/runtime/components/Carousel.vue

@@ -11,13 +11,15 @@ import type { AcceptableValue, PrimitiveProps } from 'reka-ui'
 import type { carousel } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
-export interface CarouselSlots<T> {
+export type CarouselItem = AcceptableValue
+
+export interface CarouselSlots<T extends CarouselItem = CarouselItem> {
   default?: (props: { item: T, index: number }) => any
 }
 
 type CarouselVariants = VariantProps<typeof carousel>
 
-export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+export interface CarouselProps<T extends CarouselItem = CarouselItem> extends ComponentAttrs<typeof carousel>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
   /**
    * The element or component this component should render as.
    * @default "div"
@@ -88,7 +90,7 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Omit<
 }
 </script>
 
-<script setup lang="ts" generic="T extends AcceptableValue">
+<script setup lang="ts" generic="T extends CarouselItem">
 import { computedAsync, reactivePick } from '@vueuse/core'
 import useEmblaCarousel from 'embla-carousel-vue'
 import { Primitive, useForwardProps } from 'reka-ui'

package/dist/runtime/components/Checkbox.vue

@@ -5,7 +5,7 @@ import type { checkbox } from '../theme'
 import type { ComponentAttrs } from '../types'
 
 export interface CheckboxEmits {
-  (event: 'change', payload: Event): void
+  change: [payload: Event]
 }
 
 export interface CheckboxSlots {
@@ -41,6 +41,7 @@ export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<Che
 import { reactivePick } from '@vueuse/core'
 import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } from 'reka-ui'
 import { computed, useId } from 'vue'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<CheckboxProps>(), {
@@ -53,15 +54,22 @@ const slots = defineSlots<CheckboxSlots>()
 const innerValue = defineModel<boolean | 'indeterminate'>({ default: undefined })
 const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
 
-const id = props.id ?? useId()
+const { id: _id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormItem<CheckboxProps>(props)
+const id = _id.value ?? useId()
 
 const { theme, generateStyle } = useTheme()
-const style = computed(() => generateStyle('checkbox', props))
+const style = computed(() => generateStyle('checkbox', {
+  ...props,
+  size: size.value,
+  disabled: disabled.value,
+}))
 
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: value })
   emit('change', event)
+  emitFormChange()
+  emitFormInput()
 }
 </script>
 
@@ -69,12 +77,9 @@ function onUpdate(value: any) {
   <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
     <div :class="style.container({ class: props.ui?.container })">
       <CheckboxRoot
-        :id="id"
-        v-bind="rootProps"
         v-slot="{ modelValue }"
+        v-bind="{ ...rootProps, ...ariaAttrs, id, name, disabled }"
         v-model="innerValue"
-        :name="props.name"
-        :disabled="props.disabled"
         :class="style.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >

package/dist/runtime/components/Drawer.vue

@@ -1,22 +1,22 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui'
+import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui'
 import type { drawer } from '../theme'
-import type { ButtonProps, ComponentAttrs } from '../types'
+import type { ButtonProps, ComponentAttrs, EmitsToProps } from '../types'
 
 export interface DrawerEmits extends DialogRootEmits {
   'after-leave': []
 }
 
 export interface DrawerSlots {
-  default?: (props?: {}) => any
-  content?: (props?: {}) => any
-  header?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  close?: (props?: {}) => any
-  body?: (props?: {}) => any
-  footer?: (props?: {}) => any
+  default?: any
+  content?: any
+  header?: any
+  title?: any
+  description?: any
+  close?: (props: { ui: ComponentAttrs<typeof drawer>['ui'] }) => any
+  body?: any
+  footer?: any
 }
 
 type DrawerVariants = VariantProps<typeof drawer>
@@ -25,7 +25,7 @@ export interface DrawerProps extends ComponentAttrs<typeof drawer>, DialogRootPr
   title?: string
   description?: string
   /** The content of the drawer. */
-  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
   /**
    * Render an overlay behind the drawer.
    * @default true
@@ -140,7 +140,7 @@ const style = computed(() => generateStyle('drawer', props))
                 </DialogTitle>
 
                 <DialogClose v-if="props.close || slots.close" as-child>
-                  <slot name="close">
+                  <slot name="close" :ui="props.ui">
                     <Button
                       variant="ghost"
                       :icon="props.closeIcon || theme.app.icons.close"

package/dist/runtime/components/DropdownMenu.vue

@@ -0,0 +1,143 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { DropdownMenuArrowProps, DropdownMenuContentEmits, DropdownMenuContentProps, DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
+import type { dropdownMenu } from '../theme'
+import type { ArrayOrNested, AvatarProps, ComponentAttrs, DynamicSlots, EmitsToProps, KbdProps, LinkProps, MergeTypes, NestedItem } from '../types'
+
+export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom' | 'underline'> {
+  icon?: string
+  avatar?: AvatarProps
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
+  kbds?: Array<string | KbdProps['value']>
+  /**
+   * The item type.
+   * @default 'link'
+   */
+  type?: 'label' | 'separator' | 'link' | 'checkbox'
+  slot?: string
+  loading?: boolean
+  disabled?: boolean
+  checked?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+  children?: ArrayOrNested<DropdownMenuItem>
+  onSelect?: (e: Event) => void
+  onUpdateChecked?: (checked: boolean) => void
+  [key: string]: any
+}
+
+type SlotProps<T extends DropdownMenuItem> = (props: { item: T, active?: boolean, index: number }) => any
+
+export type DropdownMenuSlots<
+  T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>,
+  I extends NestedItem<T> = NestedItem<T>,
+> = {
+  'default'?: (props: { open: boolean }) => any
+  'item'?: SlotProps<I>
+  'item-leading'?: SlotProps<I>
+  'item-label'?: SlotProps<I>
+  'item-trailing'?: SlotProps<I>
+} & DynamicSlots<MergeTypes<I>, 'leading' | 'label' | 'trailing', SlotProps<I>>
+
+export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
+
+type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
+
+export interface DropdownMenuProps<
+  T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>,
+> extends ComponentAttrs<typeof dropdownMenu>, Omit<DropdownMenuRootProps, 'dir'> {
+  /** @default "md" */
+  size?: DropdownMenuVariants['size']
+  items?: T
+  /**
+   * The icon displayed when an item is checked.
+   * @default app.icons.check
+   */
+  checkedIcon?: string
+  /**
+   * The icon displayed when an item is loading.
+   * @default app.icons.loading
+   */
+  loadingIcon?: string
+  /**
+   * The icon displayed when the item is an external link.
+   * Set to `false` to hide the external icon.
+   * @default app.icons.external
+   */
+  externalIcon?: boolean | string
+  /**
+   * The content of the menu.
+   * @default { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
+   */
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
+  /**
+   * Display an arrow alongside the menu.
+   * @default false
+   */
+  arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @default true
+   */
+  portal?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @default "label"
+   */
+  labelKey?: keyof NestedItem<T>
+  disabled?: boolean
+}
+</script>
+
+<script setup lang="ts" generic="T extends ArrayOrNested<DropdownMenuItem>">
+import { reactivePick } from '@vueuse/core'
+import { DropdownMenuArrow, DropdownMenuRoot, DropdownMenuTrigger, useForwardPropsEmits } from 'reka-ui'
+import { computed, toRef } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { omit } from '../utils'
+import DropdownMenuContent from './DropdownMenuContent.vue'
+
+const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
+  portal: true,
+  modal: true,
+  externalIcon: true,
+  labelKey: 'label',
+})
+const emit = defineEmits<DropdownMenuEmits>()
+const slots = defineSlots<DropdownMenuSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'modal'), emit)
+const contentProps = toRef(() => ({ side: 'bottom', sideOffset: 8, collisionPadding: 8, ...props.content }) as DropdownMenuContentProps)
+const arrowProps = toRef(() => props.arrow as DropdownMenuArrowProps)
+const proxySlots = omit(slots, ['default'])
+
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('dropdownMenu', props))
+</script>
+
+<template>
+  <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
+    <DropdownMenuTrigger v-if="slots.default" as-child :class="props.class" :disabled="props.disabled">
+      <slot :open="open"></slot>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent
+      :class="style.content({ class: [!slots.default && props.class, props.ui?.content] })"
+      :ui="props.ui"
+      v-bind="contentProps"
+      :size="props.size"
+      :items="props.items"
+      :portal="props.portal"
+      :label-key="(props.labelKey as keyof NestedItem<T>)"
+      :checked-icon="props.checkedIcon"
+      :loading-icon="props.loadingIcon"
+      :external-icon="props.externalIcon"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotProps">
+        <slot :name="(name as keyof DropdownMenuSlots<T>)" v-bind="slotProps"></slot>
+      </template>
+
+      <DropdownMenuArrow v-if="props.arrow" v-bind="arrowProps" :class="style.arrow({ class: props.ui?.arrow })" />
+    </DropdownMenuContent>
+  </DropdownMenuRoot>
+</template>