@oneclick.dev/cms-kit 0.0.2 → 0.0.4

package/components/ui/context-menu/ContextMenuTrigger.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'
-
-const props = defineProps<ContextMenuTriggerProps>()
-
-const forwardedProps = useForwardProps(props)
-</script>
-
-<template>
-  <ContextMenuTrigger
-    data-slot="context-menu-trigger"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </ContextMenuTrigger>
-</template>

package/components/ui/context-menu/index.ts

@@ -1,14 +0,0 @@
-export { default as ContextMenu } from './ContextMenu.vue'
-export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
-export { default as ContextMenuContent } from './ContextMenuContent.vue'
-export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
-export { default as ContextMenuItem } from './ContextMenuItem.vue'
-export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
-export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
-export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
-export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
-export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
-export { default as ContextMenuSub } from './ContextMenuSub.vue'
-export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'
-export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
-export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'

package/components/ui/custom-dialog/CustomDialog.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  id: number
-  layout: Object
-  variables: Object
-}>()
-
-const { closeCustomDialog } = useCustomDialog()
-
-const confirm = (result: any) => {
-  console.log("Confirm custom dialog", result)
-  closeCustomDialog(props.id, result)
-}
-
-const cancel = () => {
-  console.log("Cancel custom dialog")
-  closeCustomDialog(props.id, null)
-}
-</script>
-
-<template>
-  <Teleport to="body">
-    <Dialog :open="true" @update:open="cancel">
-      <DialogScrollContent class="sm:max-w-[540px] w-full">
-
-        <FormDisplayer :settings="props.layout" :onFinish="confirm" :variables="props.variables" />
-
-      </DialogScrollContent>
-    </Dialog>
-  </Teleport>
-</template>

package/components/ui/custom-dialog/index.ts

@@ -1 +0,0 @@
-export { default as CustomDialog } from './CustomDialog.vue'

package/components/ui/dialog/Dialog.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
-
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DialogRoot
-    data-slot="dialog"
-    v-bind="forwarded"
-  >
-    <slot />
-  </DialogRoot>
-</template>

package/components/ui/dialog/DialogClose.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'reka-ui'
-
-const props = defineProps<DialogCloseProps>()
-</script>
-
-<template>
-  <DialogClose
-    data-slot="dialog-close"
-    v-bind="props"
-  >
-    <slot />
-  </DialogClose>
-</template>

package/components/ui/dialog/DialogContent.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { X } from 'lucide-vue-next'
-import {
-  DialogClose,
-  DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import DialogOverlay from './DialogOverlay.vue'
-
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogContent
-      data-slot="dialog-content"
-      v-bind="forwarded"
-      :class="
-        cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
-          props.class,
-        )"
-    >
-      <slot />
-
-      <DialogClose
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 z-50"
-      >
-        <X />
-        <span class="sr-only">Close</span>
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
-</template>

package/components/ui/dialog/DialogDescription.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DialogDescription
-    data-slot="dialog-description"
-    v-bind="forwardedProps"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-  >
-    <slot />
-  </DialogDescription>
-</template>

package/components/ui/dialog/DialogFooter.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>
-
-<template>
-  <div
-    data-slot="dialog-footer"
-    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/dialog/DialogHeader.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="dialog-header"
-    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/dialog/DialogOverlay.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { DialogOverlay, type DialogOverlayProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <DialogOverlay
-    data-slot="dialog-overlay"
-    v-bind="delegatedProps"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
-  >
-    <slot />
-  </DialogOverlay>
-</template>

package/components/ui/dialog/DialogScrollContent.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { X } from 'lucide-vue-next'
-import {
-  DialogClose,
-  DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    >
-      <DialogContent
-        :class="
-          cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-            props.class,
-          )
-        "
-        v-bind="forwarded"
-        @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
-          }
-        }"
-      >
-        <slot />
-
-        <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary z-50"
-        >
-          <X class="size-4" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </DialogOverlay>
-  </DialogPortal>
-</template>

package/components/ui/dialog/DialogTitle.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DialogTitle
-    data-slot="dialog-title"
-    v-bind="forwardedProps"
-    :class="cn('text-lg leading-none font-semibold', props.class)"
-  >
-    <slot />
-  </DialogTitle>
-</template>

package/components/ui/dialog/DialogTrigger.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
-
-const props = defineProps<DialogTriggerProps>()
-</script>
-
-<template>
-  <DialogTrigger
-    data-slot="dialog-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </DialogTrigger>
-</template>

package/components/ui/dialog/index.ts

@@ -1,10 +0,0 @@
-export { default as Dialog } from './Dialog.vue'
-export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
-export { default as DialogFooter } from './DialogFooter.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogOverlay } from './DialogOverlay.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'

package/components/ui/drawer/Drawer.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
-import { useForwardPropsEmits } from 'reka-ui'
-import { DrawerRoot } from 'vaul-vue'
-
-const props = withDefaults(defineProps<DrawerRootProps>(), {
-  shouldScaleBackground: true,
-})
-
-const emits = defineEmits<DrawerRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DrawerRoot
-    data-slot="drawer"
-    v-bind="forwarded"
-  >
-    <slot />
-  </DrawerRoot>
-</template>

package/components/ui/drawer/DrawerClose.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerCloseProps } from 'vaul-vue'
-import { DrawerClose } from 'vaul-vue'
-
-const props = defineProps<DrawerCloseProps>()
-</script>
-
-<template>
-  <DrawerClose
-    data-slot="drawer-close"
-    v-bind="props"
-  >
-    <slot />
-  </DrawerClose>
-</template>

package/components/ui/drawer/DrawerContent.vue

@@ -1,34 +0,0 @@
-<script lang="ts" setup>
-import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
-import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { useForwardPropsEmits } from 'reka-ui'
-import { DrawerContent, DrawerPortal } from 'vaul-vue'
-import DrawerOverlay from './DrawerOverlay.vue'
-
-const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerContent
-      data-slot="drawer-content"
-      v-bind="forwarded"
-      :class="cn(
-        `group/drawer-content bg-background fixed z-50 flex h-auto flex-col`,
-        `data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg`,
-        `data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg`,
-        `data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm`,
-        `data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm`,
-        props.class,
-      )"
-    >
-      <div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-      <slot />
-    </DrawerContent>
-  </DrawerPortal>
-</template>

package/components/ui/drawer/DrawerDescription.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerDescriptionProps } from 'vaul-vue'
-import { cn } from '../../../lib/utils'
-import { DrawerDescription } from 'vaul-vue'
-import { computed, type HtmlHTMLAttributes } from 'vue'
-
-const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <DrawerDescription
-    data-slot="drawer-description"
-    v-bind="delegatedProps"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-  >
-    <slot />
-  </DrawerDescription>
-</template>

package/components/ui/drawer/DrawerFooter.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HtmlHTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="drawer-footer"
-    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/drawer/DrawerHeader.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HtmlHTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="drawer-header"
-    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/drawer/DrawerOverlay.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import type { DialogOverlayProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { DrawerOverlay } from 'vaul-vue'
-import { computed, type HtmlHTMLAttributes } from 'vue'
-
-const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <DrawerOverlay
-    data-slot="drawer-overlay"
-    v-bind="delegatedProps"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
-  />
-</template>

package/components/ui/drawer/DrawerTitle.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerTitleProps } from 'vaul-vue'
-import { cn } from '../../../lib/utils'
-import { DrawerTitle } from 'vaul-vue'
-import { computed, type HtmlHTMLAttributes } from 'vue'
-
-const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <DrawerTitle
-    data-slot="drawer-title"
-    v-bind="delegatedProps"
-    :class="cn('text-foreground font-semibold', props.class)"
-  >
-    <slot />
-  </DrawerTitle>
-</template>

package/components/ui/drawer/DrawerTrigger.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerTriggerProps } from 'vaul-vue'
-import { DrawerTrigger } from 'vaul-vue'
-
-const props = defineProps<DrawerTriggerProps>()
-</script>
-
-<template>
-  <DrawerTrigger
-    data-slot="drawer-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </DrawerTrigger>
-</template>

package/components/ui/drawer/index.ts

@@ -1,9 +0,0 @@
-export { default as Drawer } from './Drawer.vue'
-export { default as DrawerClose } from './DrawerClose.vue'
-export { default as DrawerContent } from './DrawerContent.vue'
-export { default as DrawerDescription } from './DrawerDescription.vue'
-export { default as DrawerFooter } from './DrawerFooter.vue'
-export { default as DrawerHeader } from './DrawerHeader.vue'
-export { default as DrawerOverlay } from './DrawerOverlay.vue'
-export { default as DrawerTitle } from './DrawerTitle.vue'
-export { default as DrawerTrigger } from './DrawerTrigger.vue'

package/components/ui/dropdown-menu/DropdownMenu.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'
-
-const props = defineProps<DropdownMenuRootProps>()
-const emits = defineEmits<DropdownMenuRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DropdownMenuRoot
-    data-slot="dropdown-menu"
-    v-bind="forwarded"
-  >
-    <slot />
-  </DropdownMenuRoot>
-</template>

package/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { Check } from 'lucide-vue-next'
-import {
-  DropdownMenuCheckboxItem,
-  type DropdownMenuCheckboxItemEmits,
-  type DropdownMenuCheckboxItemProps,
-  DropdownMenuItemIndicator,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuCheckboxItem
-    data-slot="dropdown-menu-checkbox-item"
-    v-bind="forwarded"
-    :class=" cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
-  >
-    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <Check class="size-4" />
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuCheckboxItem>
-</template>

package/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  DropdownMenuContent,
-  type DropdownMenuContentEmits,
-  type DropdownMenuContentProps,
-  DropdownMenuPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    sideOffset: 4,
-  },
-)
-const emits = defineEmits<DropdownMenuContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuPortal>
-    <DropdownMenuContent
-      data-slot="dropdown-menu-content"
-      v-bind="forwarded"
-      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-popover-border p-1 shadow-md', props.class)"
-    >
-      <slot />
-    </DropdownMenuContent>
-  </DropdownMenuPortal>
-</template>