@byyuurin/ui 0.0.7 → 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.7",
   "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 { p as packageName } from './shared/ui.d1728164.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: packageName,
+    name: name,
+    version: version,
     configKey: "ui",
     compatibility: {
       nuxt: ">=3.13.1"
@@ -13,15 +14,15 @@ const module = defineNuxtModule({
     prefix: "U"
   },
   setup(options, nuxt) {
-    const logger = useLogger(packageName);
+    const logger = useLogger(name);
     const { resolve } = createResolver(import.meta.url);
-    if (!nuxt.options.modules.includes("@unocss/nuxt")) {
-      logger.error(`\`${packageName}\` requires the \`@unocss/nuxt\` module to be installed.`);
+    if (!hasNuxtModule("@unocss/nuxt")) {
+      logger.error(`\`${name}\` requires the \`@unocss/nuxt\` module to be installed.`);
       return;
     }
     nuxt.options.vite.optimizeDeps ??= {};
     nuxt.options.vite.optimizeDeps.include ??= [];
-    nuxt.options.vite.optimizeDeps.include.push(`${packageName}/unocss`);
+    nuxt.options.vite.optimizeDeps.include.push(`${name}/unocss`);
     nuxt.options.alias["#ui"] = resolve("./runtime");
     addComponentsDir({
       path: resolve("./runtime/components"),

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":[],"mappings":";;;AAYA,eAAe,gBAAgC,CAAA;AAAA,EAC7C,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,WAAA;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,UAAU,WAAW,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,EAAA,WAAW,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,EAAG,WAAW,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

@@ -0,0 +1,11 @@
+import type { UserConfig } from '@unocss/core';
+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 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

@@ -0,0 +1,26 @@
+import { defineInjection } from "../utils/index.js";
+export const {
+  InjectionKey: InjectionKeyAvatarGroup,
+  inject: injectAvatarGroup,
+  provide: provideAvatarGroup
+} = defineInjection("ui.avatar-group");
+export const {
+  InjectionKey: InjectionKeyButtonGroup,
+  inject: injectButtonGroup,
+  provide: provideButtonGroup
+} = defineInjection("ui.button-group");
+export const {
+  InjectionKey: InjectionKeyLocaleContext,
+  inject: injectLocaleContext,
+  provide: provideLocaleContext
+} = defineInjection("ui.locale-context");
+export const {
+  InjectionKey: InjectionKeyThemeExtension,
+  provide: provideThemeExtension,
+  inject: injectThemeExtension
+} = defineInjection("ui.theme-extension", {});
+export const {
+  InjectionKey: InjectionKeyUnoConfig,
+  provide: provideUnoConfig,
+  inject: injectUnoConfig
+} = defineInjection("ui.uno-config", {});

package/dist/runtime/components/Accordion.vue

@@ -3,10 +3,27 @@ import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
 import type { accordion } from '../theme'
 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>
+  trailing?: SlotProps<T>
+  content?: SlotProps<T>
+  body?: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+
 export interface AccordionItem {
   label?: string
   icon?: string
-  suffixIcon?: string
+  trailingIcon?: string
   slot?: string
   content?: string
   /** A unique value for the accordion item. Defaults to the index. */
@@ -14,25 +31,13 @@ export interface AccordionItem {
   disabled?: boolean
 }
 
-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>
-  prefix?: SlotProps<T>
-  suffix?: SlotProps<T>
-  content?: SlotProps<T>
-  body?: SlotProps<T>
-} & Record<string, SlotProps<T>>
-
 export interface AccordionProps<T> 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.
-   * @default app.icons.down
+   * @default app.icons.chevronDown
    */
-  suffixIcon?: string
+  trailingIcon?: string
   labelKey?: string
 }
 </script>
@@ -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>
@@ -74,27 +76,27 @@ const style = computed(() => {
     >
       <AccordionHeader :class="style.header({ class: props.ui?.header })">
         <AccordionTrigger :class="style.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
-          <slot name="prefix" v-bind="{ item, index, open }">
-            <span v-if="item.icon" :class="style.prefixIcon({ class: [item.icon, props.ui?.prefixIcon] })"></span>
+          <slot name="leading" v-bind="{ item, index, open }">
+            <span v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })"></span>
           </slot>
 
           <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
             <slot v-bind="{ item, index, open }">{{ get(item, props.labelKey) }}</slot>
           </span>
 
-          <slot name="suffix" v-bind="{ item, index, open }">
-            <span :class="style.suffixIcon({ class: [item.suffixIcon || props.suffixIcon || theme.app.icons.down, props.ui?.suffixIcon] })"></span>
+          <slot name="trailing" v-bind="{ item, index, open }">
+            <span :class="style.trailingIcon({ class: [item.trailingIcon || props.trailingIcon || theme.app.icons.chevronDown, props.ui?.trailingIcon] })"></span>
           </slot>
         </AccordionTrigger>
       </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

@@ -4,9 +4,26 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { alert } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
+export interface AlertEmits {
+  (event: 'update:open', value: boolean): void
+}
+
+export interface AlertSlots {
+  leading?: (props?: {}) => any
+  title?: (props?: {}) => any
+  description?: (props?: {}) => any
+  actions?: (props?: {}) => any
+  close?: (props: { ui: ComponentAttrs<typeof alert>['ui'] }) => any
+}
+
 type AlertVariants = VariantProps<typeof alert>
 
-export interface AlertProps extends ComponentAttrs<typeof alert>, Pick<PrimitiveProps, 'as'> {
+export interface AlertProps extends ComponentAttrs<typeof alert> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   title?: string
   description?: string
   icon?: string
@@ -29,23 +46,12 @@ export interface AlertProps extends ComponentAttrs<typeof alert>, Pick<Primitive
    */
   closeIcon?: string
 }
-
-export interface AlertEmits {
-  (event: 'update:open', value: boolean): void
-}
-
-export interface AlertSlots {
-  prepend?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  actions?: (props?: {}) => any
-  close?: (props: { ui: ComponentAttrs<typeof alert>['ui'] }) => any
-}
 </script>
 
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
@@ -57,14 +63,12 @@ const props = withDefaults(defineProps<AlertProps>(), {
 const emit = defineEmits<AlertEmits>()
 const slots = defineSlots<AlertSlots>()
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.alert)
-  return styler({
-    ...props,
-    title: !!props.title || !!slots.title,
-  })
-})
+const { t } = useLocale()
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('alert', {
+  ...props,
+  title: !!props.title || !!slots.title,
+}))
 </script>
 
 <template>
@@ -73,7 +77,7 @@ const style = computed(() => {
     :data-orientation="props.orientation"
     :class="style.root({ class: [props.class, props.ui?.root] })"
   >
-    <slot name="prepend">
+    <slot name="leading">
       <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></span>
     </slot>
 
@@ -109,7 +113,7 @@ const style = computed(() => {
           :icon="props.closeIcon || theme.app.icons.close"
           size="md"
           variant="link"
-          aria-label="Close"
+          :aria-label="t('alert.close')"
           v-bind="typeof props.close === 'object' ? props.close : undefined"
           :class="style.close({ class: props.ui?.close })"
           @click="emit('update:open', false)"

package/dist/runtime/components/App.vue

@@ -1,29 +1,29 @@
 <script lang="ts">
 import type { UserConfig } from '@unocss/core'
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
-import type { ThemeExtension, ToasterProps } from '../types'
+import type { Messages, ThemeExtension, ToastProviderProps } from '../types'
+import type { Locale } from '../utils'
+
+export interface AppSlots {
+  default: (props?: {}) => any
+}
 
 export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
   unoConfig?: UserConfig
   ui?: ThemeExtension
+  toaster?: ToastProviderProps
   tooltip?: TooltipProviderProps
-  toaster?: ToasterProps
-}
-
-export interface AppSlots {
-  default: (props?: Record<string, unknown>) => any
+  locale?: Locale<Messages>
 }
 </script>
 
 <script setup lang="ts">
 import { reactivePick } from '@vueuse/core'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
-import { computed, shallowRef, toRef, useId } from 'vue'
-import type { ModalState } from '../composables/useModal'
-import { provideModalState } from '../composables/useModal'
-import { provideThemeExtension, provideUnoConfig } from '../composables/useTheme'
-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: () => ({}),
@@ -34,28 +34,23 @@ defineSlots<AppSlots>()
 
 const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
 const tooltipProps = toRef(() => props.tooltip)
-const toasterProps = toRef(() => props.toaster)
-
-const modalState = shallowRef<ModalState>({
-  component: 'div',
-  props: {},
-})
+const toastProviderProps = toRef(() => props.toaster)
 
-const themeExtension = computed(() => props.ui)
+provideUnoConfig(() => props.unoConfig)
+provideThemeExtension(() => props.ui)
 
-provideModalState(modalState)
-provideUnoConfig(props.unoConfig)
-provideThemeExtension(themeExtension)
+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

@@ -0,0 +1,70 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { AvatarRootProps } from 'reka-ui'
+import type { avatar } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface AvatarSlots {
+  default?: (props?: {}) => any
+}
+
+type AvatarVariants = VariantProps<typeof avatar>
+
+export interface AvatarProps extends ComponentAttrs<typeof avatar> {
+  /**
+   * The element or component this component should render as.
+   * @default "span"
+   */
+  as?: AvatarRootProps['as']
+  src?: string
+  alt?: string
+  icon?: string
+  text?: string
+  size?: AvatarVariants['size']
+  style?: string | HTMLElement['style']
+}
+</script>
+
+<script setup lang="ts">
+import { AvatarFallback, AvatarImage, AvatarRoot } from 'reka-ui'
+import { computed, shallowRef, watch } from 'vue'
+import { useAvatarGroup } from '../composables/useAvatarGroup'
+import { useTheme } from '../composables/useTheme'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<AvatarProps>(), {
+  src: '',
+})
+
+const { size } = useAvatarGroup(props)
+const fallback = computed(() => props.text || (props.alt || '').split(' ').map((word) => word.charAt(0)).join('').slice(0, 2))
+
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('avatar', {
+  ...props,
+  size: size.value,
+}))
+
+const error = shallowRef(false)
+
+watch(() => props.src, () => {
+  if (error.value)
+    error.value = false
+})
+</script>
+
+<template>
+  <AvatarRoot :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" :style="props.style">
+    <AvatarImage
+      :src="props.src"
+      :alt="props.alt"
+      :class="style.image({ class: props.ui?.image })"
+    />
+
+    <AvatarFallback as-child>
+      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></span>
+      <span v-else :class="style.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
+    </AvatarFallback>
+  </AvatarRoot>
+</template>

package/dist/runtime/components/AvatarGroup.vue

@@ -0,0 +1,87 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { avatarGroup } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface AvatarGroupSlots {
+  default?: (props?: {}) => any
+}
+
+type AvatarGroupVariants = VariantProps<typeof avatarGroup>
+
+export interface AvatarGroupProps extends ComponentAttrs<typeof avatarGroup> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
+  size?: AvatarGroupVariants['size']
+  /**
+   * The maximum number of avatars to display.
+   */
+  max?: number | string
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { provideAvatarGroup } from '../app/injections'
+import { useTheme } from '../composables/useTheme'
+import Avatar from './Avatar.vue'
+
+const props = defineProps<AvatarGroupProps>()
+const slots = defineSlots<AvatarGroupSlots>()
+
+const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
+
+const children = computed(() => {
+  let nodes = slots.default?.()
+
+  if (Array.isArray(nodes) && nodes?.length) {
+    nodes = nodes.flatMap((child) => {
+      if (typeof child.type === 'symbol') {
+        // `v-if="false"` or commented node
+        if (typeof child.children === 'string')
+          return null
+
+        return child.children
+      }
+
+      return child
+    }).filter(Boolean)
+  }
+
+  return nodes || []
+})
+
+const visibleAvatars = computed(() => {
+  if (children.value.length === 0)
+    return []
+
+  if (!max.value || max.value <= 0)
+    return [...children.value].reverse()
+
+  return [...children.value].slice(0, max.value).reverse()
+})
+
+const hiddenCount = computed(() => {
+  if (children.value.length === 0)
+    return 0
+
+  return children.value.length - visibleAvatars.value.length
+})
+
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('avatarGroup', props))
+
+provideAvatarGroup(computed(() => props))
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="style.base({ class: props.ui?.base })" />
+    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="style.base({ class: props.ui?.base })" />
+  </Primitive>
+</template>

package/dist/runtime/components/Badge.vue

@@ -4,9 +4,23 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { badge } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface BadgeEmits {
+  (e: 'update:show', payload: boolean): void
+}
+
+export interface BadgeSlots {
+  default?: (props?: {}) => any
+  content?: (props?: {}) => any
+}
+
 type BadgeVariants = VariantProps<typeof badge>
 
-export interface BadgeProps extends ComponentAttrs<typeof badge>, Pick<PrimitiveProps, 'as'> {
+export interface BadgeProps extends ComponentAttrs<typeof badge> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   text?: string | number
   size?: BadgeVariants['size']
   position?: BadgeVariants['position']
@@ -16,15 +30,6 @@ export interface BadgeProps extends ComponentAttrs<typeof badge>, Pick<Primitive
   /** When `true`, render the badge relatively to the parent. */
   standalone?: boolean
 }
-
-export interface BadgeEmits {
-  (e: 'update:show', payload: boolean): void
-}
-
-export interface BadgeSlots {
-  default?: (props?: {}) => any
-  content?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">
@@ -45,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>