@brumaombra/ui-vintage 0.7.8 → 0.7.10

package/src/components/ui/busy/Busy.vue

@@ -1,45 +1,52 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { Loading03Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { Loading03Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { cn } from '../../../lib/utils';
 
-interface BusyProps {
-  show?: boolean
-  label?: string
-  class?: HTMLAttributes["class"]
-  overlayClass?: HTMLAttributes["class"]
-}
-
-const props = withDefaults(defineProps<BusyProps>(), {
-  show: false,
-  label: "Loading...",
-})
+// Props
+const props = withDefaults(defineProps<{
+    show?: boolean;
+    label?: string;
+    class?: HTMLAttributes['class'];
+    overlayClass?: HTMLAttributes['class'];
+}>(), {
+    show: false,
+    label: 'Loading...'
+});
 </script>
 
 <template>
-  <Transition name="busy-fade">
-    <div v-if="props.show" data-slot="busy-overlay" :class="cn('fixed inset-0 z-50 flex items-center justify-center bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] duration-300 ease-out', props.overlayClass)">
-      <div data-slot="busy-content" role="status" aria-live="polite" aria-busy="true" :class="cn('bg-card text-card-foreground flex w-72 flex-col items-center justify-center gap-4 rounded border border-border px-8 py-7 text-center shadow-2xl', props.class)">
-        <slot>
-          <HugeiconsIcon data-slot="busy-spinner" :icon="Loading03Icon" class="size-10 animate-spin text-primary" />
-          <span v-if="props.label" data-slot="busy-label" class="text-xs font-semibold text-foreground sm:text-sm">
-            {{ props.label }}
-          </span>
-        </slot>
-      </div>
-    </div>
-  </Transition>
+    <Transition name="busy-fade">
+        <div v-if="props.show" data-slot="busy-overlay" :class="cn(
+            'fixed inset-0 z-50 flex items-center justify-center bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] duration-300 ease-out',
+            props.overlayClass,
+        )
+            ">
+            <div data-slot="busy-content" role="status" aria-live="polite" aria-busy="true" :class="cn(
+                'bg-card text-card-foreground flex w-72 flex-col items-center justify-center gap-4 rounded border border-border px-8 py-7 text-center shadow-2xl',
+                props.class,
+            )
+                ">
+                <slot>
+                    <HugeiconsIcon data-slot="busy-spinner" :icon="Loading03Icon" class="size-10 animate-spin text-primary" />
+                    <span v-if="props.label" data-slot="busy-label" class="text-xs font-semibold text-foreground sm:text-sm">
+                        {{ props.label }}
+                    </span>
+                </slot>
+            </div>
+        </div>
+    </Transition>
 </template>
 
 <style scoped>
 .busy-fade-enter-active,
 .busy-fade-leave-active {
-  transition: opacity 0.3s ease-out;
+    transition: opacity 0.3s ease-out;
 }
 
 .busy-fade-enter-from,
 .busy-fade-leave-to {
-  opacity: 0;
+    opacity: 0;
 }
 </style>

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

@@ -1 +1 @@
-export { default as Busy } from "./Busy.vue"
+export { default as Busy } from './Busy.vue';

package/src/components/ui/button/Button.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { buttonVariants } from "."
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '.';
+import { Primitive } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '.';
 
-interface Props extends PrimitiveProps {
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: "button",
-})
+// Props
+const props = withDefaults(defineProps<PrimitiveProps & {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+}>(), {
+    as: 'button'
+});
 </script>
 
 <template>
-  <Primitive data-slot="button" :data-variant="variant" :data-size="size" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
-    <slot />
-  </Primitive>
-</template>
+    <Primitive data-slot="button" :data-variant="variant" :data-size="size" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+        <slot />
+    </Primitive>
+</template>

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

@@ -1,41 +1,60 @@
-import type { ClassProp } from "class-variance-authority/types"
-import { cva } from "class-variance-authority"
-import { getButtonVariantClasses } from "../../../lib/color-tokens"
+import type { ClassProp } from 'class-variance-authority/types';
+import { cva } from 'class-variance-authority';
+import { getButtonVariantClasses } from '../../../lib/color-tokens';
 
-export { default as Button } from "./Button.vue"
+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(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-xs font-semibold transition-all duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 enabled:active:scale-[0.98] sm:text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    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]",
-      },
+    "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-xs font-semibold transition-all duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 enabled:active:scale-[0.98] sm:text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    {
+        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',
+        },
     },
-    defaultVariants: {
-      variant: "primary",
-      size: "default",
-    },
-  },
-)
+);

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

@@ -1,139 +1,185 @@
-<script lang="ts" setup>
-import type { CalendarRootEmits, CalendarRootProps, DateValue } from "reka-ui"
-import type { HTMLAttributes, Ref } from "vue"
-import type { LayoutTypes } from "."
-import { getLocalTimeZone, today } from "@internationalized/date"
-import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core"
-import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui"
-import { createYear, createYearRange, toDate } from "reka-ui/date"
-import { computed, toRaw } from "vue"
-import { cn } from "../../../lib/utils"
-import { NativeSelect, NativeSelectOption } from '../native-select'
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
+<script setup lang="ts">
+import type { CalendarRootEmits, CalendarRootProps, DateValue } from 'reka-ui';
+import type { HTMLAttributes, Ref } from 'vue';
+import type { LayoutTypes } from '.';
+import { getLocalTimeZone, today } from '@internationalized/date';
+import { createReusableTemplate, reactiveOmit, useVModel } from '@vueuse/core';
+import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from 'reka-ui';
+import { createYear, createYearRange, toDate } from 'reka-ui/date';
+import { computed, toRaw } from 'vue';
+import { cn } from '../../../lib/utils';
+import { NativeSelect, NativeSelectOption } from '../native-select';
+import {
+    CalendarCell,
+    CalendarCellTrigger,
+    CalendarGrid,
+    CalendarGridBody,
+    CalendarGridHead,
+    CalendarGridRow,
+    CalendarHeadCell,
+    CalendarHeader,
+    CalendarHeading,
+    CalendarNextButton,
+    CalendarPrevButton,
+} from '.';
 
-const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes["class"], layout?: LayoutTypes, yearRange?: DateValue[] }>(), {
-  modelValue: undefined,
-  layout: undefined,
-})
-const emits = defineEmits<CalendarRootEmits>()
+// Props
+const props = withDefaults(defineProps<CalendarRootProps & {
+    class?: HTMLAttributes['class'];
+    layout?: LayoutTypes;
+    yearRange?: DateValue[];
+}>(), {
+    modelValue: undefined,
+    layout: undefined
+});
 
-const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder")
+// Emits
+const emits = defineEmits<CalendarRootEmits>();
 
-const placeholder = useVModel(props, "placeholder", emits, {
-  passive: true,
-  defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
-}) as Ref<DateValue>
+const delegatedProps = reactiveOmit(props, 'class', 'layout', 'placeholder');
 
-const formatter = useDateFormatter(props.locale ?? "en")
+const placeholder = useVModel(props, 'placeholder', emits, {
+    passive: true,
+    defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
+}) as Ref<DateValue>;
+
+const formatter = useDateFormatter(props.locale ?? 'en');
 
 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 }>()
-const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>()
+const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{
+    date: DateValue;
+}>();
+const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{
+    date: DateValue;
+}>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+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-light) bg-(--button-secondary-light) transition-all duration-300 ease-in-out hover:border-(--border-hover-light) focus-within:border-(--border-hover-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:hover:border-(--border-hover-dark) dark:focus-within:border-(--border-hover-dark)">
-        <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' }) }}
+    <DefineMonthTemplate v-slot="{ date }">
+        <div class="**:data-[slot=native-select-icon]:right-1">
+            <div class="relative h-10 rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-300 ease-in-out hover:border-(--border-hover-light) focus-within:border-(--border-hover-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:hover:border-(--border-hover-dark) dark:focus-within:border-(--border-hover-dark)">
+                <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 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>
-        <NativeSelect class="relative z-20 h-full min-h-0 w-[92px] 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>
 
-  <DefineYearTemplate v-slot="{ date }">
-    <div class="**:data-[slot=native-select-icon]:right-1">
-      <div class="relative h-10 rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-300 ease-in-out hover:border-(--border-hover-light) focus-within:border-(--border-hover-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:hover:border-(--border-hover-dark) dark:focus-within:border-(--border-hover-dark)">
-        <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' }) }}
+    <DefineYearTemplate v-slot="{ date }">
+        <div class="**:data-[slot=native-select-icon]:right-1">
+            <div class="relative h-10 rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-300 ease-in-out hover:border-(--border-hover-light) focus-within:border-(--border-hover-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:hover:border-(--border-hover-dark) dark:focus-within:border-(--border-hover-dark)">
+                <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 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>
-        <NativeSelect class="relative z-20 h-full min-h-0 w-[96px] 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>
 
-  <CalendarRoot v-slot="{ grid, weekDays, date }" v-bind="forwarded" v-model:placeholder="placeholder" 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" 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>
-</template>
+        <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

@@ -1,23 +1,24 @@
-<script lang="ts" setup>
-import type { CalendarCellProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarCell, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { CalendarCellProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarCell, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+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-md', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarCell>
-</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-md',
+        props.class,
+    )
+        " v-bind="forwardedProps">
+        <slot />
+    </CalendarCell>
+</template>