@matta-trade/ui 0.0.0-stage → 0.2.2

package/src/avatar/Avatar.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { AvatarVariants } from ".";
+import { avatarVariant } from ".";
+import AvatarFallback from "./AvatarFallback.vue";
+import AvatarImage from "./AvatarImage.vue";
+import { type HTMLAttributes, computed } from "vue";
+import { AvatarRoot } from "reka-ui";
+import { getAvatarInitialsColor } from "../avatar-colors";
+import { cn } from "../lib/utils";
+
+export interface AvatarProps {
+    class?: HTMLAttributes["class"];
+    size?: AvatarVariants["size"];
+    shape?: AvatarVariants["shape"];
+    src?: string;
+    alt?: string;
+    initials?: string;
+    status?: "online" | "offline" | "busy" | "away";
+}
+
+const props = withDefaults(defineProps<AvatarProps>(), {
+    size: "md",
+    shape: "circle",
+});
+
+const colorScheme = computed(() => {
+    return getAvatarInitialsColor(props.alt || props.initials || "User");
+});
+
+const statusSizeClass = computed(() => {
+    switch (props.size) {
+        case "xs":
+            return "size-1.5 ring-1";
+        case "sm":
+            return "size-2 ring-1.5";
+        case "lg":
+            return "size-3 ring-2";
+        case "xl":
+            return "size-3.5 ring-2";
+        case "2xl":
+            return "size-4 ring-2";
+        case "md":
+        case "base":
+        default:
+            return "size-2.5 ring-2";
+    }
+});
+
+const statusColorClass = computed(() => {
+    switch (props.status) {
+        case "online":
+            return "bg-utility-success-500";
+        case "busy":
+            return "bg-utility-red-500";
+        case "away":
+            return "bg-utility-warning-500";
+        case "offline":
+        default:
+            return "bg-utility-gray-400";
+    }
+});
+</script>
+
+<template>
+    <div class="relative inline-flex shrink-0">
+        <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+            <slot>
+                <AvatarImage v-if="src" :src="src" :alt="alt || initials" />
+                <AvatarFallback :class="cn(colorScheme.bg, colorScheme.text, 'font-semibold')">
+                    {{ initials || (alt ? alt.slice(0, 2).toUpperCase() : "U") }}
+                </AvatarFallback>
+            </slot>
+        </AvatarRoot>
+        <span v-if="status" :class="cn('bottom-0 right-0 dark:ring-gray-950 absolute rounded-full ring-2 ring-white', statusSizeClass, statusColorClass)" />
+    </div>
+</template>

package/src/avatar/AvatarFallback.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import type { AvatarFallbackProps } from "reka-ui";
+import { AvatarFallback } from "reka-ui";
+import { cn } from "../lib/utils";
+
+interface Props extends AvatarFallbackProps {
+    class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <AvatarFallback v-bind="props" :class="cn('font-semibold flex size-full items-center justify-center text-secondary select-none', props.class)">
+        <slot />
+    </AvatarFallback>
+</template>

package/src/avatar/AvatarImage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from "reka-ui";
+import { AvatarImage } from "reka-ui";
+
+const props = defineProps<AvatarImageProps>();
+</script>
+
+<template>
+    <AvatarImage v-bind="props" class="h-full w-full object-cover">
+        <slot />
+    </AvatarImage>
+</template>

package/src/avatar/index.ts

@@ -0,0 +1,30 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export { default as Avatar } from "./Avatar.vue";
+export { default as AvatarFallback } from "./AvatarFallback.vue";
+export { default as AvatarImage } from "./AvatarImage.vue";
+
+export const avatarVariant = cva("font-medium relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-secondary select-none", {
+    variants: {
+        size: {
+            xs: "size-6 text-[10px]",
+            sm: "size-8 text-xs",
+            md: "size-10 text-sm",
+            base: "size-10 text-sm",
+            lg: "size-12 text-base",
+            xl: "size-14 text-lg",
+            "2xl": "size-16 text-xl",
+        },
+        shape: {
+            circle: "rounded-full",
+            square: "rounded-xl",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        shape: "circle",
+    },
+});
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>;

package/src/avatar-colors.ts

@@ -0,0 +1,24 @@
+/**
+ * Accessible background/text pairs for identity avatars that fall back to initials.
+ * Reuses the same `utility-*` color tokens `Badge` uses (already carry correct dark-mode
+ * swaps), excluding gray/brand/error/warning/success since those carry semantic meaning
+ * elsewhere in the system.
+ */
+export const AVATAR_INITIALS_COLORS = [
+    { bg: "bg-utility-slate-50", text: "text-utility-slate-700" },
+    { bg: "bg-utility-sky-50", text: "text-utility-sky-700" },
+    { bg: "bg-utility-blue-50", text: "text-utility-blue-700" },
+    { bg: "bg-utility-indigo-50", text: "text-utility-indigo-700" },
+    { bg: "bg-utility-purple-50", text: "text-utility-purple-700" },
+    { bg: "bg-utility-pink-50", text: "text-utility-pink-700" },
+    { bg: "bg-utility-orange-50", text: "text-utility-orange-700" },
+] as const;
+
+/** Deterministic pick so the same identity always renders the same color, no flicker on re-render. */
+export const getAvatarInitialsColor = (seed: string) => {
+    let hash = 0;
+    for (let i = 0; i < seed.length; i++) {
+        hash = (hash + seed.charCodeAt(i)) % AVATAR_INITIALS_COLORS.length;
+    }
+    return AVATAR_INITIALS_COLORS[hash];
+};

package/src/badge/Badge.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { BadgeVariants } from ".";
+import { badgeVariants } from ".";
+import { type HTMLAttributes, computed } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    variant?: BadgeVariants["variant"];
+    class?: HTMLAttributes["class"];
+    dot?: boolean;
+}>();
+
+const dotColorClass = computed(() => {
+    switch (props.variant) {
+        case "brand":
+            return "bg-utility-brand-500";
+        case "success":
+            return "bg-utility-green-500";
+        case "warning":
+            return "bg-utility-orange-500";
+        case "error":
+        case "destructive":
+            return "bg-utility-red-500";
+        case "indigo":
+            return "bg-utility-indigo-500";
+        case "purple":
+            return "bg-utility-purple-500";
+        case "pink":
+            return "bg-utility-pink-500";
+        case "gray":
+        case "secondary":
+            return "bg-utility-gray-500";
+        default:
+            return "bg-primary";
+    }
+});
+</script>
+
+<template>
+    <div :class="cn(badgeVariants({ variant }), props.class)">
+        <span v-if="dot" :class="cn('size-1.5 shrink-0 rounded-full', dotColorClass)" />
+        <slot />
+    </div>
+</template>

package/src/badge/index.ts

@@ -0,0 +1,33 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export { default as Badge } from "./Badge.vue";
+
+export const badgeVariants = cva(
+    "gap-1.5 px-2.5 py-0.5 font-semibold focus:ring-ring inline-flex items-center rounded-full border text-xs transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none",
+    {
+        variants: {
+            variant: {
+                default: "text-primary-foreground border-transparent bg-primary hover:bg-primary/80",
+                secondary: "text-secondary-foreground border-transparent bg-secondary hover:bg-secondary/80",
+                destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+                outline: "text-foreground border-border-secondary",
+                brand: "dark:bg-utility-brand-950 border-border-brand/30 bg-utility-brand-50 text-utility-brand-700 dark:text-utility-brand-300",
+                success:
+                    "dark:bg-utility-green-950 dark:border-utility-green-800 border-utility-green-200 bg-utility-green-50 text-utility-green-700 dark:text-utility-green-300",
+                warning:
+                    "dark:bg-utility-orange-950 dark:border-utility-orange-800 border-utility-orange-200 bg-utility-orange-50 text-utility-orange-700 dark:text-utility-orange-300",
+                error: "dark:bg-utility-red-950 dark:border-utility-red-800 border-utility-red-200 bg-utility-red-50 text-utility-red-700 dark:text-utility-red-300",
+                indigo: "dark:bg-utility-indigo-950 dark:border-utility-indigo-800 border-utility-indigo-200 bg-utility-indigo-50 text-utility-indigo-700 dark:text-utility-indigo-300",
+                purple: "dark:bg-utility-purple-950 dark:border-utility-purple-800 border-utility-purple-200 bg-utility-purple-50 text-utility-purple-700 dark:text-utility-purple-300",
+                pink: "dark:bg-utility-pink-950 dark:border-utility-pink-800 border-utility-pink-200 bg-utility-pink-50 text-utility-pink-700 dark:text-utility-pink-300",
+                gray: "border-border-secondary bg-secondary text-secondary hover:bg-secondary/80",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/src/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <nav aria-label="breadcrumb" :class="props.class">
+        <slot />
+    </nav>
+</template>

package/src/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { MoreHorizontal } from "lucide-vue-next";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <span role="presentation" aria-hidden="true" :class="cn('h-9 w-9 flex items-center justify-center', props.class)">
+        <slot>
+            <MoreHorizontal class="h-4 w-4" />
+        </slot>
+        <span class="sr-only">More</span>
+    </span>
+</template>

package/src/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <li :class="cn('gap-1.5 inline-flex items-center', props.class)">
+        <slot />
+    </li>
+</template>

package/src/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+    as: "a",
+});
+</script>
+
+<template>
+    <Primitive :as="as" :as-child="asChild" :class="cn('hover:text-foreground transition-colors', props.class)">
+        <slot />
+    </Primitive>
+</template>

package/src/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <ol :class="cn('gap-1.5 text-muted-foreground sm:gap-2.5 flex flex-wrap items-center text-sm break-words', props.class)">
+        <slot />
+    </ol>
+</template>

package/src/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <span role="link" aria-disabled="true" aria-current="page" :class="cn('font-medium text-gray-900 dark:text-gray-100', props.class)">
+        <slot />
+    </span>
+</template>

package/src/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { ChevronRight } from "lucide-vue-next";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <li role="presentation" aria-hidden="true" :class="cn('[&>svg]:size-3.5 text-gray-400 dark:text-gray-500', props.class)">
+        <slot>
+            <ChevronRight />
+        </slot>
+    </li>
+</template>

package/src/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "./Breadcrumb.vue";
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue";
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue";
+export { default as BreadcrumbList } from "./BreadcrumbList.vue";
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue";
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue";

package/src/button/Button.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { type VariantProps, cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const buttonVariants = cva(
+    "font-semibold inline-flex cursor-pointer items-center justify-center rounded-lg text-sm whitespace-nowrap transition-colors select-none focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                primary: "bg-brand-solid text-white shadow-xs hover:bg-brand-solid_hover",
+                secondary: "border border-border-primary bg-primary text-secondary shadow-xs hover:bg-secondary hover:text-primary",
+                tertiary: "text-tertiary hover:bg-secondary hover:text-primary",
+                destructive: "bg-error-solid text-white shadow-xs hover:bg-error-solid_hover",
+                outline: "border border-border-primary text-secondary hover:bg-secondary hover:text-primary",
+                ghost: "text-secondary hover:bg-secondary hover:text-primary",
+                link: "p-0 h-auto text-brand-secondary underline-offset-4 hover:underline",
+            },
+            size: {
+                sm: "h-8 px-3 gap-1.5 text-xs",
+                md: "h-9 px-3.5 gap-2 text-sm",
+                lg: "h-10 px-4 gap-2 text-sm",
+                xl: "h-11 px-4.5 text-base gap-2.5",
+                "icon-sm": "size-8 p-0",
+                "icon-md": "size-9 p-0",
+                "icon-lg": "size-10 p-0",
+            },
+        },
+        defaultVariants: {
+            variant: "primary",
+            size: "md",
+        },
+    },
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+interface Props {
+    variant?: ButtonVariants["variant"];
+    size?: ButtonVariants["size"];
+    class?: HTMLAttributes["class"];
+    as?: string;
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "button",
+    type: "button",
+    disabled: false,
+});
+
+const emit = defineEmits<{
+    (e: "click", event: MouseEvent): void;
+}>();
+
+const classes = computed(() => cn(buttonVariants({ variant: props.variant, size: props.size }), props.class));
+</script>
+
+<template>
+    <component :is="props.as" :type="props.as === 'button' ? props.type : undefined" :disabled="props.disabled" :class="classes" @click="emit('click', $event)">
+        <slot />
+    </component>
+</template>

package/src/button/index.ts

@@ -0,0 +1,40 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export { default as Button } from "./Button.vue";
+
+export const buttonVariants = cva(
+    "gap-2 font-semibold [&_svg]:size-4 inline-flex cursor-pointer items-center justify-center rounded-lg text-sm whitespace-nowrap transition-all select-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    {
+        variants: {
+            variant: {
+                default: "border border-transparent bg-brand-600 text-white shadow-xs hover:bg-brand-700 active:scale-[0.98]",
+                primary: "border border-transparent bg-brand-600 text-white shadow-xs hover:bg-brand-700 active:scale-[0.98]",
+                secondary: "border border-border-secondary bg-primary text-secondary shadow-xs hover:bg-secondary active:scale-[0.98]",
+                outline: "border border-border-secondary bg-transparent text-secondary shadow-xs hover:bg-secondary hover:text-primary active:scale-[0.98]",
+                tertiary: "bg-transparent text-secondary hover:bg-secondary/60 hover:text-primary",
+                ghost: "bg-transparent text-secondary hover:bg-secondary/60 hover:text-primary",
+                destructive: "bg-red-600 hover:bg-red-700 border border-transparent text-white shadow-xs active:scale-[0.98]",
+                destructiveSecondary:
+                    "bg-red-50 text-red-700 border-red-200 hover:bg-red-100 dark:bg-red-950 dark:text-red-300 dark:border-red-900 border shadow-xs active:scale-[0.98]",
+                link: "p-0 h-auto text-brand-600 underline-offset-4 hover:text-brand-700 hover:underline",
+            },
+            size: {
+                default: "h-9 px-4 py-2",
+                sm: "h-8 px-3 rounded-md text-xs",
+                md: "h-9 px-4 rounded-lg text-sm",
+                lg: "h-10 px-5 rounded-lg text-sm",
+                xl: "h-11 px-6 text-base rounded-lg",
+                icon: "size-9",
+                "icon-sm": "size-8",
+                "icon-lg": "size-10",
+            },
+        },
+        defaultVariants: {
+            variant: "primary",
+            size: "default",
+        },
+    },
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/src/button-group/ButtonGroup.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ButtonGroupVariants } from ".";
+import { buttonGroupVariants } from ".";
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+    orientation?: ButtonGroupVariants["orientation"];
+}>();
+</script>
+
+<template>
+    <div
+        role="group"
+        data-slot="button-group"
+        :data-orientation="props.orientation"
+        :class="cn(buttonGroupVariants({ orientation: props.orientation }), props.class)"
+    >
+        <slot />
+    </div>
+</template>

package/src/button-group/ButtonGroupSeparator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { SeparatorProps } from "reka-ui";
+import { cn } from "../lib/utils";
+import { Separator } from "../separator";
+
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(), {
+    orientation: "vertical",
+});
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <Separator
+        data-slot="button-group-separator"
+        v-bind="delegatedProps"
+        :orientation="props.orientation"
+        :class="cn('bg-input !m-0 relative self-stretch data-[orientation=vertical]:h-auto', props.class)"
+    />
+</template>

package/src/button-group/ButtonGroupText.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ButtonGroupVariants } from ".";
+import type { HTMLAttributes } from "vue";
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
+import { cn } from "../lib/utils";
+
+interface Props extends PrimitiveProps {
+    class?: HTMLAttributes["class"];
+    orientation?: ButtonGroupVariants["orientation"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "div",
+});
+</script>
+
+<template>
+    <Primitive
+        role="group"
+        data-slot="button-group"
+        :data-orientation="props.orientation"
+        :as="as"
+        :as-child="asChild"
+        :class="
+            cn(
+                'bg-muted gap-2 px-4 font-medium [&_svg:not([class*=\'size-\'])]:size-4 flex items-center rounded-md border text-sm shadow-xs [&_svg]:pointer-events-none',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </Primitive>
+</template>

package/src/button-group/index.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export { default as ButtonGroup } from "./ButtonGroup.vue";
+export { default as ButtonGroupSeparator } from "./ButtonGroupSeparator.vue";
+export { default as ButtonGroupText } from "./ButtonGroupText.vue";
+
+export const buttonGroupVariants = cva(
+    "has-[>[data-slot=button-group]]:gap-2 flex w-fit items-stretch [&>*:focus-visible]:relative [&>*:focus-visible]:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+    {
+        variants: {
+            orientation: {
+                horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+                vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+            },
+        },
+        defaultVariants: {
+            orientation: "horizontal",
+        },
+    },
+);
+
+export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;

package/src/calendar/Calendar.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import {
+    CalendarCell,
+    CalendarCellTrigger,
+    CalendarGrid,
+    CalendarGridBody,
+    CalendarGridHead,
+    CalendarGridRow,
+    CalendarHeadCell,
+    CalendarHeader,
+    CalendarHeading,
+    CalendarNextButton,
+    CalendarPrevButton,
+} from ".";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { CalendarRootEmits, CalendarRootProps } from "reka-ui";
+import { CalendarRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes["class"] }>();
+
+const emits = defineEmits<CalendarRootEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <CalendarRoot v-slot="{ grid, weekDays }" :class="cn('p-3', props.class)" v-bind="forwarded">
+        <CalendarHeader>
+            <CalendarPrevButton />
+            <CalendarHeading />
+            <CalendarNextButton />
+        </CalendarHeader>
+
+        <div class="gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0 flex flex-col">
+            <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>