@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/ui/button/index.ts

@@ -5,63 +5,63 @@ import { getButtonVariantClasses } from '../../../lib/color-tokens';
 export { default as Button } from './Button.vue';
 
 export type ButtonVariants = {
-    variant?:
-    | 'primary'
-    | 'secondary'
-    | 'ghost'
-    | 'link'
-    | 'gray'
-    | 'green'
-    | 'red'
-    | 'blue'
-    | 'yellow'
-    | null
-    | undefined;
-    size?:
-    | 'default'
-    | 'sm'
-    | 'lg'
-    | 'icon'
-    | 'icon-sm'
-    | 'icon-lg'
-    | null
-    | undefined;
+	variant?:
+	| 'primary'
+	| 'secondary'
+	| 'ghost'
+	| 'link'
+	| 'gray'
+	| 'green'
+	| 'red'
+	| 'blue'
+	| 'yellow'
+	| null
+	| undefined;
+	size?:
+	| 'default'
+	| 'sm'
+	| 'lg'
+	| 'icon'
+	| 'icon-sm'
+	| 'icon-lg'
+	| null
+	| undefined;
 };
 
 export const buttonVariants: (props?: ButtonVariants & ClassProp) => string = cva(
-    [
-        "relative isolate inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded text-xs font-semibold outline-none sm:text-sm",
-        "[transition:color_150ms,background-color_150ms,border-color_150ms,box-shadow_220ms,opacity_150ms,scale_380ms_var(--ease-spring)]",
-        "enabled:active:scale-[0.97] enabled:active:duration-75 disabled:pointer-events-none disabled:opacity-50 data-loading:cursor-wait data-loading:disabled:opacity-100",
-        "focus-visible:ring-[3px] focus-visible:ring-ring/45",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
-        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    ],
-    {
-        variants: {
-            variant: {
-                primary: getButtonVariantClasses('primary'),
-                secondary: getButtonVariantClasses('secondary'),
-                ghost: getButtonVariantClasses('ghost'),
-                link: getButtonVariantClasses('link'),
-                gray: getButtonVariantClasses('gray'),
-                green: getButtonVariantClasses('green'),
-                red: getButtonVariantClasses('red'),
-                blue: getButtonVariantClasses('blue'),
-                yellow: getButtonVariantClasses('yellow'),
-            },
-            size: {
-                default: 'min-h-12 px-4 py-3 has-[>svg]:px-3',
-                sm: 'min-h-10 gap-1.5 px-3 py-2 has-[>svg]:px-2.5',
-                lg: 'min-h-[52px] px-4 py-3 has-[>svg]:px-4',
-                icon: 'size-12',
-                'icon-sm': 'size-10',
-                'icon-lg': 'size-[52px]',
-            },
-        },
-        defaultVariants: {
-            variant: 'primary',
-            size: 'default',
-        },
-    },
+	[
+		"relative isolate inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded text-xs font-semibold outline-none sm:text-sm",
+		"[transition:color_150ms,background-color_150ms,border-color_150ms,box-shadow_220ms,opacity_150ms,scale_380ms_var(--ease-spring)]",
+		"enabled:active:scale-[0.97] enabled:active:duration-75 disabled:pointer-events-none disabled:opacity-50 data-loading:cursor-wait data-loading:disabled:opacity-100",
+		"focus-visible:ring-[3px] focus-visible:ring-ring/45",
+		"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	],
+	{
+		variants: {
+			variant: {
+				primary: getButtonVariantClasses('primary'),
+				secondary: getButtonVariantClasses('secondary'),
+				ghost: getButtonVariantClasses('ghost'),
+				link: getButtonVariantClasses('link'),
+				gray: getButtonVariantClasses('gray'),
+				green: getButtonVariantClasses('green'),
+				red: getButtonVariantClasses('red'),
+				blue: getButtonVariantClasses('blue'),
+				yellow: getButtonVariantClasses('yellow'),
+			},
+			size: {
+				default: 'min-h-12 px-4 py-3 has-[>svg]:px-3',
+				sm: 'min-h-10 gap-1.5 px-3 py-2 has-[>svg]:px-2.5',
+				lg: 'min-h-[52px] px-4 py-3 has-[>svg]:px-4',
+				icon: 'size-12',
+				'icon-sm': 'size-10',
+				'icon-lg': 'size-[52px]',
+			},
+		},
+		defaultVariants: {
+			variant: 'primary',
+			size: 'default',
+		},
+	},
 );

package/src/components/ui/calendar/Calendar.vue

@@ -11,27 +11,27 @@ import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 import { NativeSelect, NativeSelectOption } from '../native-select';
 import {
-    CalendarCell,
-    CalendarCellTrigger,
-    CalendarGrid,
-    CalendarGridBody,
-    CalendarGridHead,
-    CalendarGridRow,
-    CalendarHeadCell,
-    CalendarHeader,
-    CalendarHeading,
-    CalendarNextButton,
-    CalendarPrevButton,
+	CalendarCell,
+	CalendarCellTrigger,
+	CalendarGrid,
+	CalendarGridBody,
+	CalendarGridHead,
+	CalendarGridRow,
+	CalendarHeadCell,
+	CalendarHeader,
+	CalendarHeading,
+	CalendarNextButton,
+	CalendarPrevButton,
 } from '.';
 
 // Props
 const props = withDefaults(defineProps<CalendarRootProps & {
-    class?: HTMLAttributes['class'];
-    layout?: LayoutTypes;
-    yearRange?: DateValue[];
+	class?: HTMLAttributes['class'];
+	layout?: LayoutTypes;
+	yearRange?: DateValue[];
 }>(), {
-    modelValue: undefined,
-    layout: undefined
+	modelValue: undefined,
+	layout: undefined
 });
 
 // Emits
@@ -40,8 +40,8 @@ const emits = defineEmits<CalendarRootEmits>();
 const delegatedProps = reactiveOmit(props, 'class', 'layout', 'placeholder');
 
 const placeholder = useVModel(props, 'placeholder', emits, {
-    passive: true,
-    defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
+	passive: true,
+	defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
 }) as Ref<DateValue>;
 
 // Follow the app language unless a locale is passed explicitly
@@ -51,140 +51,140 @@ const formatter = useDateFormatter(resolvedLocale.value);
 watch(resolvedLocale, value => formatter.setLocale(value));
 
 const yearRange = computed(() => {
-    return (
-        props.yearRange ??
-        createYearRange({
-            start:
-                props?.minValue ??
-                (
-                    toRaw(props.placeholder) ??
-                    props.defaultPlaceholder ??
-                    today(getLocalTimeZone())
-                ).cycle('year', -100),
+	return (
+		props.yearRange ??
+		createYearRange({
+			start:
+				props?.minValue ??
+				(
+					toRaw(props.placeholder) ??
+					props.defaultPlaceholder ??
+					today(getLocalTimeZone())
+				).cycle('year', -100),
 
-            end:
-                props?.maxValue ??
-                (
-                    toRaw(props.placeholder) ??
-                    props.defaultPlaceholder ??
-                    today(getLocalTimeZone())
-                ).cycle('year', 10),
-        })
-    );
+			end:
+				props?.maxValue ??
+				(
+					toRaw(props.placeholder) ??
+					props.defaultPlaceholder ??
+					today(getLocalTimeZone())
+				).cycle('year', 10),
+		})
+	);
 });
 
 const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{
-    date: DateValue;
+	date: DateValue;
 }>();
 const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{
-    date: DateValue;
+	date: DateValue;
 }>();
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <DefineMonthTemplate v-slot="{ date }">
-        <div class="**:data-[slot=native-select-icon]:right-1">
-            <div class="relative h-10 rounded border border-border bg-secondary transition-all duration-300 ease-in-out hover:border-border-strong focus-within:border-border-strong">
-                <div class="absolute inset-0 z-10 flex h-full items-center text-sm pl-2 pointer-events-none">
-                    {{ formatter.custom(toDate(date), { month: 'short' }) }}
-                </div>
-                <NativeSelect :aria-label="t('uiVintage.datePicker.month')" class="relative z-20 h-full min-h-0 w-23 rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.month" @change="
-                    (e: Event) => {
-                        placeholder = placeholder.set({
-                            month: Number((e?.target as any)?.value),
-                        });
-                    }
-                ">
-                    <NativeSelectOption v-for="month in createYear({ dateObj: date })" :key="month.toString()" :value="month.month" :selected="date.month === month.month">
-                        {{
-                            formatter.custom(toDate(month), { month: 'short' })
-                        }}
-                    </NativeSelectOption>
-                </NativeSelect>
-            </div>
-        </div>
-    </DefineMonthTemplate>
+	<DefineMonthTemplate v-slot="{ date }">
+		<div class="**:data-[slot=native-select-icon]:right-1">
+			<div class="relative h-10 rounded border border-border bg-secondary transition-all duration-300 ease-in-out hover:border-border-strong focus-within:border-border-strong">
+				<div class="absolute inset-0 z-10 flex h-full items-center text-sm pl-2 pointer-events-none">
+					{{ formatter.custom(toDate(date), { month: 'short' }) }}
+				</div>
+				<NativeSelect :aria-label="t('uiVintage.datePicker.month')" class="relative z-20 h-full min-h-0 w-23 rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.month" @change="
+					(e: Event) => {
+						placeholder = placeholder.set({
+							month: Number((e?.target as any)?.value),
+						});
+					}
+				">
+					<NativeSelectOption v-for="month in createYear({ dateObj: date })" :key="month.toString()" :value="month.month" :selected="date.month === month.month">
+						{{
+							formatter.custom(toDate(month), { month: 'short' })
+						}}
+					</NativeSelectOption>
+				</NativeSelect>
+			</div>
+		</div>
+	</DefineMonthTemplate>
 
-    <DefineYearTemplate v-slot="{ date }">
-        <div class="**:data-[slot=native-select-icon]:right-1">
-            <div class="relative h-10 rounded border border-border bg-secondary transition-all duration-300 ease-in-out hover:border-border-strong focus-within:border-border-strong">
-                <div class="absolute inset-0 z-10 flex h-full items-center text-sm pl-2 pointer-events-none">
-                    {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
-                </div>
-                <NativeSelect :aria-label="t('uiVintage.datePicker.year')" class="relative z-20 h-full min-h-0 w-24 rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.year" @change="
-                    (e: Event) => {
-                        placeholder = placeholder.set({
-                            year: Number((e?.target as any)?.value),
-                        });
-                    }
-                ">
-                    <NativeSelectOption v-for="year in yearRange" :key="year.toString()" :value="year.year" :selected="date.year === year.year">
-                        {{
-                            formatter.custom(toDate(year), { year: 'numeric' })
-                        }}
-                    </NativeSelectOption>
-                </NativeSelect>
-            </div>
-        </div>
-    </DefineYearTemplate>
+	<DefineYearTemplate v-slot="{ date }">
+		<div class="**:data-[slot=native-select-icon]:right-1">
+			<div class="relative h-10 rounded border border-border bg-secondary transition-all duration-300 ease-in-out hover:border-border-strong focus-within:border-border-strong">
+				<div class="absolute inset-0 z-10 flex h-full items-center text-sm pl-2 pointer-events-none">
+					{{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+				</div>
+				<NativeSelect :aria-label="t('uiVintage.datePicker.year')" class="relative z-20 h-full min-h-0 w-24 rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.year" @change="
+					(e: Event) => {
+						placeholder = placeholder.set({
+							year: Number((e?.target as any)?.value),
+						});
+					}
+				">
+					<NativeSelectOption v-for="year in yearRange" :key="year.toString()" :value="year.year" :selected="date.year === year.year">
+						{{
+							formatter.custom(toDate(year), { year: 'numeric' })
+						}}
+					</NativeSelectOption>
+				</NativeSelect>
+			</div>
+		</div>
+	</DefineYearTemplate>
 
-    <CalendarRoot v-slot="{ grid, weekDays, date }" v-bind="forwarded" v-model:placeholder="placeholder" :locale="resolvedLocale" data-slot="calendar" :class="cn('p-3', props.class)">
-        <CalendarHeader class="pt-0">
-            <nav class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between">
-                <CalendarPrevButton>
-                    <slot name="calendar-prev-icon" />
-                </CalendarPrevButton>
-                <CalendarNextButton>
-                    <slot name="calendar-next-icon" />
-                </CalendarNextButton>
-            </nav>
+	<CalendarRoot v-slot="{ grid, weekDays, date }" v-bind="forwarded" v-model:placeholder="placeholder" :locale="resolvedLocale" data-slot="calendar" :class="cn('p-3', props.class)">
+		<CalendarHeader class="pt-0">
+			<nav class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between">
+				<CalendarPrevButton>
+					<slot name="calendar-prev-icon" />
+				</CalendarPrevButton>
+				<CalendarNextButton>
+					<slot name="calendar-next-icon" />
+				</CalendarNextButton>
+			</nav>
 
-            <slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
-                <template v-if="layout === 'month-and-year'">
-                    <div class="flex items-center justify-center gap-1">
-                        <ReuseMonthTemplate :date="date" />
-                        <ReuseYearTemplate :date="date" />
-                    </div>
-                </template>
-                <template v-else-if="layout === 'month-only'">
-                    <div class="flex items-center justify-center gap-1">
-                        <ReuseMonthTemplate :date="date" />
-                        {{
-                            formatter.custom(toDate(date), { year: 'numeric' })
-                        }}
-                    </div>
-                </template>
-                <template v-else-if="layout === 'year-only'">
-                    <div class="flex items-center justify-center gap-1">
-                        {{ formatter.custom(toDate(date), { month: 'short' }) }}
-                        <ReuseYearTemplate :date="date" />
-                    </div>
-                </template>
-                <template v-else>
-                    <CalendarHeading />
-                </template>
-            </slot>
-        </CalendarHeader>
+			<slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
+				<template v-if="layout === 'month-and-year'">
+					<div class="flex items-center justify-center gap-1">
+						<ReuseMonthTemplate :date="date" />
+						<ReuseYearTemplate :date="date" />
+					</div>
+				</template>
+				<template v-else-if="layout === 'month-only'">
+					<div class="flex items-center justify-center gap-1">
+						<ReuseMonthTemplate :date="date" />
+						{{
+							formatter.custom(toDate(date), { year: 'numeric' })
+						}}
+					</div>
+				</template>
+				<template v-else-if="layout === 'year-only'">
+					<div class="flex items-center justify-center gap-1">
+						{{ formatter.custom(toDate(date), { month: 'short' }) }}
+						<ReuseYearTemplate :date="date" />
+					</div>
+				</template>
+				<template v-else>
+					<CalendarHeading />
+				</template>
+			</slot>
+		</CalendarHeader>
 
-        <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
-            <CalendarGrid v-for="month in grid" :key="month.value.toString()">
-                <CalendarGridHead>
-                    <CalendarGridRow>
-                        <CalendarHeadCell v-for="day in weekDays" :key="day">
-                            {{ day }}
-                        </CalendarHeadCell>
-                    </CalendarGridRow>
-                </CalendarGridHead>
-                <CalendarGridBody>
-                    <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
-                        <CalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
-                            <CalendarCellTrigger :day="weekDate" :month="month.value" />
-                        </CalendarCell>
-                    </CalendarGridRow>
-                </CalendarGridBody>
-            </CalendarGrid>
-        </div>
-    </CalendarRoot>
+		<div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+			<CalendarGrid v-for="month in grid" :key="month.value.toString()">
+				<CalendarGridHead>
+					<CalendarGridRow>
+						<CalendarHeadCell v-for="day in weekDays" :key="day">
+							{{ day }}
+						</CalendarHeadCell>
+					</CalendarGridRow>
+				</CalendarGridHead>
+				<CalendarGridBody>
+					<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+						<CalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
+							<CalendarCellTrigger :day="weekDate" :month="month.value" />
+						</CalendarCell>
+					</CalendarGridRow>
+				</CalendarGridBody>
+			</CalendarGrid>
+		</div>
+	</CalendarRoot>
 </template>

package/src/components/ui/calendar/CalendarCell.vue

@@ -14,11 +14,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarCell data-slot="calendar-cell" :class="cn(
-        'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded',
-        props.class,
-    )
-        " v-bind="forwardedProps">
-        <slot />
-    </CalendarCell>
+	<CalendarCell data-slot="calendar-cell" :class="cn(
+		'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded',
+		props.class,
+	)
+		" v-bind="forwardedProps">
+		<slot />
+	</CalendarCell>
 </template>

package/src/components/ui/calendar/CalendarCellTrigger.vue

@@ -8,7 +8,7 @@ import { buttonVariants } from '../button';
 
 // Props
 const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {
-    as: 'button'
+	as: 'button'
 });
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -17,21 +17,21 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarCellTrigger data-slot="calendar-cell-trigger" :class="cn(
-        buttonVariants({ variant: 'ghost' }),
-        'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
-        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
-        // Selected
-        'data-selected:bg-primary data-selected:text-primary-foreground data-selected:opacity-100 [&[data-selected]:hover]:bg-primary data-selected:hover:text-primary-foreground data-selected:focus:bg-primary data-selected:focus:text-primary-foreground',
-        // Disabled
-        'data-disabled:text-muted-foreground data-disabled:opacity-50',
-        // Unavailable
-        'data-unavailable:text-destructive data-unavailable:line-through',
-        // Outside months
-        'data-outside-view:text-muted-foreground',
-        props.class,
-    )
-        " v-bind="forwardedProps">
-        <slot />
-    </CalendarCellTrigger>
+	<CalendarCellTrigger data-slot="calendar-cell-trigger" :class="cn(
+		buttonVariants({ variant: 'ghost' }),
+		'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+		// Selected
+		'data-selected:bg-primary data-selected:text-primary-foreground data-selected:opacity-100 [&[data-selected]:hover]:bg-primary data-selected:hover:text-primary-foreground data-selected:focus:bg-primary data-selected:focus:text-primary-foreground',
+		// Disabled
+		'data-disabled:text-muted-foreground data-disabled:opacity-50',
+		// Unavailable
+		'data-unavailable:text-destructive data-unavailable:line-through',
+		// Outside months
+		'data-outside-view:text-muted-foreground',
+		props.class,
+	)
+		" v-bind="forwardedProps">
+		<slot />
+	</CalendarCellTrigger>
 </template>

package/src/components/ui/calendar/CalendarGrid.vue

@@ -14,7 +14,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarGrid data-slot="calendar-grid" :class="cn('w-full border-collapse space-x-1', props.class)" v-bind="forwardedProps">
-        <slot />
-    </CalendarGrid>
+	<CalendarGrid data-slot="calendar-grid" :class="cn('w-full border-collapse space-x-1', props.class)" v-bind="forwardedProps">
+		<slot />
+	</CalendarGrid>
 </template>

package/src/components/ui/calendar/CalendarGridBody.vue

@@ -7,7 +7,7 @@ const props = defineProps<CalendarGridBodyProps>();
 </script>
 
 <template>
-    <CalendarGridBody data-slot="calendar-grid-body" v-bind="props">
-        <slot />
-    </CalendarGridBody>
+	<CalendarGridBody data-slot="calendar-grid-body" v-bind="props">
+		<slot />
+	</CalendarGridBody>
 </template>

package/src/components/ui/calendar/CalendarGridHead.vue

@@ -8,7 +8,7 @@ const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['clas
 </script>
 
 <template>
-    <CalendarGridHead data-slot="calendar-grid-head" v-bind="props">
-        <slot />
-    </CalendarGridHead>
+	<CalendarGridHead data-slot="calendar-grid-head" v-bind="props">
+		<slot />
+	</CalendarGridHead>
 </template>

package/src/components/ui/calendar/CalendarGridRow.vue

@@ -14,7 +14,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarGridRow data-slot="calendar-grid-row" :class="cn('flex', props.class)" v-bind="forwardedProps">
-        <slot />
-    </CalendarGridRow>
+	<CalendarGridRow data-slot="calendar-grid-row" :class="cn('flex', props.class)" v-bind="forwardedProps">
+		<slot />
+	</CalendarGridRow>
 </template>

package/src/components/ui/calendar/CalendarHeadCell.vue

@@ -14,11 +14,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarHeadCell data-slot="calendar-head-cell" :class="cn(
-        'text-muted-foreground rounded flex-1 font-normal text-[0.8rem]',
-        props.class,
-    )
-        " v-bind="forwardedProps">
-        <slot />
-    </CalendarHeadCell>
+	<CalendarHeadCell data-slot="calendar-head-cell" :class="cn(
+		'text-muted-foreground rounded flex-1 font-normal text-[0.8rem]',
+		props.class,
+	)
+		" v-bind="forwardedProps">
+		<slot />
+	</CalendarHeadCell>
 </template>

package/src/components/ui/calendar/CalendarHeader.vue

@@ -14,11 +14,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarHeader data-slot="calendar-header" :class="cn(
-        'flex justify-center pt-1 relative items-center w-full px-8',
-        props.class,
-    )
-        " v-bind="forwardedProps">
-        <slot />
-    </CalendarHeader>
+	<CalendarHeader data-slot="calendar-header" :class="cn(
+		'flex justify-center pt-1 relative items-center w-full px-8',
+		props.class,
+	)
+		" v-bind="forwardedProps">
+		<slot />
+	</CalendarHeader>
 </template>

package/src/components/ui/calendar/CalendarHeading.vue

@@ -9,7 +9,7 @@ import { cn } from '../../../lib/utils';
 const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>();
 
 defineSlots<{
-    default: (props: { headingValue: string }) => any;
+	default: (props: { headingValue: string }) => any;
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -18,9 +18,9 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarHeading v-slot="{ headingValue }" data-slot="calendar-heading" :class="cn('text-sm font-semibold', props.class)" v-bind="forwardedProps">
-        <slot :heading-value>
-            {{ headingValue }}
-        </slot>
-    </CalendarHeading>
+	<CalendarHeading v-slot="{ headingValue }" data-slot="calendar-heading" :class="cn('text-sm font-semibold', props.class)" v-bind="forwardedProps">
+		<slot :heading-value>
+			{{ headingValue }}
+		</slot>
+	</CalendarHeading>
 </template>