@vestow/vue 0.1.0

package/src/components/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+// as-child để dùng chung với RouterLink mà không lồng thẻ <a> trong <a>.
+const props = withDefaults(defineProps<PrimitiveProps & ClassProps>(), { as: 'a' })
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="cn('rounded transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <span role="link" aria-disabled="true" aria-current="page" :class="cn('font-medium text-foreground', props.class)">
+    <slot />
+  </span>
+</template>

package/src/components/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { ChevronRight } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <li role="presentation" aria-hidden="true" :class="cn('[&>svg]:size-3.5', props.class)">
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>

package/src/components/breadcrumb/index.ts

@@ -0,0 +1,5 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'

package/src/components/button/Button.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { ButtonVariants } from './index'
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { LoaderCircle } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { buttonVariants } from './index'
+
+const props = withDefaults(
+  defineProps<PrimitiveProps & ClassProps & {
+    variant?: ButtonVariants['variant']
+    size?: ButtonVariants['size']
+    /** Kiểu tô: `solid` đặc, `soft` nền pha loãng, `glass` kính. */
+    tone?: ButtonVariants['tone']
+    /**
+     * KIỂU TÔ — `solid` · `soft` · `surface` · `outline` · `ghost`.
+     *
+     * Trục tách khỏi `variant` theo mô hình Radix Themes. `surface` là nền pha
+     * loãng KÈM viền, ô mà `variant="outline" tone="soft"` từng không có nghĩa.
+     * Xem `CLAUDE.md`, mục "Trục `fill`".
+     */
+    fill?: ButtonVariants['fill']
+    /** Hiện spinner và chặn tương tác. Không tự set disabled để giữ được focus. */
+    loading?: boolean
+    disabled?: boolean
+  }>(),
+  { as: 'button', loading: false, disabled: false },
+)
+
+// Khi `as` là <button> thì phải có type, nếu không trình duyệt mặc định "submit"
+// và bấm nút trong form sẽ submit ngoài ý muốn.
+//
+// `asChild` phải loại trừ: lúc đó element thật do slot quyết định, mà `as` vẫn
+// còn giá trị mặc định `'button'` — nên `<Button as-child><a/></Button>` từng ra
+// `<a type="button">`, một thuộc tính vô nghĩa trên thẻ neo.
+const nativeType = computed(() => (props.as === 'button' && !props.asChild ? 'button' : undefined))
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :type="nativeType"
+    :disabled="disabled || undefined"
+    :aria-disabled="loading || disabled || undefined"
+    :aria-busy="loading || undefined"
+    :data-loading="loading || undefined"
+    :class="cn(buttonVariants({ variant, size, tone, fill }), props.class)"
+  >
+    <LoaderCircle v-if="loading" class="animate-spin" aria-hidden="true" />
+    <slot />
+  </Primitive>
+</template>

package/src/components/button/index.ts

@@ -0,0 +1,3 @@
+export { buttonVariants, type ButtonVariants } from '../../variants/components/button'
+
+export { default as Button } from './Button.vue'

package/src/components/button-group/ButtonGroup.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { ButtonGroupVariants } from './index'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+import { buttonGroupVariants } from './index'
+
+const props = withDefaults(
+  defineProps<PrimitiveProps & ClassProps & {
+    /** `horizontal` xếp ngang, `vertical` xếp dọc và gộp viền theo chiều dọc. */
+    orientation?: ButtonGroupVariants['orientation']
+  }>(),
+  { as: 'div', orientation: 'horizontal' },
+)
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    role="group"
+    data-slot="button-group"
+    :data-orientation="props.orientation"
+    :class="cn(buttonGroupVariants({ orientation: props.orientation }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/button-group/ButtonGroupSeparator.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { Separator } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    /**
+     * Hướng của chính đường kẻ, không phải hướng của nhóm: nhóm nằm ngang thì
+     * cần đường kẻ **dọc** — nên mặc định là `vertical`.
+     */
+    orientation?: 'horizontal' | 'vertical'
+  }>(),
+  { orientation: 'vertical' },
+)
+</script>
+
+<template>
+  <Separator
+    :orientation="props.orientation"
+    decorative
+    data-slot="button-group-separator"
+    :class="cn(
+      // `relative` để đường kẻ nằm trên viền của hai nút hai bên, không bị đè.
+      'relative shrink-0 self-stretch bg-input',
+      props.orientation === 'vertical' ? 'my-px h-auto w-px' : 'mx-px h-px w-auto',
+      props.class,
+    )"
+  />
+</template>

package/src/components/button-group/ButtonGroupText.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<PrimitiveProps & ClassProps>(),
+  { as: 'div' },
+)
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    data-slot="button-group-text"
+    :class="cn(
+      // Cùng chiều cao và bán kính với Button cỡ mặc định để ghép vào nhóm là
+      // vừa khít; không có hover vì đây là nhãn, không phải nút.
+      'inline-flex h-8 items-center gap-1.5 rounded-lg border border-input bg-muted px-2.5',
+      'text-sm font-medium text-muted-foreground',
+      '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/button-group/SplitButton.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { ButtonVariants } from '../button'
+import type { SplitButtonItem } from './index'
+import { computed, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { ChevronDown } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { Button } from '../button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../dropdown-menu'
+import ButtonGroup from './ButtonGroup.vue'
+import SplitButtonItems from './SplitButtonItems.vue'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    /** Nhãn của nút hành động chính. Slot mặc định ghi đè được. */
+    label?: string
+    /** Các mục trong menu xổ xuống. */
+    model?: SplitButtonItem[]
+    variant?: ButtonVariants['variant']
+    size?: Extract<ButtonVariants['size'], 'xs' | 'sm' | 'default' | 'lg'>
+    tone?: ButtonVariants['tone']
+    disabled?: boolean
+    /** Chỉ áp cho nút hành động chính; nút xổ menu vẫn bấm được. */
+    loading?: boolean
+    /** Tên cho nút xổ menu — nó chỉ có icon nên bắt buộc phải có. */
+    menuLabel?: string
+  }>(),
+  {
+    model: () => [],
+    size: 'default',
+    disabled: false,
+    loading: false,
+  },
+)
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+const { t } = useI18n()
+
+// Xem ghi chú ở SpeedDial về lý do không đặt trong `withDefaults`.
+const menuLabel = computed(() => props.menuLabel ?? t('ui.splitButton.more'))
+
+const open = ref(false)
+
+/** Nút xổ menu là ô vuông cùng chiều cao với nút chính. */
+const TRIGGER_SIZE = {
+  xs: 'icon-xs',
+  sm: 'icon-sm',
+  default: 'icon',
+  lg: 'icon-lg',
+} as const
+
+const triggerSize = computed(() => TRIGGER_SIZE[props.size])
+</script>
+
+<template>
+  <ButtonGroup
+    :class="cn(
+      // Trả lại viền trái cho nút xổ menu — ButtonGroup vốn bỏ nó đi để gộp
+      // viền chung. Màu lấy từ `currentColor` của chính nút nên tự hợp với mọi
+      // variant: nền đặc thì kẻ sáng, nền nhạt thì kẻ tối. `bg-input` của
+      // ButtonGroupSeparator không làm được vậy vì nó thừa kế màu chữ của NHÓM.
+      '[&>*:not(:first-child)]:border-l [&>*:not(:first-child)]:border-l-current/20',
+      props.class,
+    )"
+  >
+    <Button
+      :variant="variant"
+      :size="size"
+      :tone="tone"
+      :disabled="disabled"
+      :loading="loading"
+      @click="emit('click', $event)"
+    >
+      <slot name="icon" />
+      <slot>{{ label }}</slot>
+    </Button>
+
+    <DropdownMenu v-model:open="open">
+      <DropdownMenuTrigger as-child>
+        <Button
+          :variant="variant"
+          :size="triggerSize"
+          :tone="tone"
+          :disabled="disabled"
+          :aria-label="menuLabel"
+        >
+          <slot name="dropdownicon">
+            <ChevronDown
+              class="transition-transform duration-(--duration-base) motion-reduce:transition-none"
+              :class="open && '-rotate-180'"
+            />
+          </slot>
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end">
+        <SplitButtonItems :items="model" />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </ButtonGroup>
+</template>

package/src/components/button-group/SplitButtonItems.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { SplitButtonItem } from './index'
+import {
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '../dropdown-menu'
+
+defineProps<{ items: SplitButtonItem[] }>()
+
+function run(item: SplitButtonItem): void {
+  item.command?.(item)
+}
+</script>
+
+<template>
+  <!-- Component tự gọi chính nó để dựng submenu lồng nhau, không giới hạn cấp. -->
+  <template v-for="(item, index) in items" :key="index">
+    <DropdownMenuSeparator v-if="item.separator" />
+
+    <DropdownMenuSub v-else-if="item.items?.length">
+      <DropdownMenuSubTrigger :disabled="item.disabled">
+        <component :is="item.icon" v-if="item.icon" />
+        {{ item.label }}
+      </DropdownMenuSubTrigger>
+      <DropdownMenuSubContent>
+        <SplitButtonItems :items="item.items" />
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+
+    <DropdownMenuItem
+      v-else
+      :as="item.url ? 'a' : undefined"
+      :href="item.url"
+      :target="item.target"
+      :disabled="item.disabled"
+      :variant="item.variant"
+      @select="run(item)"
+    >
+      <component :is="item.icon" v-if="item.icon" />
+      {{ item.label }}
+      <DropdownMenuShortcut v-if="item.shortcut">
+        {{ item.shortcut }}
+      </DropdownMenuShortcut>
+    </DropdownMenuItem>
+  </template>
+</template>

package/src/components/button-group/index.ts

@@ -0,0 +1,34 @@
+import type { MenuActionItem } from '../../lib/menu'
+
+export { buttonGroupVariants, type ButtonGroupVariants } from '../../variants/components/button-group'
+export { default as ButtonGroup } from './ButtonGroup.vue'
+export { default as ButtonGroupSeparator } from './ButtonGroupSeparator.vue'
+
+export { default as ButtonGroupText } from './ButtonGroupText.vue'
+// SplitButton KHÔNG phải một component riêng: nó chính là một ButtonGroup gồm
+// hai nút — nút hành động và nút xổ menu — nên nằm cùng thư mục. Tách ra sẽ
+// thành hai component nói cùng một chuyện. shadcn cũng không có SplitButton, ở
+// đó nó chỉ là một ví dụ của ButtonGroup; PrimeVue phải làm component riêng vì
+// không có ButtonGroup để dựng lên.
+export { default as SplitButton } from './SplitButton.vue'
+
+/**
+ * Một mục trong menu của `SplitButton`.
+ *
+ * Sáu trường chung (label, icon, command, url, target, disabled) nằm ở
+ * `MenuActionItem` — dùng chung với `SpeedDialItem` để hai component không trôi
+ * khỏi nhau. Phần thêm dưới đây là ba dạng loại trừ nhau, xét theo thứ tự:
+ * `separator` là đường kẻ, có `items` là submenu, còn lại là mục thường.
+ */
+export interface SplitButtonItem extends MenuActionItem {
+  /** Đường kẻ ngăn nhóm; mọi trường khác bị bỏ qua. */
+  separator?: boolean
+  /** Có `items` thì mục thành submenu, `command` và `url` không còn tác dụng. */
+  items?: SplitButtonItem[]
+  /** Hành động nguy hiểm (xoá, thu hồi quyền) — hiện màu destructive. */
+  variant?: 'default' | 'destructive'
+  /** Phím tắt hiện mờ ở mép phải. */
+  shortcut?: string
+}
+
+export { default as SplitButtonItems } from './SplitButtonItems.vue'

package/src/components/calendar/Calendar.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date'
+import type { CalendarRootEmits, CalendarRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNext,
+  CalendarPrev,
+  CalendarRoot,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed } from 'vue'
+import { ChevronLeft, ChevronRight } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<CalendarRootProps & ClassProps>(),
+  { locale: 'vi-VN', weekStartsOn: 1, fixedWeeks: true },
+)
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+/**
+ * Tên cho từng lưới tháng.
+ *
+ * reka render lưới là `<table role="application">`. Role đó **xoá sạch** ngữ
+ * nghĩa bảng và bắt trình đọc màn hình chuyển sang chế độ ứng dụng — nhờ vậy
+ * phím mũi tên đi thẳng vào lịch thay vì bị chế độ đọc nuốt mất. Cái giá: một
+ * vùng `application` không tên chỉ được đọc là "application". reka không tự
+ * đặt tên, nên phải tự khai `aria-label`.
+ */
+function monthLabel(month: DateValue): string {
+  return new DateFormatter(props.locale, { month: 'long', year: 'numeric' })
+    .format(month.toDate(getLocalTimeZone()))
+}
+
+const navButton = cn(
+  'inline-flex size-7 items-center justify-center rounded-md border border-input bg-background',
+  'text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+  'disabled:pointer-events-none disabled:opacity-40',
+)
+
+const cellTrigger = cn(
+  'relative inline-flex size-8 items-center justify-center rounded-md text-sm font-normal transition-colors',
+  'hover:bg-accent hover:text-accent-foreground',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+  'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary',
+  'data-[today]:font-semibold data-[today]:text-primary data-[selected]:data-[today]:text-primary-foreground',
+  'data-[outside-view]:text-muted-foreground/50',
+  'data-[unavailable]:text-muted-foreground/50 data-[unavailable]:line-through',
+  'data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
+)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    v-bind="forwarded"
+    :class="cn('rounded-md p-3', props.class)"
+  >
+    <CalendarHeader class="flex items-center justify-between pb-3">
+      <CalendarPrev :class="navButton">
+        <ChevronLeft class="size-4" />
+      </CalendarPrev>
+      <CalendarHeading class="text-sm font-medium capitalize" />
+      <CalendarNext :class="navButton">
+        <ChevronRight class="size-4" />
+      </CalendarNext>
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-4 sm:flex-row">
+      <CalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :aria-label="monthLabel(month.value)"
+        class="w-full border-collapse"
+      >
+        <CalendarGridHead>
+          <CalendarGridRow class="flex w-full justify-between">
+            <CalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              class="w-8 text-[0.7rem] font-normal capitalize text-muted-foreground"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+
+        <CalendarGridBody class="grid">
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`week-${index}`"
+            class="mt-1 flex w-full justify-between"
+          >
+            <CalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate" class="p-0">
+              <CalendarCellTrigger :day="weekDate" :month="month.value" :class="cellTrigger" />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>

package/src/components/calendar/RangeCalendar.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date'
+import type { RangeCalendarRootEmits, RangeCalendarRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import {
+  RangeCalendarCell,
+  RangeCalendarCellTrigger,
+  RangeCalendarGrid,
+  RangeCalendarGridBody,
+  RangeCalendarGridHead,
+  RangeCalendarGridRow,
+  RangeCalendarHeadCell,
+  RangeCalendarHeader,
+  RangeCalendarHeading,
+  RangeCalendarNext,
+  RangeCalendarPrev,
+  RangeCalendarRoot,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed } from 'vue'
+import { ChevronLeft, ChevronRight } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<RangeCalendarRootProps & ClassProps>(),
+  { locale: 'vi-VN', weekStartsOn: 1, fixedWeeks: true, numberOfMonths: 2 },
+)
+const emits = defineEmits<RangeCalendarRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+/**
+ * Tên cho từng lưới tháng. Xem chú thích cùng tên trong `Calendar.vue` —
+ * `role="application"` của reka không có tên, phải tự khai `aria-label`.
+ * Ở đây quan trọng hơn: lưới phạm vi mặc định hiện **hai** tháng, không có tên
+ * thì trình đọc màn hình gặp hai vùng giống hệt nhau.
+ */
+function monthLabel(month: DateValue): string {
+  return new DateFormatter(props.locale, { month: 'long', year: 'numeric' })
+    .format(month.toDate(getLocalTimeZone()))
+}
+
+const navButton = cn(
+  'inline-flex size-7 items-center justify-center rounded-md border border-input bg-background',
+  'text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+  'disabled:pointer-events-none disabled:opacity-40',
+)
+
+/**
+ * Giống `Calendar` cộng ba trạng thái chỉ khoảng ngày mới có.
+ *
+ * Ô ở GIỮA khoảng bo vuông và tô nền nhạt, chỉ hai đầu mới bo tròn và tô đặc —
+ * nếu ô nào cũng bo tròn thì dải chọn đứt quãng, không đọc ra là một khoảng
+ * liền. `data-selection-start` / `data-selection-end` là của reka.
+ */
+const cellTrigger = cn(
+  'relative inline-flex size-8 items-center justify-center rounded-md text-sm font-normal transition-colors',
+  'hover:bg-accent hover:text-accent-foreground',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+  'data-[selected]:bg-accent data-[selected]:rounded-none',
+  'data-[selection-start]:rounded-l-md data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground',
+  'data-[selection-end]:rounded-r-md data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground',
+  'data-[today]:font-semibold data-[today]:text-primary',
+  'data-[selection-start]:data-[today]:text-primary-foreground data-[selection-end]:data-[today]:text-primary-foreground',
+  'data-[outside-view]:text-muted-foreground/50',
+  'data-[unavailable]:text-muted-foreground/50 data-[unavailable]:line-through',
+  'data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
+)
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ grid, weekDays }"
+    v-bind="forwarded"
+    :class="cn('rounded-md p-3', props.class)"
+  >
+    <RangeCalendarHeader class="flex items-center justify-between pb-3">
+      <RangeCalendarPrev :class="navButton">
+        <ChevronLeft class="size-4" />
+      </RangeCalendarPrev>
+      <RangeCalendarHeading class="text-sm font-medium capitalize" />
+      <RangeCalendarNext :class="navButton">
+        <ChevronRight class="size-4" />
+      </RangeCalendarNext>
+    </RangeCalendarHeader>
+
+    <div class="flex flex-col gap-4 sm:flex-row">
+      <RangeCalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :aria-label="monthLabel(month.value)"
+        class="w-full border-collapse"
+      >
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow class="flex w-full justify-between">
+            <RangeCalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              class="w-8 text-[0.7rem] font-normal capitalize text-muted-foreground"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+
+        <RangeCalendarGridBody class="grid">
+          <RangeCalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`week-${index}`"
+            class="mt-1 flex w-full justify-between"
+          >
+            <RangeCalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate" class="p-0">
+              <RangeCalendarCellTrigger :day="weekDate" :month="month.value" :class="cellTrigger" />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>

package/src/components/calendar/index.ts

@@ -0,0 +1,2 @@
+export { default as Calendar } from './Calendar.vue'
+export { default as RangeCalendar } from './RangeCalendar.vue'

package/src/components/card/Card.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div :class="cn('surface rounded-lg border border-border bg-card text-card-foreground shadow-sm', props.class)">
+    <slot />
+  </div>
+</template>