@byyuurin/ui 0.0.6 → 0.0.8

package/README.md

@@ -47,9 +47,8 @@ export default defineConfig({
       radiusSwitch: '0rem', // optional
       radiusTabs: '0rem', // optional
       cb: '#1f2937', // optional
-      c1: '#ffffff', // optional
-      c2: '#f2f2f2', // optional
-      c3: '#e5e6e6', // optional
+      cp: '#1f2937', // optional
+      cx: '#ffffff', // optional
     }),
   ],
 })
@@ -58,8 +57,8 @@ export default defineConfig({
 New Rules
 
 - `ui-[color]`
-- `bg-solid-[color]`
-- `bg-solid-[color]/[opacity]`
+- `bg-soft-[color]`
+- `bg-soft-[color]/[mix-ratio]`
 
 ### Vite
 

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.json

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

package/dist/{nuxt.mjs → module.mjs}

@@ -1,9 +1,9 @@
 import { defineNuxtModule, useLogger, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { p as packageName } from './shared/ui.D4zm1r0C.mjs';
+import { n as name } from './shared/ui.ba24b380.mjs';
 
-const nuxt = defineNuxtModule({
+const module = defineNuxtModule({
   meta: {
-    name: packageName,
+    name: name,
     configKey: "ui",
     compatibility: {
       nuxt: ">=3.13.1"
@@ -13,15 +13,15 @@ const nuxt = 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.`);
+      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"),
@@ -32,5 +32,5 @@ const nuxt = defineNuxtModule({
   }
 });
 
-export { nuxt as default };
-//# sourceMappingURL=nuxt.mjs.map
+export { module as default };
+//# sourceMappingURL=module.mjs.map

package/dist/module.mjs.map

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,16 @@
+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 { 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

@@ -0,0 +1,31 @@
+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: InjectionKeyModalState,
+  inject: injectModalState,
+  provide: provideModalState
+} = defineInjection("ui.modal");
+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

@@ -1,8 +1,20 @@
 <script lang="ts">
-import type { AccordionRootEmits, AccordionRootProps, PrimitiveProps } from 'reka-ui'
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
 import type { accordion } from '../theme'
 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
@@ -14,20 +26,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>
-  icon?: SlotProps<T>
-  content?: SlotProps<T>
-  body?: SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
-
-export interface AccordionProps<T> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
-  as?: PrimitiveProps['as']
+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.chevronDown
+   */
+  trailingIcon?: string
   labelKey?: string
 }
 </script>
@@ -44,11 +49,11 @@ const props = withDefaults(defineProps<AccordionProps<T>>(), {
   collapsible: true,
   unmountOnHide: true,
   labelKey: 'label',
-  items: () => [],
 })
-const slots = defineSlots<AccordionSlots<T>>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'))
+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(() => {
@@ -69,16 +74,16 @@ const style = computed(() => {
     >
       <AccordionHeader :class="style.header({ class: props.ui?.header })">
         <AccordionTrigger :class="style.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
-          <slot name="icon" v-bind="{ item, index, open }">
-            <i v-if="item.icon" :class="style.icon({ class: [item.icon, props.ui?.icon] })"></i>
+          <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="trailing-icon" v-bind="{ item, index, open }">
-            <i v-if="item.trailingIcon" :class="style.icon({ class: [item.trailingIcon, props.ui?.trailingIcon] })"></i>
+          <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>
@@ -100,21 +105,5 @@ const style = computed(() => {
 </template>
 
 <style>
-@keyframes accordion-up {
-  from {
-    height: var(--reka-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-
-@keyframes accordion-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--reka-accordion-content-height);
-  }
-}
+@keyframes accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}
 </style>

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,6 +63,7 @@ const props = withDefaults(defineProps<AlertProps>(), {
 const emit = defineEmits<AlertEmits>()
 const slots = defineSlots<AlertSlots>()
 
+const { t } = useLocale()
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
   const styler = createStyler(theme.value.alert)
@@ -73,8 +80,8 @@ const style = computed(() => {
     :data-orientation="props.orientation"
     :class="style.root({ class: [props.class, props.ui?.root] })"
   >
-    <slot name="prepend">
-      <i v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></i>
+    <slot name="leading">
+      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></span>
     </slot>
 
     <div :class="style.wrapper({ class: props.ui?.wrapper })">
@@ -109,7 +116,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,27 +1,28 @@
 <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, ToasterProps } 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
-  tooltip?: TooltipProviderProps
   toaster?: ToasterProps
-}
-
-export interface AppSlots {
-  default: (props?: Record<string, unknown>) => any
+  tooltip?: TooltipProviderProps
+  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 { 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'
 
@@ -36,16 +37,15 @@ const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
 const tooltipProps = toRef(() => props.tooltip)
 const toasterProps = toRef(() => props.toaster)
 
-const modalState = shallowRef<ModalState>({
+const modalState = shallowRef<ModalStateProvideValue>({
   component: 'div',
   props: {},
 })
 
-const themeExtension = computed(() => props.ui)
-
 provideModalState(modalState)
-provideUnoConfig(props.unoConfig)
-provideThemeExtension(themeExtension)
+provideUnoConfig(() => props.unoConfig)
+provideThemeExtension(() => props.ui)
+provideLocaleContext(() => props.locale)
 </script>
 
 <template>

package/dist/runtime/components/Avatar.vue

@@ -0,0 +1,73 @@
+<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 { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.avatar)
+  return styler({
+    ...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,90 @@
+<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 { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.avatarGroup)
+  return styler(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">