@byyuurin/ui 0.0.8 → 0.0.10

package/dist/runtime/app/injections.js

@@ -9,16 +9,46 @@ export const {
   inject: injectButtonGroup,
   provide: provideButtonGroup
 } = defineInjection("ui.button-group");
+export const {
+  InjectionKey: InjectionKeyFormOptions,
+  inject: injectFormOptions,
+  provide: provideFormOptions
+} = defineInjection("ui.form-options");
+export const {
+  InjectionKey: InjectionKeyFormBus,
+  inject: injectFormBus,
+  provide: provideFormBus
+} = defineInjection("ui.form-bus");
+export const {
+  InjectionKey: InjectionKeyFormItem,
+  inject: injectFormItem,
+  provide: provideFormItem
+} = defineInjection("ui.form-item");
+export const {
+  InjectionKey: InjectionKeyFormInputId,
+  inject: injectFormInputId,
+  provide: provideFormInputId
+} = defineInjection("ui.form-input-id");
+export const {
+  InjectionKey: InjectionKeyFormInputs,
+  inject: injectFormInputs,
+  provide: provideFormInputs
+} = defineInjection("ui.form-inputs");
+export const {
+  InjectionKey: InjectionKeyFormLoading,
+  inject: injectFormLoading,
+  provide: provideFormLoading
+} = defineInjection("ui.form-loading");
+export const {
+  InjectionKey: InjectionKeyFormErrors,
+  inject: injectFormErrors,
+  provide: provideFormErrors
+} = defineInjection("ui.form-errors", null);
 export const {
   InjectionKey: InjectionKeyLocaleContext,
   inject: injectLocaleContext,
   provide: provideLocaleContext
 } = defineInjection("ui.locale-context");
-export const {
-  InjectionKey: InjectionKeyModalState,
-  inject: injectModalState,
-  provide: provideModalState
-} = defineInjection("ui.modal");
 export const {
   InjectionKey: InjectionKeyThemeExtension,
   provide: provideThemeExtension,

package/dist/runtime/components/Accordion.vue

@@ -5,16 +5,6 @@ import type { ComponentAttrs, DynamicSlots } from '../types'
 
 export interface AccordionEmits extends AccordionRootEmits {}
 
-type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
-
-export type AccordionSlots<T extends { slot?: string }> = {
-  default?: SlotProps<T>
-  leading?: SlotProps<T>
-  trailing?: SlotProps<T>
-  content?: SlotProps<T>
-  body?: SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
-
 export interface AccordionItem {
   label?: string
   icon?: string
@@ -24,9 +14,20 @@ export interface AccordionItem {
   /** A unique value for the accordion item. Defaults to the index. */
   value?: string
   disabled?: boolean
+  [key: string]: any
 }
 
-export interface AccordionProps<T> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'as' | 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
+type SlotProps<T extends AccordionItem> = (props: { item: T, index: number, open: boolean }) => any
+
+export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
+  default?: SlotProps<T>
+  leading?: SlotProps<T>
+  trailing?: SlotProps<T>
+  content?: SlotProps<T>
+  body?: SlotProps<T>
+} & DynamicSlots<T, 'body', SlotProps<T>>
+
+export interface AccordionProps<T extends AccordionItem = AccordionItem> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'as' | 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
   items?: T[]
   /**
    * The icon displayed on the right side of the trigger.
@@ -55,11 +56,8 @@ const emit = defineEmits<AccordionEmits>()
 const slots = defineSlots<AccordionSlots<T>>()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'), emit)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.accordion)
-  return styler(props)
-})
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('accordion', props))
 </script>
 
 <template>
@@ -89,12 +87,12 @@ const style = computed(() => {
       </AccordionHeader>
 
       <AccordionContent
-        v-if="item.content || slots.content || (item.slot && slots[item.slot]) || slots.body || (slots[`${item.slot}-body`])"
+        v-if="item.content || slots.content || (item.slot && slots[item.slot as keyof AccordionSlots<T>]) || slots.body || (item.slot && slots[`${item.slot}-body` as keyof AccordionSlots<T>])"
         :class="style.content({ class: props.ui?.content })"
       >
-        <slot :name="item.slot || 'content'" v-bind="{ item, index, open }">
+        <slot :name="((item.slot || 'content') as keyof AccordionSlots<T>)" v-bind="{ item, index, open }">
           <div :class="style.body({ class: props.ui?.body })">
-            <slot :name="item.slot ? item.slot : 'body'" v-bind="{ item, index, open }">
+            <slot :name="((item.slot ? `${item.slot}-body` : 'body') as keyof AccordionSlots<T>)" v-bind="{ item, index, open }">
               {{ item.content }}
             </slot>
           </div>

package/dist/runtime/components/Alert.vue

@@ -5,7 +5,7 @@ import type { alert } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
 export interface AlertEmits {
-  (event: 'update:open', value: boolean): void
+  'update:open': [value: boolean]
 }
 
 export interface AlertSlots {
@@ -64,14 +64,11 @@ const emit = defineEmits<AlertEmits>()
 const slots = defineSlots<AlertSlots>()
 
 const { t } = useLocale()
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.alert)
-  return styler({
-    ...props,
-    title: !!props.title || !!slots.title,
-  })
-})
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('alert', {
+  ...props,
+  title: !!props.title || !!slots.title,
+}))
 </script>
 
 <template>

package/dist/runtime/components/App.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { UserConfig } from '@unocss/core'
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
-import type { Messages, ThemeExtension, ToasterProps } from '../types'
+import type { Messages, ThemeExtension, ToastProviderProps } from '../types'
 import type { Locale } from '../utils'
 
 export interface AppSlots {
@@ -11,7 +11,7 @@ export interface AppSlots {
 export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
   unoConfig?: UserConfig
   ui?: ThemeExtension
-  toaster?: ToasterProps
+  toaster?: ToastProviderProps
   tooltip?: TooltipProviderProps
   locale?: Locale<Messages>
 }
@@ -20,11 +20,10 @@ export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'l
 <script setup lang="ts">
 import { reactivePick } from '@vueuse/core'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
-import { shallowRef, toRef, useId } from 'vue'
-import type { ModalStateProvideValue } from '../app/injections'
-import { provideLocaleContext, provideModalState, provideThemeExtension, provideUnoConfig } from '../app/injections'
-import ModalProvider from './ModalProvider.vue'
-import Toaster from './Toaster.vue'
+import { toRef, useId } from 'vue'
+import { provideLocaleContext, provideThemeExtension, provideUnoConfig } from '../app/injections'
+import OverlayProvider from './OverlayProvider.vue'
+import ToastProvider from './ToastProvider.vue'
 
 const props = withDefaults(defineProps<AppProps>(), {
   unoConfig: () => ({}),
@@ -35,27 +34,23 @@ defineSlots<AppSlots>()
 
 const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
 const tooltipProps = toRef(() => props.tooltip)
-const toasterProps = toRef(() => props.toaster)
+const toastProviderProps = toRef(() => props.toaster)
 
-const modalState = shallowRef<ModalStateProvideValue>({
-  component: 'div',
-  props: {},
-})
-
-provideModalState(modalState)
 provideUnoConfig(() => props.unoConfig)
 provideThemeExtension(() => props.ui)
-provideLocaleContext(() => props.locale)
+
+const locale = toRef(() => props.locale)
+provideLocaleContext(locale)
 </script>
 
 <template>
-  <ConfigProvider :use-id="useId" v-bind="configProviderProps">
+  <ConfigProvider :use-id="useId" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
     <TooltipProvider v-bind="tooltipProps">
-      <Toaster v-if="props.toaster !== null" v-bind="toasterProps">
+      <ToastProvider v-if="props.toaster !== null" v-bind="toastProviderProps">
         <slot></slot>
-      </Toaster>
+      </ToastProvider>
       <slot v-else></slot>
     </TooltipProvider>
-    <ModalProvider />
+    <OverlayProvider />
   </ConfigProvider>
 </template>

package/dist/runtime/components/Avatar.vue

@@ -40,14 +40,11 @@ const props = withDefaults(defineProps<AvatarProps>(), {
 const { size } = useAvatarGroup(props)
 const fallback = computed(() => props.text || (props.alt || '').split(' ').map((word) => word.charAt(0)).join('').slice(0, 2))
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.avatar)
-  return styler({
-    ...props,
-    size: size.value,
-  })
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('avatar', {
+  ...props,
+  size: size.value,
+}))
 
 const error = shallowRef(false)
 

package/dist/runtime/components/AvatarGroup.vue

@@ -73,11 +73,8 @@ const hiddenCount = computed(() => {
   return children.value.length - visibleAvatars.value.length
 })
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.avatarGroup)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('avatarGroup', props))
 
 provideAvatarGroup(computed(() => props))
 </script>

package/dist/runtime/components/Badge.vue

@@ -5,7 +5,7 @@ import type { badge } from '../theme'
 import type { ComponentAttrs } from '../types'
 
 export interface BadgeEmits {
-  (e: 'update:show', payload: boolean): void
+  'update:show': [payload: boolean]
 }
 
 export interface BadgeSlots {
@@ -50,11 +50,8 @@ defineSlots<BadgeSlots>()
 
 const show = defineModel<boolean>('show', { default: true })
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.badge)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('badge', props))
 </script>
 
 <template>

package/dist/runtime/components/Breadcrumb.vue

@@ -3,29 +3,29 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { breadcrumb } from '../theme'
 import type { ComponentAttrs, DynamicSlots, LinkProps } from '../types'
 
-type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
-
-export type BreadcrumbSlots<T extends { slot?: string }> = {
-  'item'?: SlotProps<T>
-  'item-leading'?: SlotProps<T>
-  'item-label'?: SlotProps<T>
-  'item-trailing'?: SlotProps<T>
-  'separator'?: (props?: {}) => any
-} & DynamicSlots<T, SlotProps<T>>
-
 export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
   label?: string
   icon?: string
   slot?: string
+  [key: string]: any
 }
 
-export interface BreadcrumbProps<T> extends ComponentAttrs<typeof breadcrumb> {
+type SlotProps<T extends BreadcrumbItem> = (props: { item: T, index: number, active?: boolean }) => any
+
+export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
+  'item'?: SlotProps<T>
+  'item-leading'?: SlotProps<T>
+  'item-label'?: SlotProps<T>
+  'item-trailing'?: SlotProps<T>
+  'separator'?: any
+} & DynamicSlots<T, 'leading' | 'label' | 'trailing', SlotProps<T>>
+
+export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> extends ComponentAttrs<typeof breadcrumb> {
   /**
    * The element or component this component should render as.
    * @default "nav"
    */
   as?: PrimitiveProps['as']
-  dir?: 'rtl' | 'ltr'
   items?: T[]
   /**
    * The icon to use as a separator.
@@ -43,6 +43,7 @@ export interface BreadcrumbProps<T> extends ComponentAttrs<typeof breadcrumb> {
 <script setup lang="ts" generic="T extends BreadcrumbItem">
 import { Primitive } from 'reka-ui'
 import { computed } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import { get, pickLinkProps } from '../utils'
 import Link from './Link.vue'
@@ -55,14 +56,12 @@ const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
 
 const slots = defineSlots<BreadcrumbSlots<T>>()
 
-const { theme, createStyler } = useTheme()
+const { dir } = useLocale()
+const { theme, generateStyle } = useTheme()
 
-const separatorIcon = computed(() => props.separatorIcon || (props.dir === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
+const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
 
-const style = computed(() => {
-  const styler = createStyler(theme.value.breadcrumb)
-  return styler(props)
-})
+const style = computed(() => generateStyle('breadcrumb', props))
 </script>
 
 <template>
@@ -77,18 +76,18 @@ const style = computed(() => {
               :aria-current="active && (index === items!.length - 1) ? 'page' : undefined"
               :class="style.link({ class: props.ui?.link, 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'}-leading`" :item="item" :active="index === items!.length - 1" :index="index">
+              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="item" :index="index">
+                <slot :name="(`${item.slot || 'item'}-leading` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
                   <span v-if="item.icon" :class="style.linkLeadingIcon({ class: [item.icon, props.ui?.linkLeadingIcon] })"></span>
                 </slot>
 
-                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="style.linkLabel({ class: props.ui?.linkLabel })">
-                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="index === items!.length - 1" :index="index">
+                <span v-if="get(item, props.labelKey) || slots[(`${item.slot || 'item'}-label` as keyof BreadcrumbSlots<T>)]" :class="style.linkLabel({ class: props.ui?.linkLabel })">
+                  <slot :name="(`${item.slot || 'item'}-label` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
                     {{ get(item, props.labelKey) }}
                   </slot>
                 </span>
 
-                <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="index === items!.length - 1" :index="index"></slot>
+                <slot :name="(`${item.slot || 'item'}-trailing` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index"></slot>
               </slot>
             </LinkBase>
           </Link>

package/dist/runtime/components/Button.vue

@@ -46,11 +46,10 @@ const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponen
 
 const linkProps = useForwardProps(pickLinkProps(props))
 
-const { theme, createStyler } = useTheme()
+const { generateStyle } = useTheme()
 
 const style = computed(() => {
-  const styler = createStyler(theme.value.button)
-  return styler({
+  return generateStyle('button', {
     ...props,
     size: size.value,
     groupOrientation: orientation.value,

package/dist/runtime/components/ButtonGroup.vue

@@ -35,11 +35,8 @@ defineSlots<ButtonGroupSlots>()
 
 provideButtonGroup(computed(() => props))
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.buttonGroup)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('buttonGroup', props))
 </script>
 
 <template>

package/dist/runtime/components/Calendar.vue

@@ -0,0 +1,185 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { DateValue } from '@internationalized/date'
+import type { CalendarCellTriggerProps, CalendarRootEmits, CalendarRootProps, DateRange, RangeCalendarRootEmits, RangeCalendarRootProps } from 'reka-ui'
+import type { calendar } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
+  'update:modelValue': [date: CalendarModelValue<R, M>]
+}
+
+export interface CalendarSlots {
+  'heading'?: (props: { value: string }) => any
+  'day'?: (props: Pick<CalendarCellTriggerProps, 'day'>) => any
+  'week-day'?: (props: { day: string }) => any
+}
+
+type CalendarVariants = VariantProps<typeof calendar>
+
+type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true
+  ? DateRange
+  : M extends true ? DateValue[] : DateValue
+
+type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true
+  ? (DateRange | null)
+  : M extends true
+    ? (DateValue[] | undefined)
+    : (DateValue | undefined)
+
+type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>
+type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>
+
+export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends ComponentAttrs<typeof calendar>, _CalendarRootProps, _RangeCalendarRootProps {
+  /**
+   * The icon to use for the next year control.
+   * @default app.icons.chevronDoubleRight
+   */
+  nextYearIcon?: string
+  /**
+   * The icon to use for the next month control.
+   * @default app.icons.chevronRight
+   */
+  nextMonthIcon?: string
+  /**
+   * The icon to use for the previous year control.
+   * @default app.icons.chevronDoubleLeft
+   */
+  prevYearIcon?: string
+  /**
+   * The icon to use for the previous month control.
+   * @default app.icons.chevronLeft
+   */
+  prevMonthIcon?: string
+  /**
+   * @default "md"
+   */
+  size?: CalendarVariants['size']
+  /** Whether or not a range of dates can be selected */
+  range?: R & boolean
+  /** Whether or not multiple dates can be selected */
+  multiple?: M & boolean
+  /** Show month controls */
+  monthControls?: boolean
+  /** Show year controls */
+  yearControls?: boolean
+  defaultValue?: CalendarDefaultValue<R, M>
+  modelValue?: CalendarDefaultValue<R, M>
+}
+</script>
+
+<script setup lang="ts" generic="R extends boolean, M extends boolean">
+import { reactiveOmit } from '@vueuse/core'
+import { useForwardPropsEmits } from 'reka-ui'
+import { Calendar as BaseCalendar, RangeCalendar } from 'reka-ui/namespaced'
+import { computed } from 'vue'
+import { useLocale } from '../composables/useLocale'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
+
+const props = withDefaults(defineProps<CalendarProps<R, M>>(), {
+  fixedWeeks: true,
+  monthControls: true,
+  yearControls: true,
+})
+const emit = defineEmits<CalendarEmits<R, M>>()
+defineSlots<CalendarSlots>()
+
+const rootProps = useForwardPropsEmits(reactiveOmit(props, 'range', 'modelValue', 'defaultValue', 'size', 'monthControls', 'yearControls', 'class', 'ui'), emit)
+
+const { code: locale, dir, t } = useLocale()
+const { theme, generateStyle } = useTheme()
+
+const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronDoubleLeft : theme.value.app.icons.chevronDoubleRight))
+const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
+const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronDoubleRight : theme.value.app.icons.chevronDoubleLeft))
+const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft))
+
+function paginateYear(date: DateValue, sign: -1 | 1) {
+  if (sign === -1)
+    return date.subtract({ years: 1 })
+
+  return date.add({ years: 1 })
+}
+
+const Calendar = computed(() => props.range ? RangeCalendar : BaseCalendar)
+
+const style = computed(() => generateStyle('calendar', props))
+</script>
+
+<template>
+  <Calendar.Root
+    v-slot="{ weekDays, grid }"
+    v-bind="rootProps"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :locale="locale"
+    :dir="dir"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+  >
+    <Calendar.Header :class="style.header({ class: props.ui?.header })">
+      <Calendar.Prev v-if="props.yearControls" :prev-page="date => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+        <Button :icon="prevYearIcon" :size="props.size" variant="ghost" />
+      </Calendar.Prev>
+      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
+        <Button :icon="prevMonthIcon" :size="props.size" variant="ghost" />
+      </Calendar.Prev>
+
+      <Calendar.Heading v-slot="{ headingValue }" :class="style.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>
+        <Button :icon="nextMonthIcon" :size="props.size" variant="ghost" />
+      </Calendar.Next>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+        <Button :icon="nextYearIcon" :size="props.size" variant="ghost" />
+      </Calendar.Next>
+    </Calendar.Header>
+    <div :class="style.body({ class: props.ui?.body })">
+      <Calendar.Grid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :class="style.grid({ class: props.ui?.grid })"
+      >
+        <Calendar.GridHead>
+          <Calendar.GridRow :class="style.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <Calendar.HeadCell v-for="day in weekDays" :key="day" :class="style.headCell({ class: props.ui?.headCell })">
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </Calendar.HeadCell>
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+        <Calendar.GridBody :class="style.gridBody({ class: props.ui?.gridBody })">
+          <Calendar.GridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDates-${index}`"
+            :class="style.gridRow({ class: props.ui?.gridRow })"
+          >
+            <Calendar.Cell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              :class="style.cell({ class: props.ui?.cell })"
+            >
+              <Calendar.CellTrigger
+                v-slot="{ disabled, unavailable }"
+                :day="weekDate"
+                :month="month.value"
+                as-child
+              >
+                <div :class="style.cellTrigger({ class: props.ui?.cellTrigger, disabled: disabled || unavailable })">
+                  <slot name="day" :day="weekDate">
+                    {{ weekDate.day }}
+                  </slot>
+                </div>
+              </Calendar.CellTrigger>
+            </Calendar.Cell>
+          </Calendar.GridRow>
+        </Calendar.GridBody>
+      </Calendar.Grid>
+    </div>
+  </Calendar.Root>
+</template>

package/dist/runtime/components/Card.vue

@@ -35,11 +35,8 @@ import { useTheme } from '../composables/useTheme'
 const props = withDefaults(defineProps<CardProps>(), {})
 const slots = defineSlots<CardSlots>()
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.card)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('card', props))
 </script>
 
 <template>