@edgedev/create-edge-app 1.1.4 → 1.1.6

package/components/ui/command/Command.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'
+import { provideCommandContext } from '.'
 
-const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
-  open: true,
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
   modelValue: '',
 })
 
-const emits = defineEmits<ComboboxRootEmits>()
+const emits = defineEmits<ListboxRootEmits>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -18,13 +18,75 @@ const delegatedProps = computed(() => {
 })
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+const filterState = reactive({
+  search: '',
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+function handleSelect() {
+  filterState.search = ''
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
 </script>
 
 <template>
-  <ComboboxRoot
+  <ListboxRoot
     v-bind="forwarded"
     :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
   >
     <slot />
-  </ComboboxRoot>
+  </ListboxRoot>
 </template>

package/components/ui/command/CommandDialog.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useForwardPropsEmits } from 'radix-vue'
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { Dialog, DialogContent } from '~/components/ui/dialog'
+import { useForwardPropsEmits } from 'reka-ui'
 import Command from './Command.vue'
-import { Dialog, DialogContent } from '@/components/ui/dialog'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()

package/components/ui/command/CommandEmpty.vue

@@ -1,20 +1,25 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxEmptyProps } from 'radix-vue'
-import { ComboboxEmpty } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import type { PrimitiveProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+import { Primitive } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
 
-const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
 
   return delegated
 })
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
 </script>
 
 <template>
-  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
     <slot />
-  </ComboboxEmpty>
+  </Primitive>
 </template>

package/components/ui/command/CommandGroup.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxGroupProps } from 'radix-vue'
-import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import type { ListboxGroupProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'
+import { provideCommandGroupContext, useCommand } from '.'
 
-const props = defineProps<ComboboxGroupProps & {
+const props = defineProps<ListboxGroupProps & {
   class?: HTMLAttributes['class']
   heading?: string
 }>()
@@ -14,16 +15,32 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
 </script>
 
 <template>
-  <ComboboxGroup
+  <ListboxGroup
     v-bind="delegatedProps"
+    :id="id"
     :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+    :hidden="isRender ? undefined : true"
   >
-    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}
-    </ComboboxLabel>
+    </ListboxGroupLabel>
     <slot />
-  </ComboboxGroup>
+  </ListboxGroup>
 </template>

package/components/ui/command/CommandInput.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
 import { Search } from 'lucide-vue-next'
-import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<ComboboxInputProps & {
+const props = defineProps<ListboxFilterProps & {
   class?: HTMLAttributes['class']
 }>()
 
@@ -19,15 +20,18 @@ const delegatedProps = computed(() => {
 })
 
 const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
 </script>
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
     <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <ComboboxInput
+    <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
       auto-focus
-      :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
     />
   </div>
 </template>

package/components/ui/command/CommandItem.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+import { useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'
+import { useCommand, useCommandGroup } from '.'
 
-const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<ComboboxItemEmits>()
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -14,13 +16,63 @@ const delegatedProps = computed(() => {
 })
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true;
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true;
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0;
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
 </script>
 
 <template>
-  <ComboboxItem
+  <ListboxItem
+    v-if="isRender"
     v-bind="forwarded"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+    :id="id"
+    ref="itemRef"
+    :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
   >
     <slot />
-  </ComboboxItem>
+  </ListboxItem>
 </template>

package/components/ui/command/CommandList.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import type { ListboxContentProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+import { ListboxContent, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
-  dismissable: false,
-})
-const emits = defineEmits<ComboboxContentEmits>()
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -15,13 +12,13 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+  <ListboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
     <div role="presentation">
       <slot />
     </div>
-  </ComboboxContent>
+  </ListboxContent>
 </template>

package/components/ui/command/CommandSeparator.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxSeparatorProps } from 'radix-vue'
-import { ComboboxSeparator } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import type { SeparatorProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+import { Separator } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -14,10 +14,10 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ComboboxSeparator
+  <Separator
     v-bind="delegatedProps"
     :class="cn('-mx-1 h-px bg-border', props.class)"
   >
     <slot />
-  </ComboboxSeparator>
+  </Separator>
 </template>

package/components/ui/command/CommandShortcut.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/command/index.ts

@@ -1,3 +1,6 @@
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
 export { default as Command } from './Command.vue'
 export { default as CommandDialog } from './CommandDialog.vue'
 export { default as CommandEmpty } from './CommandEmpty.vue'
@@ -7,3 +10,16 @@ export { default as CommandItem } from './CommandItem.vue'
 export { default as CommandList } from './CommandList.vue'
 export { default as CommandSeparator } from './CommandSeparator.vue'
 export { default as CommandShortcut } from './CommandShortcut.vue'
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>('Command')
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>('CommandGroup')

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
-import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<ContextMenuRootProps>()
 const emits = defineEmits<ContextMenuRootEmits>()

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
+import { Check } from 'lucide-vue-next'
 import {
   ContextMenuCheckboxItem,
   type ContextMenuCheckboxItemEmits,
   type ContextMenuCheckboxItemProps,
   ContextMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuCheckboxItemEmits>()

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
 import {
   ContextMenuContent,
   type ContextMenuContentEmits,
   type ContextMenuContentProps,
   ContextMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuContentEmits>()

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue'
+import { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'
 
 const props = defineProps<ContextMenuGroupProps>()
 </script>

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
 import {
   ContextMenuItem,
   type ContextMenuItemEmits,
   type ContextMenuItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ContextMenuPortal, type ContextMenuPortalProps } from 'radix-vue'
+import { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'
 
 const props = defineProps<ContextMenuPortalProps>()
 </script>

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

@@ -4,7 +4,7 @@ import {
   type ContextMenuRadioGroupEmits,
   type ContextMenuRadioGroupProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<ContextMenuRadioGroupProps>()
 const emits = defineEmits<ContextMenuRadioGroupEmits>()

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
+import { Circle } from 'lucide-vue-next'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
   type ContextMenuRadioItemEmits,
   type ContextMenuRadioItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
 import {
   ContextMenuSeparator,
   type ContextMenuSeparatorProps,
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
 

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

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

@@ -4,7 +4,7 @@ import {
   type ContextMenuSubEmits,
   type ContextMenuSubProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<ContextMenuSubProps>()
 const emits = defineEmits<ContextMenuSubEmits>()

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
 import {
   ContextMenuSubContent,
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
 import {
   ContextMenuSubTrigger,
   type ContextMenuSubTriggerProps,
   useForwardProps,
-} from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'
+import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'
 
 const props = defineProps<ContextMenuTriggerProps>()