@byyuurin/ui 0.0.8 → 0.0.9

package/dist/module.json

@@ -1,10 +1,10 @@
 {
   "name": "@byyuurin/ui",
+  "version": "0.0.9",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.13.1"
   },
-  "version": "0.0.8",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,9 +1,10 @@
-import { defineNuxtModule, useLogger, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { n as name } from './shared/ui.ba24b380.mjs';
+import { defineNuxtModule, useLogger, createResolver, hasNuxtModule, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { n as name, v as version } from './shared/ui.1a1f119c.mjs';
 
 const module = defineNuxtModule({
   meta: {
     name: name,
+    version: version,
     configKey: "ui",
     compatibility: {
       nuxt: ">=3.13.1"
@@ -15,7 +16,7 @@ const module = defineNuxtModule({
   setup(options, nuxt) {
     const logger = useLogger(name);
     const { resolve } = createResolver(import.meta.url);
-    if (!nuxt.options.modules.includes("@unocss/nuxt")) {
+    if (!hasNuxtModule("@unocss/nuxt")) {
       logger.error(`\`${name}\` requires the \`@unocss/nuxt\` module to be installed.`);
       return;
     }

package/dist/module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"module.mjs","sources":["../src/module.ts"],"sourcesContent":["import { addComponentsDir, addImportsDir, createResolver, defineNuxtModule, useLogger } from '@nuxt/kit'\nimport { packageName } from './shared'\n\nexport interface ModuleOptions {\n  /**\n   * prefix for components used in templates\n   *\n   * @default \"U\"\n   */\n  prefix?: string\n}\n\nexport default defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: packageName,\n    configKey: 'ui',\n    compatibility: {\n      nuxt: '>=3.13.1',\n    },\n  },\n  defaults: {\n    prefix: 'U',\n  },\n  setup(options, nuxt) {\n    const logger = useLogger(packageName)\n    const { resolve } = createResolver(import.meta.url)\n\n    // Make sure the UnoCSS Nuxt module is installed\n    if (!nuxt.options.modules.includes('@unocss/nuxt')) {\n      logger.error(`\\`${packageName}\\` requires the \\`@unocss/nuxt\\` module to be installed.`)\n      return\n    }\n\n    nuxt.options.vite.optimizeDeps ??= {}\n    nuxt.options.vite.optimizeDeps.include ??= []\n    nuxt.options.vite.optimizeDeps.include.push(`${packageName}/unocss`)\n\n    nuxt.options.alias['#ui'] = resolve('./runtime')\n\n    addComponentsDir({\n      path: resolve('./runtime/components'),\n      prefix: options.prefix,\n      pathPrefix: false,\n    })\n\n    addImportsDir(resolve('./runtime/composables'))\n  },\n})\n"],"names":["packageName"],"mappings":";;;AAYA,eAAe,gBAAgC,CAAA;AAAA,EAC7C,IAAM,EAAA;AAAA,IACJ,IAAM,EAAAA,IAAA;AAAA,IACN,SAAW,EAAA,IAAA;AAAA,IACX,aAAe,EAAA;AAAA,MACb,IAAM,EAAA,UAAA;AAAA,KACR;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,MAAQ,EAAA,GAAA;AAAA,GACV;AAAA,EACA,KAAA,CAAM,SAAS,IAAM,EAAA;AACnB,IAAM,MAAA,MAAA,GAAS,UAAUA,IAAW,CAAA,CAAA;AACpC,IAAA,MAAM,EAAE,OAAA,EAAY,GAAA,cAAA,CAAe,YAAY,GAAG,CAAA,CAAA;AAGlD,IAAA,IAAI,CAAC,IAAK,CAAA,OAAA,CAAQ,OAAQ,CAAA,QAAA,CAAS,cAAc,CAAG,EAAA;AAClD,MAAO,MAAA,CAAA,KAAA,CAAM,CAAK,EAAA,EAAAA,IAAW,CAA0D,wDAAA,CAAA,CAAA,CAAA;AACvF,MAAA,OAAA;AAAA,KACF;AAEA,IAAK,IAAA,CAAA,OAAA,CAAQ,IAAK,CAAA,YAAA,KAAiB,EAAC,CAAA;AACpC,IAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,CAAK,YAAa,CAAA,OAAA,KAAY,EAAC,CAAA;AAC5C,IAAA,IAAA,CAAK,QAAQ,IAAK,CAAA,YAAA,CAAa,QAAQ,IAAK,CAAA,CAAA,EAAGA,IAAW,CAAS,OAAA,CAAA,CAAA,CAAA;AAEnE,IAAA,IAAA,CAAK,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,GAAI,QAAQ,WAAW,CAAA,CAAA;AAE/C,IAAiB,gBAAA,CAAA;AAAA,MACf,IAAA,EAAM,QAAQ,sBAAsB,CAAA;AAAA,MACpC,QAAQ,OAAQ,CAAA,MAAA;AAAA,MAChB,UAAY,EAAA,KAAA;AAAA,KACb,CAAA,CAAA;AAED,IAAc,aAAA,CAAA,OAAA,CAAQ,uBAAuB,CAAC,CAAA,CAAA;AAAA,GAChD;AACF,CAAC,CAAA;;;;"}
+{"version":3,"file":"module.mjs","sources":["../src/module.ts"],"sourcesContent":["import { addComponentsDir, addImportsDir, createResolver, defineNuxtModule, hasNuxtModule, useLogger } from '@nuxt/kit'\nimport { packageName, packageVersion } from './shared'\n\nexport interface ModuleOptions {\n  /**\n   * prefix for components used in templates\n   *\n   * @default \"U\"\n   */\n  prefix?: string\n}\n\nexport default defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: packageName,\n    version: packageVersion,\n    configKey: 'ui',\n    compatibility: {\n      nuxt: '>=3.13.1',\n    },\n  },\n  defaults: {\n    prefix: 'U',\n  },\n  setup(options, nuxt) {\n    const logger = useLogger(packageName)\n    const { resolve } = createResolver(import.meta.url)\n\n    // Make sure the UnoCSS Nuxt module is installed\n    if (!hasNuxtModule('@unocss/nuxt')) {\n      logger.error(`\\`${packageName}\\` requires the \\`@unocss/nuxt\\` module to be installed.`)\n      return\n    }\n\n    nuxt.options.vite.optimizeDeps ??= {}\n    nuxt.options.vite.optimizeDeps.include ??= []\n    nuxt.options.vite.optimizeDeps.include.push(`${packageName}/unocss`)\n\n    nuxt.options.alias['#ui'] = resolve('./runtime')\n\n    addComponentsDir({\n      path: resolve('./runtime/components'),\n      prefix: options.prefix,\n      pathPrefix: false,\n    })\n\n    addImportsDir(resolve('./runtime/composables'))\n  },\n})\n"],"names":["packageName","packageVersion"],"mappings":";;;AAYA,eAAe,gBAAgC,CAAA;AAAA,EAC7C,IAAM,EAAA;AAAA,IACJ,IAAM,EAAAA,IAAA;AAAA,IACN,OAAS,EAAAC,OAAA;AAAA,IACT,SAAW,EAAA,IAAA;AAAA,IACX,aAAe,EAAA;AAAA,MACb,IAAM,EAAA,UAAA;AAAA,KACR;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,MAAQ,EAAA,GAAA;AAAA,GACV;AAAA,EACA,KAAA,CAAM,SAAS,IAAM,EAAA;AACnB,IAAM,MAAA,MAAA,GAAS,UAAUD,IAAW,CAAA,CAAA;AACpC,IAAA,MAAM,EAAE,OAAA,EAAY,GAAA,cAAA,CAAe,YAAY,GAAG,CAAA,CAAA;AAGlD,IAAI,IAAA,CAAC,aAAc,CAAA,cAAc,CAAG,EAAA;AAClC,MAAO,MAAA,CAAA,KAAA,CAAM,CAAK,EAAA,EAAAA,IAAW,CAA0D,wDAAA,CAAA,CAAA,CAAA;AACvF,MAAA,OAAA;AAAA,KACF;AAEA,IAAK,IAAA,CAAA,OAAA,CAAQ,IAAK,CAAA,YAAA,KAAiB,EAAC,CAAA;AACpC,IAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,CAAK,YAAa,CAAA,OAAA,KAAY,EAAC,CAAA;AAC5C,IAAA,IAAA,CAAK,QAAQ,IAAK,CAAA,YAAA,CAAa,QAAQ,IAAK,CAAA,CAAA,EAAGA,IAAW,CAAS,OAAA,CAAA,CAAA,CAAA;AAEnE,IAAA,IAAA,CAAK,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,GAAI,QAAQ,WAAW,CAAA,CAAA;AAE/C,IAAiB,gBAAA,CAAA;AAAA,MACf,IAAA,EAAM,QAAQ,sBAAsB,CAAA;AAAA,MACpC,QAAQ,OAAQ,CAAA,MAAA;AAAA,MAChB,UAAY,EAAA,KAAA;AAAA,KACb,CAAA,CAAA;AAED,IAAc,aAAA,CAAA,OAAA,CAAQ,uBAAuB,CAAC,CAAA,CAAA;AAAA,GAChD;AACF,CAAC,CAAA;;;;"}

package/dist/runtime/app/injections.d.ts

@@ -1,16 +1,11 @@
 import type { UserConfig } from '@unocss/core';
-import type { Component, ComputedRef, MaybeRefOrGetter, ShallowRef } from 'vue';
-import type { AvatarGroupProps, ButtonGroupProps, Messages, ModalProps } from '../types/index.js';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { AvatarGroupProps, ButtonGroupProps, Messages } from '../types/index.js';
 import type { Locale } from '../utils/index.js';
 export type AvatarGroupProvideValue = Pick<AvatarGroupProps, 'size'>;
 export declare const InjectionKeyAvatarGroup: import("vue").InjectionKey<ComputedRef<AvatarGroupProvideValue>>, injectAvatarGroup: () => ComputedRef<AvatarGroupProvideValue> | undefined, provideAvatarGroup: (value: ComputedRef<AvatarGroupProvideValue>) => void;
 export type ButtonGroupProvideValue = Pick<ButtonGroupProps, 'size' | 'orientation'>;
 export declare const InjectionKeyButtonGroup: import("vue").InjectionKey<ComputedRef<ButtonGroupProvideValue>>, injectButtonGroup: () => ComputedRef<ButtonGroupProvideValue> | undefined, provideButtonGroup: (value: ComputedRef<ButtonGroupProvideValue>) => void;
 export declare const InjectionKeyLocaleContext: import("vue").InjectionKey<MaybeRefOrGetter<Locale<Messages> | undefined>>, injectLocaleContext: () => MaybeRefOrGetter<Locale<Messages> | undefined>, provideLocaleContext: (value: MaybeRefOrGetter<Locale<Messages> | undefined>) => void;
-export interface ModalStateProvideValue {
-    component: Component | string;
-    props: ModalProps;
-}
-export declare const InjectionKeyModalState: import("vue").InjectionKey<ShallowRef<ModalStateProvideValue>>, injectModalState: () => ShallowRef<ModalStateProvideValue> | undefined, provideModalState: (value: ShallowRef<ModalStateProvideValue>) => void;
 export declare const InjectionKeyThemeExtension: import("vue").InjectionKey<MaybeRefOrGetter<import("..").PartialTheme<typeof import("../theme")>>>, provideThemeExtension: (value: MaybeRefOrGetter<import("..").PartialTheme<typeof import("../theme")>>) => void, injectThemeExtension: () => MaybeRefOrGetter<import("..").PartialTheme<typeof import("../theme")>>;
 export declare const InjectionKeyUnoConfig: import("vue").InjectionKey<MaybeRefOrGetter<UserConfig<object>>>, provideUnoConfig: (value: MaybeRefOrGetter<UserConfig<object>>) => void, injectUnoConfig: () => MaybeRefOrGetter<UserConfig<object>>;

package/dist/runtime/app/injections.js

@@ -14,11 +14,6 @@ export const {
   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

@@ -1,12 +1,17 @@
 <script lang="ts">
 import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
 import type { accordion } from '../theme'
-import type { ComponentAttrs, DynamicSlots } from '../types'
+import type { ComponentAttrs } from '../types'
 
 export interface AccordionEmits extends AccordionRootEmits {}
 
 type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
 
+type DynamicSlots<T extends { slot?: string }, SlotProps, Slot = T['slot']> =
+  Slot extends string
+    ? Record<Slot | `${Slot}-body`, SlotProps>
+    : Record<string, never>
+
 export type AccordionSlots<T extends { slot?: string }> = {
   default?: SlotProps<T>
   leading?: SlotProps<T>
@@ -55,11 +60,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 +91,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]) || slots.body || (item.slot && slots[`${item.slot}-body`])"
         :class="style.content({ class: props.ui?.content })"
       >
         <slot :name="item.slot || 'content'" 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'" v-bind="{ item, index, open }">
               {{ item.content }}
             </slot>
           </div>

package/dist/runtime/components/Alert.vue

@@ -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

@@ -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

@@ -1,10 +1,15 @@
 <script lang="ts">
 import type { PrimitiveProps } from 'reka-ui'
 import type { breadcrumb } from '../theme'
-import type { ComponentAttrs, DynamicSlots, LinkProps } from '../types'
+import type { ComponentAttrs, LinkProps } from '../types'
 
 type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
 
+type DynamicSlots<T extends { slot?: string }, SlotProps, Slot = T['slot']> =
+  Slot extends string
+    ? Record<Slot | `${Slot}-${'leading' | 'label' | 'trailing'}`, SlotProps>
+    : Record<string, never>
+
 export type BreadcrumbSlots<T extends { slot?: string }> = {
   'item'?: SlotProps<T>
   'item-leading'?: SlotProps<T>
@@ -25,7 +30,6 @@ export interface BreadcrumbProps<T> extends ComponentAttrs<typeof breadcrumb> {
    * @default "nav"
    */
   as?: PrimitiveProps['as']
-  dir?: 'rtl' | 'ltr'
   items?: T[]
   /**
    * The icon to use as a separator.
@@ -43,6 +47,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 +60,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>

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,176 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { DateValue } from '@internationalized/date'
+import type { CalendarCellTriggerProps, CalendarRootEmits, CalendarRootProps, DateRange, RangeCalendarRootEmits } 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 CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true
+  ? DateRange
+  : M extends true ? DateValue[] : DateValue
+
+export interface CalendarProps<R extends boolean, M extends boolean> extends ComponentAttrs<typeof calendar>, Omit<CalendarRootProps, 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'> {
+  /**
+   * 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?: CalendarModelValue<R, M>
+  modelValue?: CalendarModelValue<R, M>
+}
+</script>
+
+<script setup lang="ts" generic="R extends boolean = false, M extends boolean = false">
+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>

package/dist/runtime/components/Carousel.vue

@@ -55,7 +55,6 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Omit<
   dots?: boolean
   orientation?: CarouselVariants['orientation']
   items?: T[]
-  dir?: 'rtl' | 'ltr'
   /**
    * Enable Autoplay plugin
    * @link https://www.embla-carousel.com/plugins/autoplay/
@@ -103,8 +102,6 @@ const props = withDefaults(defineProps<CarouselProps<T>>(), {
   arrows: false,
   dots: false,
 
-  dir: 'ltr',
-
   // Embla Options
   active: true,
   align: 'center',
@@ -135,21 +132,18 @@ defineSlots<CarouselSlots<T>>()
 
 const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
 
-const { t } = useLocale()
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.carousel)
-  return styler(props)
-})
+const { t, dir } = useLocale()
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('carousel', props))
 
-const prevIcon = computed(() => props.prevIcon || (props.dir === 'rtl' ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft))
-const nextIcon = computed(() => props.nextIcon || (props.dir === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
+const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft))
+const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
 
 const options = computed<EmblaOptionsType>(() => ({
   ...(props.fade ? { align: 'center', containScroll: false } : {}),
   ...rootProps.value,
   axis: props.orientation === 'horizontal' ? 'x' : 'y',
-  direction: props.dir === 'rtl' ? 'rtl' : 'ltr',
+  direction: dir.value === 'rtl' ? 'rtl' : 'ltr',
 }))
 
 const plugins = computedAsync<EmblaPluginType[]>(async () => {
@@ -261,7 +255,6 @@ defineExpose({
     role="region"
     aria-roledescription="carousel"
     tabindex="0"
-    :dir="props.dir"
     :class="style.root({ class: [props.class, props.ui?.root] })"
     @keydown="onKeyDown"
   >

package/dist/runtime/components/Checkbox.vue

@@ -55,11 +55,8 @@ const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defa
 
 const id = props.id ?? useId()
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.checkbox)
-  return styler(props)
-})
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('checkbox', props))
 
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'

package/dist/runtime/components/Chip.vue

@@ -41,15 +41,12 @@ const slots = defineSlots<ChipSlots>()
 const { size, orientation } = useButtonGroup(props)
 const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.chip)
-  return styler({
-    ...props,
-    size: size.value,
-    groupOrientation: orientation.value,
-  })
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('chip', {
+  ...props,
+  size: size.value,
+  groupOrientation: orientation.value,
+}))
 </script>
 
 <template>

package/dist/runtime/components/Collapsible.vue

@@ -28,11 +28,8 @@ const slots = defineSlots<CollapsibleSlots>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emit)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.collapsible)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('collapsible', props))
 </script>
 
 <template>