@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/combobox/ComboboxItem.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<ComboboxItem
+		data-slot="combobox-item"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'[&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 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
+			)
+		"
+	>
+		<slot />
+	</ComboboxItem>
+</template>

package/src/runtime/components/ui/combobox/ComboboxItemIndicator.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ComboboxItemIndicatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxItemIndicator, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ComboboxItemIndicatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<ComboboxItemIndicator data-slot="combobox-item-indicator" v-bind="forwarded" :class="cn('ml-auto', props.class)">
+		<slot />
+	</ComboboxItemIndicator>
+</template>

package/src/runtime/components/ui/combobox/ComboboxList.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+	position: 'popper',
+	align: 'center',
+	sideOffset: 4,
+});
+const emits = defineEmits<ComboboxContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<ComboboxPortal>
+		<ComboboxContent
+			data-slot="combobox-list"
+			v-bind="{ ...$attrs, ...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 w-[200px] origin-(--reka-combobox-content-transform-origin) overflow-hidden rounded-md border shadow-md outline-none',
+					props.class
+				)
+			"
+		>
+			<slot />
+		</ComboboxContent>
+	</ComboboxPortal>
+</template>

package/src/runtime/components/ui/combobox/ComboboxSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxSeparator } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<ComboboxSeparator data-slot="combobox-separator" v-bind="delegatedProps" :class="cn('bg-border -mx-1 h-px', props.class)">
+		<slot />
+	</ComboboxSeparator>
+</template>

package/src/runtime/components/ui/combobox/ComboboxTrigger.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ComboboxTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<ComboboxTrigger data-slot="combobox-trigger" v-bind="forwarded" :class="cn('', props.class)" tabindex="0">
+		<slot />
+	</ComboboxTrigger>
+</template>

package/src/runtime/components/ui/combobox/ComboboxViewport.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ComboboxViewportProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxViewport, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ComboboxViewportProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<ComboboxViewport data-slot="combobox-viewport" v-bind="forwarded" :class="cn('max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)">
+		<slot />
+	</ComboboxViewport>
+</template>

package/src/runtime/components/ui/combobox/index.ts

@@ -0,0 +1,12 @@
+export { default as Combobox } from './Combobox.vue';
+export { default as ComboboxAnchor } from './ComboboxAnchor.vue';
+export { default as ComboboxEmpty } from './ComboboxEmpty.vue';
+export { default as ComboboxGroup } from './ComboboxGroup.vue';
+export { default as ComboboxInput } from './ComboboxInput.vue';
+export { default as ComboboxItem } from './ComboboxItem.vue';
+export { default as ComboboxItemIndicator } from './ComboboxItemIndicator.vue';
+export { default as ComboboxList } from './ComboboxList.vue';
+export { default as ComboboxSeparator } from './ComboboxSeparator.vue';
+export { default as ComboboxViewport } from './ComboboxViewport.vue';
+
+export { ComboboxCancel, ComboboxTrigger } from 'reka-ui';

package/src/runtime/components/ui/command/Command.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui';
+import { reactive, ref, watch } from 'vue';
+import { cn } from '@/lib/utils';
+import { provideCommandContext } from '.';
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+	modelValue: '',
+});
+
+const emits = defineEmits<ListboxRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+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;
+}
+
+watch(
+	() => filterState.search,
+	() => {
+		filterItems();
+	}
+);
+
+provideCommandContext({
+	allItems,
+	allGroups,
+	filterState,
+});
+</script>
+
+<template>
+	<ListboxRoot data-slot="command" v-bind="forwarded" :class="cn('bg-bg-primary-medium dark:bg-bg-primary-medium flex h-full w-full flex-col overflow-hidden rounded-md p-2', props.class)">
+		<slot />
+	</ListboxRoot>
+</template>

package/src/runtime/components/ui/command/CommandDialog.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+import { useForwardPropsEmits } from 'reka-ui';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import Command from './Command.vue';
+
+const props = withDefaults(
+	defineProps<
+		DialogRootProps & {
+			title?: string;
+			description?: string;
+		}
+	>(),
+	{
+		title: 'Command Palette',
+		description: 'Search for a command to run...',
+	}
+);
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<Dialog v-slot="slotProps" v-bind="forwarded">
+		<DialogContent class="overflow-hidden p-0">
+			<DialogHeader class="sr-only">
+				<DialogTitle>{{ title }}</DialogTitle>
+				<DialogDescription>{{ description }}</DialogDescription>
+			</DialogHeader>
+			<Command>
+				<slot v-bind="slotProps" />
+			</Command>
+		</DialogContent>
+	</Dialog>
+</template>

package/src/runtime/components/ui/command/CommandEmpty.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Primitive } from 'reka-ui';
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+import { useCommand } from '.';
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const { filterState } = useCommand();
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0);
+</script>
+
+<template>
+	<Primitive v-if="isRender" data-slot="command-empty" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+		<slot />
+	</Primitive>
+</template>

package/src/runtime/components/ui/command/CommandGroup.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui';
+import { computed, onMounted, onUnmounted } from 'vue';
+import { cn } from '@/lib/utils';
+import { provideCommandGroupContext, useCommand } from '.';
+
+const props = defineProps<
+	ListboxGroupProps & {
+		class?: HTMLAttributes['class'];
+		heading?: string;
+	}
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const { allGroups, filterState } = useCommand();
+const id = useId();
+
+const isRender = computed(() => !filterState.search || 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>
+	<ListboxGroup v-bind="delegatedProps" :id="id" data-slot="command-group" :class="cn('text-foreground overflow-hidden p-1', props.class)" :hidden="isRender ? undefined : true">
+		<ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+			{{ heading }}
+		</ListboxGroupLabel>
+		<slot />
+	</ListboxGroup>
+</template>

package/src/runtime/components/ui/command/CommandInput.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ListboxFilterProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Search } from 'lucide-vue-next';
+import { ListboxFilter, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { useCommand } from '.';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps<
+	ListboxFilterProps & {
+		class?: HTMLAttributes['class'];
+	}
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const { filterState } = useCommand();
+</script>
+
+<template>
+	<div data-slot="command-input-wrapper" class="flex h-10 w-full items-center gap-2 border-b px-3">
+		<Search class="size-4 shrink-0" />
+		<ListboxFilter
+			v-bind="{ ...forwardedProps, ...$attrs }"
+			v-model="filterState.search"
+			data-slot="command-input"
+			auto-focus
+			:class="cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+		/>
+	</div>
+</template>

package/src/runtime/components/ui/command/CommandItem.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit, useCurrentElement } from '@vueuse/core';
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { cn } from '@/lib/utils';
+import { useCommand, useCommandGroup } from '.';
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ListboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const id = useId();
+const { filterState, allItems, allGroups } = useCommand();
+const groupContext = useCommandGroup();
+
+const isRender = computed(() => {
+	if (filterState.search) {
+		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;
+	} else {
+		return true;
+	}
+});
+
+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.get(groupId)?.add(id);
+		} else {
+			allGroups.value.set(groupId, new Set([id]));
+		}
+	}
+});
+onUnmounted(() => {
+	allItems.value.delete(id);
+});
+</script>
+
+<template>
+	<ListboxItem
+		v-if="isRender"
+		v-bind="forwarded"
+		:id="id"
+		ref="itemRef"
+		data-slot="command-item"
+		:class="
+			cn(
+				'hover:bg-bg-tertiary-medium dark:hover:bg-bg-tertiary-medium hover:text-text-heading dark:hover:text-text-heading [&_svg:not([class*=\'text-\'])]:text-text-body text-text-body dark:text-text-body relative flex w-full cursor-default items-center gap-1.5 rounded-lg p-2 text-sm leading-3.5 font-medium 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
+			)
+		"
+		@select="
+			() => {
+				filterState.search = '';
+			}
+		"
+	>
+		<slot />
+	</ListboxItem>
+</template>

package/src/runtime/components/ui/command/CommandList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ListboxContent, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<ListboxContent data-slot="command-list" v-bind="forwarded" :class="cn('max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)">
+		<div>
+			<slot />
+		</div>
+	</ListboxContent>
+</template>

package/src/runtime/components/ui/command/CommandSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Separator } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<Separator data-slot="command-separator" v-bind="delegatedProps" :class="cn('bg-border -mx-1 h-px', props.class)">
+		<slot />
+	</Separator>
+</template>

package/src/runtime/components/ui/command/CommandShortcut.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<span data-slot="command-shortcut" :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
+		<slot />
+	</span>
+</template>

package/src/runtime/components/ui/command/index.ts

@@ -0,0 +1,25 @@
+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';
+export { default as CommandGroup } from './CommandGroup.vue';
+export { default as CommandInput } from './CommandInput.vue';
+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/src/runtime/components/ui/context-menu/ContextMenu.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui';
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<ContextMenuRootProps>();
+const emits = defineEmits<ContextMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<ContextMenuRoot data-slot="context-menu" v-bind="forwarded">
+		<slot />
+	</ContextMenuRoot>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Check } from 'lucide-vue-next';
+import { ContextMenuCheckboxItem, ContextMenuItemIndicator, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ContextMenuCheckboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<ContextMenuCheckboxItem
+		data-slot="context-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">
+			<ContextMenuItemIndicator>
+				<slot name="indicator-icon">
+					<Check class="size-4" />
+				</slot>
+			</ContextMenuItemIndicator>
+		</span>
+		<slot />
+	</ContextMenuCheckboxItem>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ContextMenuContent, ContextMenuPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ContextMenuContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<ContextMenuPortal>
+		<ContextMenuContent
+			data-slot="context-menu-content"
+			v-bind="{ ...$attrs, ...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-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+					props.class
+				)
+			"
+		>
+			<slot />
+		</ContextMenuContent>
+	</ContextMenuPortal>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ContextMenuGroupProps } from 'reka-ui';
+import { ContextMenuGroup } from 'reka-ui';
+
+const props = defineProps<ContextMenuGroupProps>();
+</script>
+
+<template>
+	<ContextMenuGroup data-slot="context-menu-group" v-bind="props">
+		<slot />
+	</ContextMenuGroup>
+</template>