@dynect/base 0.1.0 → 0.3.0

package/src/runtime/components/ui/carousel/CarouselNext.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface';
+import type { ButtonVariants } from '@/components/ui/button';
+import { ArrowRight } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { useCarousel } from './useCarousel';
+
+const props = withDefaults(
+	defineProps<
+		{
+			variant?: ButtonVariants['variant'];
+			size?: ButtonVariants['size'];
+		} & WithClassAsProps
+	>(),
+	{
+		variant: 'outline',
+		size: 'icon',
+	}
+);
+
+const { orientation, canScrollNext, scrollNext } = useCarousel();
+</script>
+
+<template>
+	<Button data-slot="carousel-next" :disabled="!canScrollNext" :class="cn('absolute size-8 rounded-full', orientation === 'horizontal' ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90', props.class)" :variant="variant" :size="size" @click="scrollNext">
+		<slot>
+			<ArrowRight />
+			<span class="sr-only">Next Slide</span>
+		</slot>
+	</Button>
+</template>

package/src/runtime/components/ui/carousel/CarouselPrevious.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface';
+import type { ButtonVariants } from '@/components/ui/button';
+import { ArrowLeft } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { useCarousel } from './useCarousel';
+
+const props = withDefaults(
+	defineProps<
+		{
+			variant?: ButtonVariants['variant'];
+			size?: ButtonVariants['size'];
+		} & WithClassAsProps
+	>(),
+	{
+		variant: 'outline',
+		size: 'icon',
+	}
+);
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel();
+</script>
+
+<template>
+	<Button data-slot="carousel-previous" :disabled="!canScrollPrev" :class="cn('absolute size-8 rounded-full', orientation === 'horizontal' ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90', props.class)" :variant="variant" :size="size" @click="scrollPrev">
+		<slot>
+			<ArrowLeft />
+			<span class="sr-only">Previous Slide</span>
+		</slot>
+	</Button>
+</template>

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

@@ -0,0 +1,8 @@
+export { default as Carousel } from './Carousel.vue';
+export { default as CarouselContent } from './CarouselContent.vue';
+export { default as CarouselItem } from './CarouselItem.vue';
+export { default as CarouselNext } from './CarouselNext.vue';
+export { default as CarouselPrevious } from './CarouselPrevious.vue';
+export type { UnwrapRefCarouselApi as CarouselApi } from './interface';
+
+export { useCarousel } from './useCarousel';

package/src/runtime/components/ui/carousel/interface.ts

@@ -0,0 +1,22 @@
+import type useEmblaCarousel from 'embla-carousel-vue';
+import type { EmblaCarouselVueType } from 'embla-carousel-vue';
+import type { HTMLAttributes, UnwrapRef } from 'vue';
+
+type CarouselApi = EmblaCarouselVueType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>;
+
+export interface CarouselProps {
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugin;
+	orientation?: 'horizontal' | 'vertical';
+}
+
+export type CarouselEmits = (e: 'init-api', payload: UnwrapRefCarouselApi) => void;
+
+export interface WithClassAsProps {
+	class?: HTMLAttributes['class'];
+}

package/src/runtime/components/ui/carousel/useCarousel.ts

@@ -0,0 +1,51 @@
+import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface';
+import { createInjectionState } from '@vueuse/core';
+import emblaCarouselVue from 'embla-carousel-vue';
+import { onMounted, ref } from 'vue';
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(({ opts, orientation, plugins }: CarouselProps, emits: CarouselEmits) => {
+	const [emblaNode, emblaApi] = emblaCarouselVue(
+		{
+			...opts,
+			axis: orientation === 'horizontal' ? 'x' : 'y',
+		},
+		plugins
+	);
+
+	function scrollPrev() {
+		emblaApi.value?.scrollPrev();
+	}
+	function scrollNext() {
+		emblaApi.value?.scrollNext();
+	}
+
+	const canScrollNext = ref(false);
+	const canScrollPrev = ref(false);
+
+	function onSelect(api: CarouselApi) {
+		canScrollNext.value = api?.canScrollNext() || false;
+		canScrollPrev.value = api?.canScrollPrev() || false;
+	}
+
+	onMounted(() => {
+		if (!emblaApi.value) return;
+
+		emblaApi.value?.on('init', onSelect);
+		emblaApi.value?.on('reInit', onSelect);
+		emblaApi.value?.on('select', onSelect);
+
+		emits('init-api', emblaApi.value);
+	});
+
+	return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation };
+});
+
+function useCarousel() {
+	const carouselState = useInjectCarousel();
+
+	if (!carouselState) throw new Error('useCarousel must be used within a <Carousel />');
+
+	return carouselState;
+}
+
+export { useCarousel, useProvideCarousel };

package/src/runtime/components/ui/chart/ChartContainer.vue

@@ -0,0 +1,61 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { ChartConfig } from '.';
+import { useId } from 'reka-ui';
+import { computed, toRefs } from 'vue';
+import { cn } from '@/lib/utils';
+import { provideChartContext } from '.';
+import ChartStyle from './ChartStyle.vue';
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+	id?: HTMLAttributes['id'];
+	class?: HTMLAttributes['class'];
+	config: ChartConfig;
+	cursor?: boolean;
+}>();
+
+defineSlots<{
+	default: {
+		id: string;
+		config: ChartConfig;
+	};
+}>();
+
+const { config } = toRefs(props);
+const uniqueId = useId();
+const chartId = computed(() => `chart-${props.id || uniqueId.replaceAll(':', '')}`);
+
+provideChartContext({
+	id: uniqueId,
+	config,
+});
+</script>
+
+<template>
+	<div
+		data-slot="chart"
+		:data-chart="chartId"
+		:class="
+			cn(
+				`[&_.tick_text]:fill-muted-foreground! [&_.tick_line]:stroke-border/50! [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video h-full w-full flex-col justify-center text-xs **:data-vis-single-container:h-full **:data-vis-single-container:w-full **:data-vis-xy-container:h-full **:data-vis-xy-container:w-full [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden`,
+				props.class
+			)
+		"
+		:style="{
+			'--vis-tooltip-padding': '0px',
+			'--vis-tooltip-background-color': 'transparent',
+			'--vis-tooltip-border-color': 'transparent',
+			'--vis-tooltip-text-color': 'none',
+			'--vis-tooltip-shadow-color': 'none',
+			'--vis-tooltip-backdrop-filter': 'none',
+			'--vis-crosshair-circle-stroke-color': '#0000',
+			'--vis-crosshair-line-stroke-width': cursor ? '1px' : '0px',
+			'--vis-font-family': 'var(--font-sans)',
+		}"
+	>
+		<slot :id="uniqueId" :config="config" />
+		<ChartStyle :id="chartId" />
+	</div>
+</template>

package/src/runtime/components/ui/chart/ChartLegendContent.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+import { cn } from '@/lib/utils';
+import { useChart } from '.';
+
+const props = withDefaults(
+	defineProps<{
+		hideIcon?: boolean;
+		nameKey?: string;
+		verticalAlign?: 'bottom' | 'top';
+		// payload?: any[]
+		class?: HTMLAttributes['class'];
+	}>(),
+	{
+		verticalAlign: 'bottom',
+	}
+);
+
+const { id, config } = useChart();
+
+const payload = computed(() =>
+	Object.entries(config.value).map(([key, value]) => {
+		return {
+			key: props.nameKey || key,
+			itemConfig: config.value[key],
+		};
+	})
+);
+
+const containerSelector = ref('');
+onMounted(() => {
+	containerSelector.value = `[data-chart="chart-${id}"]>[data-vis-xy-container]`;
+});
+</script>
+
+<template>
+	<div v-if="containerSelector" :class="cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', props.class)">
+		<div v-for="{ key, itemConfig } in payload" :key="key" :class="cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3')">
+			<component :is="itemConfig.icon" v-if="itemConfig?.icon" />
+			<div
+				v-else
+				class="h-2 w-2 shrink-0 rounded-[2px]"
+				:style="{
+					backgroundColor: itemConfig.color,
+				}"
+			/>
+
+			{{ itemConfig?.label }}
+		</div>
+	</div>
+</template>

package/src/runtime/components/ui/chart/ChartStyle.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { Primitive } from 'reka-ui';
+import { computed } from 'vue';
+import { THEMES, useChart } from '.';
+
+defineProps<{
+	id?: HTMLAttributes['id'];
+}>();
+
+const { config } = useChart();
+
+const colorConfig = computed(() => {
+	return Object.entries(config.value).filter(([, config]) => config.theme || config.color);
+});
+</script>
+
+<template>
+	<Primitive v-if="colorConfig.length" as="style">
+		{{
+			Object.entries(THEMES)
+				.map(
+					([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+	.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	})
+	.join('\n')}
+}
+`
+				)
+				.join('\n')
+		}}
+	</Primitive>
+</template>

package/src/runtime/components/ui/chart/ChartTooltipContent.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { ChartConfig } from '.';
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+	defineProps<{
+		hideLabel?: boolean;
+		hideIndicator?: boolean;
+		indicator?: 'line' | 'dot' | 'dashed';
+		nameKey?: string;
+		labelKey?: string;
+		labelFormatter?: (d: number | Date) => string;
+		payload?: Record<string, any>;
+		config?: ChartConfig;
+		class?: HTMLAttributes['class'];
+		color?: string;
+		x?: number | Date;
+	}>(),
+	{
+		payload: () => ({}),
+		config: () => ({}),
+		indicator: 'dot',
+	}
+);
+
+const payload = computed(() => {
+	return Object.entries(props.payload)
+		.map(([key, value]) => {
+			const itemConfig = props.config[key];
+			const indicatorColor = props.config[key]?.color ?? props.payload.fill;
+
+			return { key, value, itemConfig, indicatorColor };
+		})
+		.filter((i) => i.itemConfig);
+});
+
+const nestLabel = computed(() => Object.keys(props.payload).length === 1 && props.indicator !== 'dot');
+const tooltipLabel = computed(() => {
+	if (props.hideLabel) return null;
+	if (props.labelFormatter && props.x !== undefined) {
+		return props.labelFormatter(props.x);
+	}
+	return props.labelKey ? props.config[props.labelKey]?.label || props.payload[props.labelKey] : props.x;
+});
+</script>
+
+<template>
+	<div :class="cn('border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl', props.class)">
+		<slot>
+			<div v-if="!nestLabel && tooltipLabel" class="font-medium">
+				{{ tooltipLabel }}
+			</div>
+			<div class="grid gap-1.5">
+				<div v-for="{ value, itemConfig, indicatorColor, key } in payload" :key="key" :class="cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5', indicator === 'dot' && 'items-center')">
+					<component :is="itemConfig.icon" v-if="itemConfig?.icon" />
+					<template v-else-if="!hideIndicator">
+						<div
+							:class="
+								cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
+									'h-2.5 w-2.5': indicator === 'dot',
+									'w-1': indicator === 'line',
+									'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+									'my-0.5': nestLabel && indicator === 'dashed',
+								})
+							"
+							:style="{
+								'--color-bg': indicatorColor,
+								'--color-border': indicatorColor,
+							}"
+						/>
+					</template>
+
+					<div :class="cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')">
+						<div class="grid gap-1.5">
+							<div v-if="nestLabel" class="font-medium">
+								{{ tooltipLabel }}
+							</div>
+							<span class="text-muted-foreground">
+								{{ itemConfig?.label || value }}
+							</span>
+						</div>
+						<span v-if="value" class="text-foreground font-mono font-medium tabular-nums">
+							{{ value.toLocaleString() }}
+						</span>
+					</div>
+				</div>
+			</div>
+		</slot>
+	</div>
+</template>

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

@@ -0,0 +1,26 @@
+import type { Component, Ref } from 'vue';
+import { createContext } from 'reka-ui';
+
+export { default as ChartContainer } from './ChartContainer.vue';
+export { default as ChartLegendContent } from './ChartLegendContent.vue';
+export { default as ChartTooltipContent } from './ChartTooltipContent.vue';
+export { componentToString } from './utils';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+export const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+	[k in string]: {
+		label?: string | Component;
+		icon?: string | Component;
+	} & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+
+interface ChartContextProps {
+	id: string;
+	config: Ref<ChartConfig>;
+}
+
+export const [useChart, provideChartContext] = createContext<ChartContextProps>('Chart');
+
+export { VisCrosshair as ChartCrosshair, VisTooltip as ChartTooltip } from '@unovis/vue';

package/src/runtime/components/ui/chart/utils.ts

@@ -0,0 +1,45 @@
+import type { ChartConfig } from '.';
+import { isClient } from '@vueuse/core';
+import { useId } from 'reka-ui';
+import { h, render } from 'vue';
+
+// Simple cache using a Map to store serialized object keys
+const cache = new Map<string, string>();
+
+// Convert object to a consistent string key
+function serializeKey(key: Record<string, any>): string {
+	return JSON.stringify(
+		key,
+		Object.keys(key).sort((a, b) => a.localeCompare(b))
+	);
+}
+
+interface Constructor<P = any> {
+	__isFragment?: never;
+	__isTeleport?: never;
+	__isSuspense?: never;
+	new (...args: any[]): {
+		$props: P;
+	};
+}
+
+export function componentToString<P>(config: ChartConfig, component: Constructor<P>, props?: P) {
+	if (!isClient) return;
+
+	// This function will be called once during mount lifecycle
+	const id = useId();
+
+	// https://unovis.dev/docs/auxiliary/Crosshair#component-props
+	return (_data: any, x: number | Date) => {
+		const data = 'data' in _data ? _data.data : _data;
+		const serializedKey = `${id}-${serializeKey(data)}`;
+		const cachedContent = cache.get(serializedKey);
+		if (cachedContent) return cachedContent;
+
+		const vnode = h<unknown>(component, { ...props, payload: data, config, x });
+		const div = document.createElement('div');
+		render(vnode, div);
+		cache.set(serializedKey, div.innerHTML);
+		return div.innerHTML;
+	};
+}

package/src/runtime/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<CheckboxRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<CheckboxRoot
+		v-slot="slotProps"
+		data-slot="checkbox"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'peer border-border-base data-[state=checked]:bg-bg-brand-strong data-[state=checked]:border-bg-brand-strong focus-visible:border-border-brand-subtle focus-visible:ring-border-brand-subtle/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border bg-gray-50 shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:opacity-50 data-[state=checked]:text-white',
+				props.class
+			)
+		"
+	>
+		<CheckboxIndicator data-slot="checkbox-indicator" class="grid place-content-center text-current transition-none">
+			<slot v-bind="slotProps">
+				<Icon name="lucide:check" class="size-3.5" />
+			</slot>
+		</CheckboxIndicator>
+	</CheckboxRoot>
+</template>

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

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

package/src/runtime/components/ui/collapsible/Collapsible.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui';
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<CollapsibleRootProps>();
+const emits = defineEmits<CollapsibleRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<CollapsibleRoot v-slot="slotProps" data-slot="collapsible" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</CollapsibleRoot>
+</template>

package/src/runtime/components/ui/collapsible/CollapsibleContent.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleContentProps } from 'reka-ui';
+import { CollapsibleContent } from 'reka-ui';
+
+const props = defineProps<CollapsibleContentProps>();
+</script>
+
+<template>
+	<CollapsibleContent data-slot="collapsible-content" v-bind="props">
+		<slot />
+	</CollapsibleContent>
+</template>

package/src/runtime/components/ui/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from 'reka-ui';
+import { CollapsibleTrigger } from 'reka-ui';
+
+const props = defineProps<CollapsibleTriggerProps>();
+</script>
+
+<template>
+	<CollapsibleTrigger data-slot="collapsible-trigger" v-bind="props">
+		<slot />
+	</CollapsibleTrigger>
+</template>

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

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue';
+export { default as CollapsibleContent } from './CollapsibleContent.vue';
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue';

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui';
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<ComboboxRootProps>();
+const emits = defineEmits<ComboboxRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<ComboboxRoot v-slot="slotProps" data-slot="combobox" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</ComboboxRoot>
+</template>

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

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

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxEmpty } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<ComboboxEmpty data-slot="combobox-empty" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+		<slot />
+	</ComboboxEmpty>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+	ComboboxGroupProps & {
+		class?: HTMLAttributes['class'];
+		heading?: string;
+	}
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<ComboboxGroup data-slot="combobox-group" v-bind="delegatedProps" :class="cn('text-foreground overflow-hidden p-1', props.class)">
+		<ComboboxLabel v-if="heading" class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+			{{ heading }}
+		</ComboboxLabel>
+		<slot />
+	</ComboboxGroup>
+</template>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ComboboxInputEmits, ComboboxInputProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SearchIcon } from 'lucide-vue-next';
+import { ComboboxInput, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps<
+	ComboboxInputProps & {
+		class?: HTMLAttributes['class'];
+	}
+>();
+
+const emits = defineEmits<ComboboxInputEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<div data-slot="command-input-wrapper" class="flex h-10 w-full items-center gap-2 border-b px-3">
+		<SearchIcon class="size-4 shrink-0 opacity-50" />
+		<ComboboxInput data-slot="command-input" :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)" v-bind="{ ...$attrs, ...forwarded }">
+			<slot />
+		</ComboboxInput>
+	</div>
+</template>