@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

package/dist/runtime/components/Banner.vue.d.ts

@@ -0,0 +1,68 @@
+import theme from '#build/ui/banner';
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, LinkProps, ComponentConfig } from '../types';
+type Banner = ComponentConfig<typeof theme, AppConfig, 'banner'>;
+export interface BannerProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * A unique id saved to local storage to remember if the banner has been dismissed.
+     * Change this value to show the banner again.
+     * @defaultValue '1'
+     */
+    id?: string;
+    /**
+     * The icon displayed next to the title.
+     * @IconifyIcon
+     */
+    icon?: string;
+    title?: string;
+    /**
+     * Display a list of actions next to the title.
+     * `{ color: 'neutral', size: 'xs' }`{lang="ts-type"}
+     */
+    actions?: ButtonProps[];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Banner['variants']['color'];
+    /**
+     * Display a close button to dismiss the banner.
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @emits `close`
+     * @defaultValue false
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: string;
+    class?: any;
+    ui?: Banner['slots'];
+}
+export interface BannerSlots {
+    leading(props?: {}): any;
+    title(props?: {}): any;
+    actions(props?: {}): any;
+    close(props: {
+        ui: any;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<BannerProps> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BannerSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/BlogPost.vue

@@ -0,0 +1,141 @@
+<script>
+import theme from "#build/ui/blog-post";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, useDateFormatter } from "reka-ui";
+import ImageComponent from "#build/ui-image-component";
+import { useLocale, useAppConfig } from "#imports";
+import { getSlotChildrenText } from "../utils";
+import { tv } from "../utils/tv";
+import UUser from "./User.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "article" },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  date: { type: [String, Date], required: false },
+  badge: { type: [String, Object], required: false },
+  authors: { type: Array, required: false },
+  image: { type: [String, Object], required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  variant: { type: null, required: false },
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  onClick: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const { locale } = useLocale();
+const appConfig = useAppConfig();
+const formatter = useDateFormatter(locale.value.code);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.blogPost || {} })({
+  orientation: props.orientation,
+  variant: props.variant,
+  image: !!props.image,
+  to: !!props.to || !!props.onClick
+}));
+const date = computed(() => {
+  if (!props.date) {
+    return;
+  }
+  try {
+    return formatter.custom(new Date(props.date), { dateStyle: "medium" });
+  } catch {
+    return props.date;
+  }
+});
+const datetime = computed(() => {
+  if (!props.date) {
+    return;
+  }
+  try {
+    return new Date(props.date)?.toISOString();
+  } catch {
+    return void 0;
+  }
+});
+const ariaLabel = computed(() => {
+  const slotText = slots.title && getSlotChildrenText(slots.title());
+  return (slotText || props.title || "Post link").trim();
+});
+</script>
+
+<template>
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <div v-if="image || !!slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header">
+        <component
+          :is="ImageComponent"
+          v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
+          :class="ui.image({ class: props.ui?.image, to: !!to })"
+        />
+      </slot>
+    </div>
+
+    <div :class="ui.body({ class: props.ui?.body })">
+      <ULink
+        v-if="to"
+        :aria-label="ariaLabel"
+        v-bind="{ to, target, ...$attrs }"
+        class="focus:outline-none peer"
+        tabindex="-1"
+        raw
+      >
+        <span class="absolute inset-0" aria-hidden="true" />
+      </ULink>
+
+      <slot name="body">
+        <div v-if="date || !!slots.date || (badge || !!slots.badge)" :class="ui.meta({ class: props.ui?.meta })">
+          <slot name="badge">
+            <UBadge v-if="badge" color="neutral" variant="subtle" v-bind="typeof badge === 'string' ? { label: badge } : badge" :class="ui.badge({ class: props.ui?.badge })" />
+          </slot>
+
+          <time v-if="date" :datetime="datetime" :class="ui.date({ class: props.ui?.date })">
+            <slot name="date">
+              {{ date }}
+            </slot>
+          </time>
+        </div>
+
+        <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </h2>
+
+        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </div>
+
+        <div v-if="authors?.length || !!slots.authors" :class="ui.authors({ class: props.ui?.authors })">
+          <slot name="authors">
+            <template v-if="authors?.length">
+              <UAvatarGroup v-if="authors.length > 1">
+                <ULink
+                  v-for="(author, index) in authors"
+                  :key="index"
+                  :to="author.to"
+                  :target="author.target"
+                  :class="ui.avatar({ class: props.ui?.avatar, to: !!author.to })"
+                  raw
+                >
+                  <UAvatar v-bind="author.avatar" />
+                </ULink>
+              </UAvatarGroup>
+              <UUser v-else v-bind="authors[0]" />
+            </template>
+          </slot>
+        </div>
+      </slot>
+    </div>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/BlogPost.vue.d.ts

@@ -0,0 +1,59 @@
+import theme from '#build/ui/blog-post';
+import type { AppConfig } from '@nuxt/schema';
+import type { BadgeProps, LinkProps, ComponentConfig, UserProps } from '../types';
+type BlogPost = ComponentConfig<typeof theme, AppConfig, 'blogPost'>;
+export interface BlogPostProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'article'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /** The date of the blog post. Can be a string or a Date object. */
+    date?: string | Date;
+    /**
+     * Display a badge on the blog post.
+     * Can be a string or an object.
+     * `{ color: 'neutral', variant: 'subtle' }`{lang="ts-type"}
+     */
+    badge?: string | BadgeProps;
+    /** The authors of the blog post. */
+    authors?: UserProps[];
+    /** The image of the blog post. Can be a string or an object. */
+    image?: string | Partial<HTMLImageElement>;
+    /**
+     * The orientation of the blog post.
+     * @defaultValue 'vertical'
+     */
+    orientation?: BlogPost['variants']['orientation'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: BlogPost['variants']['variant'];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    ui?: BlogPost['slots'];
+}
+export interface BlogPostSlots {
+    date(props?: {}): any;
+    badge(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    authors(props?: {}): any;
+    header(props?: {}): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BlogPostProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostProps> & Readonly<{}>, {
+    as: any;
+    orientation: BlogPost["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/BlogPosts.vue

@@ -0,0 +1,33 @@
+<script>
+import theme from "#build/ui/blog-posts";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import UBlogPost from "./BlogPost.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  posts: { type: Array, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  class: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.blogPosts || {} }));
+</script>
+
+<template>
+  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: props.class })">
+    <slot>
+      <UBlogPost
+        v-for="(post, index) in posts"
+        :key="index"
+        :orientation="orientation === 'vertical' ? 'horizontal' : 'vertical'"
+        v-bind="post"
+      />
+    </slot>
+  </Primitive>
+</template>

package/dist/runtime/components/BlogPosts.vue.d.ts

@@ -0,0 +1,30 @@
+import theme from '#build/ui/blog-posts';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig, BlogPostProps } from '../types';
+type BlogPosts = ComponentConfig<typeof theme, AppConfig, 'blogPosts'>;
+export interface BlogPostsProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    posts?: BlogPostProps[];
+    /**
+     * The orientation of the blog posts.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: BlogPosts['variants']['orientation'];
+    class?: any;
+}
+export interface BlogPostsSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BlogPostsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostsProps> & Readonly<{}>, {
+    orientation: BlogPosts["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostsSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Breadcrumb.vue

@@ -30,36 +30,36 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb ||
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <ol :class="ui.list({ class: props.ui?.list })">
-      <template v-for="(item, index) in items" :key="index">
-        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
-          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-            <ULinkBase v-bind="slotProps" as="span" :aria-current="active && index === items.length - 1 ? 'page' : void 0" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: index === items.length - 1, disabled: !!item.disabled, to: !!item.to })">
-              <slot :name="item.slot || 'item'" :item="item" :index="index">
-                <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="index === items.length - 1" :index="index">
-                  <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: index === items.length - 1 })" />
-                  <UAvatar v-else-if="item.avatar" :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: index === items.length - 1 })" />
-                </slot>
-
-                <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
-                  <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="index === items.length - 1" :index="index">
-                    {{ get(item, props.labelKey) }}
-                  </slot>
-                </span>
-
-                <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="index === items.length - 1" :index="index" />
-              </slot>
-            </ULinkBase>
-          </ULink>
-        </li>
-
-        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })">
-          <slot name="separator">
-            <UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" />
-          </slot>
-        </li>
-      </template>
-    </ol>
-  </Primitive>
+  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ol :class="ui.list({ class: props.ui?.list })">
+      <template v-for="(item, index) in items" :key="index">
+        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
+          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+            <ULinkBase v-bind="slotProps" as="span" :aria-current="active && index === items.length - 1 ? 'page' : void 0" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: index === items.length - 1, disabled: !!item.disabled, to: !!item.to })">
+              <slot :name="item.slot || 'item'" :item="item" :index="index">
+                <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="index === items.length - 1" :index="index">
+                  <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: index === items.length - 1 })" />
+                  <UAvatar v-else-if="item.avatar" :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: index === items.length - 1 })" />
+                </slot>
+
+                <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
+                  <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="index === items.length - 1" :index="index">
+                    {{ get(item, props.labelKey) }}
+                  </slot>
+                </span>
+
+                <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="index === items.length - 1" :index="index" />
+              </slot>
+            </ULinkBase>
+          </ULink>
+        </li>
+
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })">
+          <slot name="separator">
+            <UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" />
+          </slot>
+        </li>
+      </template>
+    </ol>
+  </Primitive>
 </template>

package/dist/runtime/components/Button.vue

@@ -111,37 +111,37 @@ const ui = computed(() => tv({
 </script>
 
 <template>
-  <ULink
-    v-slot="{ active, ...slotProps }"
-    :type="type"
-    :disabled="disabled || isLoading"
-    v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
-    custom
-  >
-    <ULinkBase
-      v-bind="slotProps"
+  <ULink
+    v-slot="{ active, ...slotProps }"
+    :type="type"
+    :disabled="disabled || isLoading"
+    v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
+    custom
+  >
+    <ULinkBase
+      v-bind="slotProps"
       :class="ui.base({
   class: [props.ui?.base, props.class],
   active,
   ...active && activeVariant ? { variant: activeVariant } : {},
   ...active && activeColor ? { color: activeColor } : {}
-})"
-      @click="onClickWrapper"
-    >
-      <slot name="leading">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })" />
-        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
-      </slot>
-
-      <slot>
-        <span v-if="label !== void 0 && label !== null" :class="ui.label({ class: props.ui?.label, active })">
-          {{ label }}
-        </span>
-      </slot>
-
-      <slot name="trailing">
-        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })" />
-      </slot>
-    </ULinkBase>
-  </ULink>
+})"
+      @click="onClickWrapper"
+    >
+      <slot name="leading">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })" />
+        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
+      </slot>
+
+      <slot>
+        <span v-if="label !== void 0 && label !== null" :class="ui.label({ class: props.ui?.label, active })">
+          {{ label }}
+        </span>
+      </slot>
+
+      <slot name="trailing">
+        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })" />
+      </slot>
+    </ULinkBase>
+  </ULink>
 </template>

package/dist/runtime/components/ButtonGroup.vue

@@ -25,7 +25,7 @@ provide(buttonGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ orientation, class: props.class })">
-    <slot />
-  </Primitive>
+  <Primitive :as="as" :class="ui({ orientation, class: props.class })">
+    <slot />
+  </Primitive>
 </template>

package/dist/runtime/components/Calendar.vue

@@ -77,78 +77,78 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
 </script>
 
 <template>
-  <Calendar.Root
-    v-slot="{ weekDays, grid }"
-    v-bind="rootProps"
-    :model-value="modelValue"
-    :default-value="defaultValue"
-    :locale="locale"
-    :dir="dir"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-  >
-    <Calendar.Header :class="ui.header({ class: props.ui?.header })">
-      <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
-        <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
-      </Calendar.Prev>
-      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
-        <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
-      </Calendar.Prev>
-      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
-        <slot name="heading" :value="headingValue">
-          {{ headingValue }}
-        </slot>
-      </Calendar.Heading>
-      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
-        <UButton :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextMonth" />
-      </Calendar.Next>
-      <Calendar.Next v-if="props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
-        <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
-      </Calendar.Next>
-    </Calendar.Header>
-    <div :class="ui.body({ class: props.ui?.body })">
-      <Calendar.Grid
-        v-for="month in grid"
-        :key="month.value.toString()"
-        :class="ui.grid({ class: props.ui?.grid })"
-      >
-        <Calendar.GridHead>
-          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
-            <Calendar.HeadCell
-              v-for="day in weekDays"
-              :key="day"
-              :class="ui.headCell({ class: props.ui?.headCell })"
-            >
-              <slot name="week-day" :day="day">
-                {{ day }}
-              </slot>
-            </Calendar.HeadCell>
-          </Calendar.GridRow>
-        </Calendar.GridHead>
-        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
-          <Calendar.GridRow
-            v-for="(weekDates, index) in month.rows"
-            :key="`weekDate-${index}`"
-            :class="ui.gridRow({ class: props.ui?.gridRow })"
-          >
-            <Calendar.Cell
-              v-for="weekDate in weekDates"
-              :key="weekDate.toString()"
-              :date="weekDate"
-              :class="ui.cell({ class: props.ui?.cell })"
-            >
-              <Calendar.CellTrigger
-                :day="weekDate"
-                :month="month.value"
-                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
-              >
-                <slot name="day" :day="weekDate">
-                  {{ weekDate.day }}
-                </slot>
-              </Calendar.CellTrigger>
-            </Calendar.Cell>
-          </Calendar.GridRow>
-        </Calendar.GridBody>
-      </Calendar.Grid>
-    </div>
-  </Calendar.Root>
+  <Calendar.Root
+    v-slot="{ weekDays, grid }"
+    v-bind="rootProps"
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :locale="locale"
+    :dir="dir"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+  >
+    <Calendar.Header :class="ui.header({ class: props.ui?.header })">
+      <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+        <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
+      </Calendar.Prev>
+      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
+        <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
+      </Calendar.Prev>
+      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
+        <slot name="heading" :value="headingValue">
+          {{ headingValue }}
+        </slot>
+      </Calendar.Heading>
+      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
+        <UButton :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextMonth" />
+      </Calendar.Next>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+        <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
+      </Calendar.Next>
+    </Calendar.Header>
+    <div :class="ui.body({ class: props.ui?.body })">
+      <Calendar.Grid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :class="ui.grid({ class: props.ui?.grid })"
+      >
+        <Calendar.GridHead>
+          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <Calendar.HeadCell
+              v-for="day in weekDays"
+              :key="day"
+              :class="ui.headCell({ class: props.ui?.headCell })"
+            >
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </Calendar.HeadCell>
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
+          <Calendar.GridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            :class="ui.gridRow({ class: props.ui?.gridRow })"
+          >
+            <Calendar.Cell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              :class="ui.cell({ class: props.ui?.cell })"
+            >
+              <Calendar.CellTrigger
+                :day="weekDate"
+                :month="month.value"
+                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
+              >
+                <slot name="day" :day="weekDate">
+                  {{ weekDate.day }}
+                </slot>
+              </Calendar.CellTrigger>
+            </Calendar.Cell>
+          </Calendar.GridRow>
+        </Calendar.GridBody>
+      </Calendar.Grid>
+    </div>
+  </Calendar.Root>
 </template>