@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/ui/date-time-picker/DateTimePicker.vue

@@ -10,28 +10,28 @@ import { TimePicker } from '../time-picker';
 
 // Props
 const props = withDefaults(defineProps<{
-    defaultValue?: Date | null;
-    modelValue?: Date | null;
-    minDate?: Date | null;
-    maxDate?: Date | null;
-    step?: string | number;
-    disabled?: boolean;
-    datePlaceholder?: string;
-    class?: HTMLAttributes['class'];
-    datePickerClass?: HTMLAttributes['class'];
-    timePickerClass?: HTMLAttributes['class'];
-    datePickerContentClass?: HTMLAttributes['class'];
+	defaultValue?: Date | null;
+	modelValue?: Date | null;
+	minDate?: Date | null;
+	maxDate?: Date | null;
+	step?: string | number;
+	disabled?: boolean;
+	datePlaceholder?: string;
+	class?: HTMLAttributes['class'];
+	datePickerClass?: HTMLAttributes['class'];
+	timePickerClass?: HTMLAttributes['class'];
+	datePickerContentClass?: HTMLAttributes['class'];
 }>(), {
-    defaultValue: null,
-    minDate: null,
-    maxDate: null,
-    step: 60,
-    disabled: false
+	defaultValue: null,
+	minDate: null,
+	maxDate: null,
+	step: 60,
+	disabled: false
 });
 
 // Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', payload: Date | null): void;
+	(e: 'update:modelValue', payload: Date | null): void;
 }>();
 
 const localTimeZone = getLocalTimeZone();
@@ -39,121 +39,121 @@ const internalValue = ref<Date | null>(props.defaultValue);
 const isControlled = computed(() => props.modelValue !== undefined);
 
 const value = computed({
-    get: () =>
-        (isControlled.value ? props.modelValue : internalValue.value) ?? null,
-    set: (nextValue: Date | null) => {
-        const resolvedValue = clampDate(nextValue);
+	get: () =>
+		(isControlled.value ? props.modelValue : internalValue.value) ?? null,
+	set: (nextValue: Date | null) => {
+		const resolvedValue = clampDate(nextValue);
 
-        if (!isControlled.value) internalValue.value = resolvedValue;
+		if (!isControlled.value) internalValue.value = resolvedValue;
 
-        emits('update:modelValue', resolvedValue);
-    },
+		emits('update:modelValue', resolvedValue);
+	},
 });
 
 const toPickerDateValue = (
-    date: Date | null | undefined,
+	date: Date | null | undefined,
 ): DateValue | undefined => {
-    if (!(date instanceof Date) || Number.isNaN(date.getTime()))
-        return undefined;
+	if (!(date instanceof Date) || Number.isNaN(date.getTime()))
+		return undefined;
 
-    return toCalendarDate(fromDate(date, localTimeZone));
+	return toCalendarDate(fromDate(date, localTimeZone));
 };
 
 const toTimeString = (date: Date | null | undefined) => {
-    if (!(date instanceof Date) || Number.isNaN(date.getTime())) return '';
+	if (!(date instanceof Date) || Number.isNaN(date.getTime())) return '';
 
-    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+	return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
 };
 
 const buildDate = (dateValue: DateValue | undefined, timeValue: string) => {
-    if (!dateValue) return null;
-
-    const [hours = '0', minutes = '0'] = (timeValue || '00:00').split(':');
-    const nextDate = new Date(
-        dateValue.year,
-        dateValue.month - 1,
-        dateValue.day,
-        Number(hours),
-        Number(minutes),
-        0,
-        0,
-    );
-
-    return Number.isNaN(nextDate.getTime()) ? null : nextDate;
+	if (!dateValue) return null;
+
+	const [hours = '0', minutes = '0'] = (timeValue || '00:00').split(':');
+	const nextDate = new Date(
+		dateValue.year,
+		dateValue.month - 1,
+		dateValue.day,
+		Number(hours),
+		Number(minutes),
+		0,
+		0,
+	);
+
+	return Number.isNaN(nextDate.getTime()) ? null : nextDate;
 };
 
 const areSameCalendarDay = (
-    left: DateValue | undefined,
-    right: DateValue | undefined,
+	left: DateValue | undefined,
+	right: DateValue | undefined,
 ) => {
-    if (!left || !right) return false;
+	if (!left || !right) return false;
 
-    return (
-        left.year === right.year &&
-        left.month === right.month &&
-        left.day === right.day
-    );
+	return (
+		left.year === right.year &&
+		left.month === right.month &&
+		left.day === right.day
+	);
 };
 
 const clampDate = (date: Date | null) => {
-    if (!date) return null;
+	if (!date) return null;
 
-    if (props.minDate && date.getTime() < props.minDate.getTime())
-        return new Date(props.minDate);
+	if (props.minDate && date.getTime() < props.minDate.getTime())
+		return new Date(props.minDate);
 
-    if (props.maxDate && date.getTime() > props.maxDate.getTime())
-        return new Date(props.maxDate);
+	if (props.maxDate && date.getTime() > props.maxDate.getTime())
+		return new Date(props.maxDate);
 
-    return date;
+	return date;
 };
 
 const getFallbackDate = () =>
-    value.value ?? props.minDate ?? props.maxDate ?? new Date();
+	value.value ?? props.minDate ?? props.maxDate ?? new Date();
 
 const dateValue = computed({
-    get: () => toPickerDateValue(value.value),
-    set: (nextDateValue: DateValue | undefined) => {
-        if (!nextDateValue) {
-            value.value = null;
-            return;
-        }
-
-        const fallbackTime = toTimeString(
-            value.value ?? props.minDate ?? props.maxDate,
-        );
-        value.value = buildDate(nextDateValue, fallbackTime);
-    },
+	get: () => toPickerDateValue(value.value),
+	set: (nextDateValue: DateValue | undefined) => {
+		if (!nextDateValue) {
+			value.value = null;
+			return;
+		}
+
+		const fallbackTime = toTimeString(
+			value.value ?? props.minDate ?? props.maxDate,
+		);
+		value.value = buildDate(nextDateValue, fallbackTime);
+	},
 });
 
 const timeValue = computed({
-    get: () => toTimeString(value.value),
-    set: (nextTimeValue: string) => {
-        value.value = buildDate(
-            toPickerDateValue(getFallbackDate()),
-            nextTimeValue || toTimeString(getFallbackDate()),
-        );
-    },
+	get: () => toTimeString(value.value),
+	set: (nextTimeValue: string) => {
+		value.value = buildDate(
+			toPickerDateValue(getFallbackDate()),
+			nextTimeValue || toTimeString(getFallbackDate()),
+		);
+	},
 });
 
 const minDateValue = computed(() => toPickerDateValue(props.minDate));
 const maxDateValue = computed(() => toPickerDateValue(props.maxDate));
 
 const minTimeValue = computed(() => {
-    const selectedDate = dateValue.value;
-    const minimumDate = minDateValue.value;
+	const selectedDate = dateValue.value;
+	const minimumDate = minDateValue.value;
 
-    return areSameCalendarDay(selectedDate, minimumDate)
-        ? toTimeString(props.minDate)
-        : undefined;
+	return areSameCalendarDay(selectedDate, minimumDate)
+		? toTimeString(props.minDate)
+		: undefined;
 });
 
 const maxTimeValue = computed(() => {
-    const selectedDate = dateValue.value;
-    const maximumDate = maxDateValue.value;
+	const selectedDate = dateValue.value;
+	const maximumDate = maxDateValue.value;
 
-    return areSameCalendarDay(selectedDate, maximumDate)
-        ? toTimeString(props.maxDate)
-        : undefined;
+	return areSameCalendarDay(selectedDate, maximumDate)
+		? toTimeString(props.maxDate)
+		: undefined;
 });
 
 // The time input sits next to the date button, which takes the field label
@@ -161,13 +161,13 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <div :class="cn('grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)]', props.class,)">
-        <div>
-            <DatePicker v-model="dateValue" :disabled="props.disabled" :placeholder="props.datePlaceholder" :min-value="minDateValue" :max-value="maxDateValue" :class="cn('w-full', props.datePickerClass)" :content-class="props.datePickerContentClass" />
-        </div>
-
-        <div>
-            <TimePicker v-model="timeValue" :aria-label="t('uiVintage.datePicker.time')" :disabled="props.disabled" :step="props.step" :min="minTimeValue" :max="maxTimeValue" :class="cn('w-full', props.timePickerClass)" />
-        </div>
-    </div>
+	<div :class="cn('grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)]', props.class,)">
+		<div>
+			<DatePicker v-model="dateValue" :disabled="props.disabled" :placeholder="props.datePlaceholder" :min-value="minDateValue" :max-value="maxDateValue" :class="cn('w-full', props.datePickerClass)" :content-class="props.datePickerContentClass" />
+		</div>
+
+		<div>
+			<TimePicker v-model="timeValue" :aria-label="t('uiVintage.datePicker.time')" :disabled="props.disabled" :step="props.step" :min="minTimeValue" :max="maxTimeValue" :class="cn('w-full', props.timePickerClass)" />
+		</div>
+	</div>
 </template>

package/src/components/ui/dialog/Dialog.vue

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <DialogRoot v-slot="slotProps" data-slot="dialog" v-bind="forwarded">
-        <slot v-bind="slotProps" />
-    </DialogRoot>
+	<DialogRoot v-slot="slotProps" data-slot="dialog" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</DialogRoot>
 </template>

package/src/components/ui/dialog/DialogClose.vue

@@ -7,7 +7,7 @@ const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>
-    <DialogClose data-slot="dialog-close" v-bind="props">
-        <slot />
-    </DialogClose>
+	<DialogClose data-slot="dialog-close" v-bind="props">
+		<slot />
+	</DialogClose>
 </template>

package/src/components/ui/dialog/DialogContent.vue

@@ -3,7 +3,7 @@ import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui';
-import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
@@ -11,15 +11,15 @@ import { Button } from '../button';
 import DialogOverlay from './DialogOverlay.vue';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<DialogContentProps & {
-    class?: HTMLAttributes['class'];
-    showCloseButton?: boolean;
+	class?: HTMLAttributes['class'];
+	showCloseButton?: boolean;
 }>(), {
-    showCloseButton: false
+	showCloseButton: false
 });
 
 const { t } = useI18n();
@@ -33,21 +33,21 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <DialogPortal>
-        <DialogOverlay />
-        <DialogContent data-slot="dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-            'uv-modal-motion bg-card text-card-foreground fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border border-border p-6 shadow-elevated-xl outline-none sm:max-w-106.25',
-            props.class
-        )
-            ">
-            <slot />
-
-            <DialogClose v-if="props.showCloseButton" data-slot="dialog-close" as-child>
-                <Button variant="ghost" size="icon-sm" class="group/close absolute top-3 right-3 size-8 p-0.5">
-                    <HugeiconsIcon :icon="Cancel01Icon" aria-hidden="true" class="transition-transform duration-300 ease-spring group-hover/close:rotate-90" />
-                    <span class="sr-only">{{ t('uiVintage.buttons.close') }}</span>
-                </Button>
-            </DialogClose>
-        </DialogContent>
-    </DialogPortal>
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogContent data-slot="dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+			'uv-modal-motion bg-card text-card-foreground fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border border-border p-6 shadow-elevated-xl outline-none sm:max-w-106.25',
+			props.class
+		)
+			">
+			<slot />
+
+			<DialogClose v-if="props.showCloseButton" data-slot="dialog-close" as-child>
+				<Button variant="ghost" size="icon-sm" class="group/close absolute top-3 right-3 size-8 p-0.5">
+					<HugeiconsIcon :icon="Cancel01Icon" aria-hidden="true" class="transition-transform duration-300 ease-spring group-hover/close:rotate-90" />
+					<span class="sr-only">{{ t('uiVintage.buttons.close') }}</span>
+				</Button>
+			</DialogClose>
+		</DialogContent>
+	</DialogPortal>
 </template>

package/src/components/ui/dialog/DialogDescription.vue

@@ -14,11 +14,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <DialogDescription data-slot="dialog-description" v-bind="forwardedProps" :class="cn(
-        'text-xs sm:text-sm leading-5 text-muted-foreground',
-        props.class
-    )
-        ">
-        <slot />
-    </DialogDescription>
+	<DialogDescription data-slot="dialog-description" v-bind="forwardedProps" :class="cn(
+		'text-xs sm:text-sm leading-5 text-muted-foreground',
+		props.class
+	)
+		">
+		<slot />
+	</DialogDescription>
 </template>

package/src/components/ui/dialog/DialogFooter.vue

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	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>
+	<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/src/components/ui/dialog/DialogHeader.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="dialog-header" :class="cn('flex flex-col gap-1.5', props.class)">
-        <slot />
-    </div>
+	<div data-slot="dialog-header" :class="cn('flex flex-col gap-1.5', props.class)">
+		<slot />
+	</div>
 </template>

package/src/components/ui/dialog/DialogOverlay.vue

@@ -12,11 +12,11 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <DialogOverlay data-slot="dialog-overlay" v-bind="delegatedProps" :class="cn(
-        'uv-overlay-motion fixed inset-0 isolate z-50 bg-black/40 backdrop-blur-[3px] dark:bg-black/60',
-        props.class
-    )
-        ">
-        <slot />
-    </DialogOverlay>
+	<DialogOverlay data-slot="dialog-overlay" v-bind="delegatedProps" :class="cn(
+		'uv-overlay-motion fixed inset-0 isolate z-50 bg-black/40 backdrop-blur-[3px] dark:bg-black/60',
+		props.class
+	)
+		">
+		<slot />
+	</DialogOverlay>
 </template>

package/src/components/ui/dialog/DialogScrollContent.vue

@@ -3,22 +3,22 @@ import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui';
-import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 import { Button } from '../button';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<DialogContentProps & {
-    class?: HTMLAttributes['class'];
-    showCloseButton?: boolean;
+	class?: HTMLAttributes['class'];
+	showCloseButton?: boolean;
 }>(), {
-    showCloseButton: false
+	showCloseButton: false
 });
 
 const { t } = useI18n();
@@ -32,33 +32,33 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <DialogPortal>
-        <DialogOverlay class="uv-overlay-motion fixed inset-0 isolate z-50 grid place-items-center overflow-y-auto bg-black/40 backdrop-blur-[3px] dark:bg-black/60">
-            <DialogContent :class="cn(
-                'uv-modal-motion relative z-50 my-6 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded border border-border bg-card p-6 text-card-foreground shadow-elevated-xl outline-none sm:max-w-106.25',
-                props.class
-            )
-                " v-bind="{ ...$attrs, ...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 />
+	<DialogPortal>
+		<DialogOverlay class="uv-overlay-motion fixed inset-0 isolate z-50 grid place-items-center overflow-y-auto bg-black/40 backdrop-blur-[3px] dark:bg-black/60">
+			<DialogContent :class="cn(
+				'uv-modal-motion relative z-50 my-6 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded border border-border bg-card p-6 text-card-foreground shadow-elevated-xl outline-none sm:max-w-106.25',
+				props.class
+			)
+				" v-bind="{ ...$attrs, ...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 v-if="props.showCloseButton" data-slot="dialog-close" as-child>
-                    <Button variant="ghost" size="icon-sm" class="group/close absolute top-3 right-3 size-8 p-0.5">
-                        <HugeiconsIcon :icon="Cancel01Icon" aria-hidden="true" class="transition-transform duration-300 ease-spring group-hover/close:rotate-90" />
-                        <span class="sr-only">{{ t('uiVintage.buttons.close') }}</span>
-                    </Button>
-                </DialogClose>
-            </DialogContent>
-        </DialogOverlay>
-    </DialogPortal>
+				<DialogClose v-if="props.showCloseButton" data-slot="dialog-close" as-child>
+					<Button variant="ghost" size="icon-sm" class="group/close absolute top-3 right-3 size-8 p-0.5">
+						<HugeiconsIcon :icon="Cancel01Icon" aria-hidden="true" class="transition-transform duration-300 ease-spring group-hover/close:rotate-90" />
+						<span class="sr-only">{{ t('uiVintage.buttons.close') }}</span>
+					</Button>
+				</DialogClose>
+			</DialogContent>
+		</DialogOverlay>
+	</DialogPortal>
 </template>

package/src/components/ui/dialog/DialogTitle.vue

@@ -14,7 +14,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <DialogTitle data-slot="dialog-title" v-bind="forwardedProps" :class="cn('text-base font-semibold', props.class)">
-        <slot />
-    </DialogTitle>
+	<DialogTitle data-slot="dialog-title" v-bind="forwardedProps" :class="cn('text-base font-semibold', props.class)">
+		<slot />
+	</DialogTitle>
 </template>

package/src/components/ui/dialog/DialogTrigger.vue

@@ -7,7 +7,7 @@ const props = defineProps<DialogTriggerProps>();
 </script>
 
 <template>
-    <DialogTrigger data-slot="dialog-trigger" v-bind="props">
-        <slot />
-    </DialogTrigger>
+	<DialogTrigger data-slot="dialog-trigger" v-bind="props">
+		<slot />
+	</DialogTrigger>
 </template>

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

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <DropdownMenuRoot v-slot="slotProps" data-slot="dropdown-menu" v-bind="forwarded">
-        <slot v-bind="slotProps" />
-    </DropdownMenuRoot>
+	<DropdownMenuRoot v-slot="slotProps" data-slot="dropdown-menu" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</DropdownMenuRoot>
 </template>

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

@@ -2,7 +2,7 @@
 import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { Tick02Icon } from '@hugeicons/core-free-icons';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '../../../lib/utils';
@@ -19,16 +19,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <DropdownMenuCheckboxItem data-slot="dropdown-menu-checkbox-item" v-bind="forwarded" :class="cn(dropdownMenuItemClass, 'pl-9 data-[state=checked]:text-foreground', props.class)">
-        <!-- Check indicator (pops in when checked) -->
-        <span class="pointer-events-none absolute left-3 flex size-4 items-center justify-center text-primary">
-            <DropdownMenuItemIndicator>
-                <slot name="indicator-icon">
-                    <HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
-                </slot>
-            </DropdownMenuItemIndicator>
-        </span>
+	<DropdownMenuCheckboxItem data-slot="dropdown-menu-checkbox-item" v-bind="forwarded" :class="cn(dropdownMenuItemClass, 'pl-9 data-[state=checked]:text-foreground', props.class)">
+		<!-- Check indicator (pops in when checked) -->
+		<span class="pointer-events-none absolute left-3 flex size-4 items-center justify-center text-primary">
+			<DropdownMenuItemIndicator>
+				<slot name="indicator-icon">
+					<HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
+				</slot>
+			</DropdownMenuItemIndicator>
+		</span>
 
-        <slot />
-    </DropdownMenuCheckboxItem>
+		<slot />
+	</DropdownMenuCheckboxItem>
 </template>

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

@@ -7,14 +7,14 @@ import { cn } from '../../../lib/utils';
 import { dropdownMenuStaggerClass, dropdownMenuSurfaceClass } from './classes';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), {
-    align: 'start',
-    sideOffset: 6,
-    collisionPadding: 8
+	align: 'start',
+	sideOffset: 6,
+	collisionPadding: 8
 });
 
 // Emits
@@ -25,15 +25,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <DropdownMenuPortal>
-        <DropdownMenuContent data-slot="dropdown-menu-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-            dropdownMenuSurfaceClass,
-            'max-h-(--reka-dropdown-menu-content-available-height)',
-            dropdownMenuStaggerClass,
-            props.class
-        )
-            ">
-            <slot />
-        </DropdownMenuContent>
-    </DropdownMenuPortal>
+	<DropdownMenuPortal>
+		<DropdownMenuContent data-slot="dropdown-menu-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+			dropdownMenuSurfaceClass,
+			'max-h-(--reka-dropdown-menu-content-available-height)',
+			dropdownMenuStaggerClass,
+			props.class
+		)
+			">
+			<slot />
+		</DropdownMenuContent>
+	</DropdownMenuPortal>
 </template>