@bitrix24/b24ui-nuxt 0.1.1

package/dist/module.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+const defu = require('defu');
+const kit = require('@nuxt/kit');
+const templates = require('./shared/b24ui-nuxt.D22QQtm8.cjs');
+require('node:url');
+require('scule');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+const module$1 = kit.defineNuxtModule({
+  meta: {
+    name: "b24ui",
+    configKey: "b24ui",
+    compatibility: {
+      nuxt: ">=3.13.1"
+    },
+    docs: "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html"
+  },
+  defaults: templates.defaultOptions,
+  async setup(options, nuxt) {
+    const { resolve } = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('module.cjs', document.baseURI).href)));
+    nuxt.options.b24ui = options;
+    nuxt.options.alias["#b24ui"] = resolve("./runtime");
+    nuxt.options.appConfig.b24ui = defu.defu(nuxt.options.appConfig.b24ui || {}, templates.getDefaultUiConfig());
+    nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
+    nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
+    if (nuxt.options.builder === "@nuxt/vite-builder") {
+      const plugin = await import('@tailwindcss/vite').then((r) => r.default);
+      kit.addVitePlugin(plugin());
+    } else {
+      nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
+    }
+    async function registerModule(name, options2) {
+      if (!kit.hasNuxtModule(name)) {
+        await kit.installModule(name, options2);
+      } else {
+        nuxt.options[name] = defu.defu(nuxt.options[name], options2);
+      }
+    }
+    if (options.colorMode) {
+      await registerModule("@nuxtjs/color-mode", { classSuffix: "", disableTransition: true });
+    }
+    kit.addPlugin({ src: resolve("./runtime/plugins/colors") });
+    kit.addComponentsDir({
+      path: resolve("./runtime/components"),
+      prefix: "B24",
+      pathPrefix: false
+    });
+    kit.addImportsDir(resolve("./runtime/composables"));
+    templates.addTemplates(options, nuxt, resolve);
+  }
+});
+
+module.exports = module$1;

package/dist/module.d.cts

@@ -0,0 +1,14 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
+
+interface ModuleOptions {
+    /**
+     * Enable or disable `@nuxtjs/color-mode` module
+     * @defaultValue `true`
+     * @link https://ui3.nuxt.dev/getting-started/installation#colormode
+     */
+    colorMode?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.d.mts

@@ -0,0 +1,14 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
+
+interface ModuleOptions {
+    /**
+     * Enable or disable `@nuxtjs/color-mode` module
+     * @defaultValue `true`
+     * @link https://ui3.nuxt.dev/getting-started/installation#colormode
+     */
+    colorMode?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -0,0 +1,14 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
+
+interface ModuleOptions {
+    /**
+     * Enable or disable `@nuxtjs/color-mode` module
+     * @defaultValue `true`
+     * @link https://ui3.nuxt.dev/getting-started/installation#colormode
+     */
+    colorMode?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -0,0 +1,13 @@
+{
+  "name": "b24ui",
+  "configKey": "b24ui",
+  "compatibility": {
+    "nuxt": ">=3.13.1"
+  },
+  "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
+  "version": "0.1.1",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,51 @@
+import { defu } from 'defu';
+import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.CNGvMe2S.mjs';
+import 'node:url';
+import 'scule';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "b24ui",
+    configKey: "b24ui",
+    compatibility: {
+      nuxt: ">=3.13.1"
+    },
+    docs: "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html"
+  },
+  defaults: defaultOptions,
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    nuxt.options.b24ui = options;
+    nuxt.options.alias["#b24ui"] = resolve("./runtime");
+    nuxt.options.appConfig.b24ui = defu(nuxt.options.appConfig.b24ui || {}, getDefaultUiConfig());
+    nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
+    nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
+    if (nuxt.options.builder === "@nuxt/vite-builder") {
+      const plugin = await import('@tailwindcss/vite').then((r) => r.default);
+      addVitePlugin(plugin());
+    } else {
+      nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
+    }
+    async function registerModule(name, options2) {
+      if (!hasNuxtModule(name)) {
+        await installModule(name, options2);
+      } else {
+        nuxt.options[name] = defu(nuxt.options[name], options2);
+      }
+    }
+    if (options.colorMode) {
+      await registerModule("@nuxtjs/color-mode", { classSuffix: "", disableTransition: true });
+    }
+    addPlugin({ src: resolve("./runtime/plugins/colors") });
+    addComponentsDir({
+      path: resolve("./runtime/components"),
+      prefix: "B24",
+      pathPrefix: false
+    });
+    addImportsDir(resolve("./runtime/composables"));
+    addTemplates(options, nuxt, resolve);
+  }
+});
+
+export { module as default };

package/dist/runtime/components/Advice.vue

@@ -0,0 +1,115 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/advice'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { tv } from '../utils/tv'
+import type { AvatarProps } from '../types'
+
+const appConfigAdvice = _appConfig as AppConfig & { b24ui: { advice: Partial<typeof theme> } }
+
+const advice = tv({ extend: tv(theme), ...(appConfigAdvice.b24ui?.advice || {}) })
+
+type AdviceVariants = VariantProps<typeof advice>
+
+export interface AdviceProps extends Omit<UseComponentIconsProps, 'loading' | 'trailing' | 'trailingIcon'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  description?: string
+  angle?: AdviceVariants['angle']
+  class?: any
+  b24ui?: Partial<typeof advice.slots>
+}
+
+export interface AdviceSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import B24Avatar from './Avatar.vue'
+import PersonIcon from '@bitrix24/b24icons-vue/main/PersonIcon'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<AdviceProps>(), {
+  as: 'div',
+  angle: 'bottom'
+})
+const slots = defineSlots<AdviceSlots>()
+
+const { isLeading, leadingIconName } = useComponentIcons(
+  computed(() => ({ ...props, loading: false }))
+)
+
+const b24ui = computed(() => advice({
+  angle: props.angle
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <div v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+      <slot name="leading">
+        <Component
+          :is="leadingIconName"
+          v-if="isLeading && leadingIconName"
+          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+        />
+        <B24Avatar
+          v-else-if="!!avatar"
+          :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
+          v-bind="avatar"
+          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+        />
+      </slot>
+    </div>
+    <div
+      v-else
+      :class="b24ui.leading({ class: props.b24ui?.leading })"
+    >
+      <B24Avatar
+        :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
+        :icon="PersonIcon"
+        alt="Person"
+        :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+        :b24ui="{ icon: 'text-white bg-base-800 dark:text-200' }"
+      />
+    </div>
+    <div :class="b24ui.descriptionWrapper({ class: props.b24ui?.descriptionWrapper })">
+      <div :class="b24ui.descriptionAngle({ class: props.b24ui?.descriptionAngle })">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="12"
+          viewBox="0 0 14 12"
+          fill="none"
+        >
+          <path
+            :class="b24ui.descriptionBg({ class: props.b24ui?.descriptionBg })"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.3513 11.1621C11.3492 11.1591 11.3471 11.1562 11.3449 11.1532C8.41055 10.7202 3.75061 9.56187 0.411676 6.46663C-0.404067 5.71042 0.0889447 4.42611 1.14665 4.08179C3.50511 3.31403 5.56665 2.10552 7.2199 0.897773L7.23071 0.893616L8.27368 0.163147L10.7925 5.46165L13.8677 11.5454L11.3513 11.1621Z"
+          /><path
+            :class="b24ui.descriptionBorder({ class: props.b24ui?.descriptionBorder })"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.4909 10.1639C11.7603 10.2036 12.0018 10.3515 12.1597 10.5733C12.3534 10.8456 12.5531 11.1134 12.7585 11.3765L11.3513 11.1621C11.3492 11.1591 11.3471 11.1561 11.3449 11.1531C8.41055 10.7202 3.75061 9.56187 0.411676 6.46662C-0.404067 5.71041 0.0889447 4.4261 1.14665 4.08178C3.50511 3.31403 5.56665 2.10551 7.2199 0.897764L7.23071 0.893607L8.16412 0.239868C8.18419 0.40792 8.20611 0.57539 8.22987 0.742259C8.28188 1.1077 8.12836 1.47208 7.8305 1.6901C6.11459 2.94612 3.95168 4.2203 1.45619 5.03267C1.22829 5.10686 1.07777 5.27921 1.02492 5.43712C1.00004 5.51147 1.00122 5.56804 1.00948 5.60492C1.01647 5.63618 1.03368 5.67964 1.09152 5.73326C4.20493 8.61944 8.61693 9.73979 11.4909 10.1639Z"
+          /></svg>
+      </div>
+      <div :class="b24ui.description({ class: props.b24ui?.description })">
+        <slot>
+          {{ description }}
+        </slot>
+      </div>
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/Alert.vue

@@ -0,0 +1,136 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/alert'
+import { tv } from '../utils/tv'
+import type { AvatarProps, ButtonProps, IconComponent } from '../types'
+
+const appConfigAlert = _appConfig as AppConfig & { b24ui: { alert: Partial<typeof theme> } }
+
+const alert = tv({ extend: tv(theme), ...(appConfigAlert.b24ui?.alert || {}) })
+
+type AlertVariants = VariantProps<typeof alert>
+
+export interface AlertProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  title?: string
+  description?: string
+  icon?: IconComponent
+  avatar?: AvatarProps
+  color?: AlertVariants['color']
+  size?: AlertVariants['size']
+  /**
+   * Display a list of actions:
+   * - under the title and description if multiline
+   * - next to the close button if not multiline
+   * `{ size: 'xs' }`{lang="ts-type"}
+   */
+  actions?: ButtonProps[]
+  /**
+   * Display a close button to dismiss the alert.
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+   * @emits 'update:open'
+   * @defaultValue false
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue icons.close
+   */
+  closeIcon?: IconComponent
+  class?: any
+  b24ui?: Partial<typeof alert.slots>
+}
+
+export interface AlertEmits {
+  (e: 'update:open', value: boolean): void
+}
+
+export interface AlertSlots {
+  leading(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  actions(props?: {}): any
+  close(props: { b24ui: any }): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useLocale } from '../composables/useLocale'
+import icons from '../dictionary/icons'
+import B24Avatar from './Avatar.vue'
+import B24Button from './Button.vue'
+
+const props = defineProps<AlertProps>()
+const emits = defineEmits<AlertEmits>()
+const slots = defineSlots<AlertSlots>()
+
+const { t } = useLocale()
+
+const multiline = computed(() => !!props.title && !!props.description)
+
+const b24ui = computed(() => alert({
+  color: props.color,
+  size: props.size
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root], multiline })">
+    <slot name="leading">
+      <B24Avatar v-if="avatar" :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+      <Component
+        :is="icon"
+        v-if="icon"
+        :class="b24ui.icon({ class: props.b24ui?.icon })"
+      />
+    </slot>
+
+    <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+      <div v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <div v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </div>
+
+      <div v-if="multiline && actions?.length" :class="b24ui.actions({ class: props.b24ui?.actions, multiline: true })">
+        <slot name="actions">
+          <B24Button v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="(!multiline && actions?.length) || close" :class="b24ui.actions({ class: props.b24ui?.actions, multiline: false })">
+      <template v-if="!multiline">
+        <slot name="actions">
+          <B24Button v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </template>
+
+      <slot name="close" :b24ui="b24ui">
+        <B24Button
+          v-if="close"
+          :icon="closeIcon || icons.close"
+          size="xs"
+          color="link"
+          :aria-label="t('alert.close')"
+          v-bind="typeof close === 'object' ? close : undefined"
+          :class="b24ui.close({ class: props.b24ui?.close })"
+          @click="emits('update:open', false)"
+        />
+      </slot>
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/App.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
+import { localeContextInjectionKey } from '../composables/useLocale'
+import type { ToasterProps, Locale } from '../types'
+
+export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
+  tooltip?: TooltipProviderProps
+  toaster?: ToasterProps | null
+  locale?: Locale
+}
+
+export interface AppSlots {
+  default(props?: {}): any
+}
+
+export default {
+  name: 'App'
+}
+</script>
+
+<script setup lang="ts">
+import { toRef, useId, provide } from 'vue'
+import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import B24Toaster from './Toaster.vue'
+// import B24ModalProvider from './ModalProvider.vue'
+// import B24SlideoverProvider from './SlideoverProvider.vue'
+
+const props = defineProps<AppProps>()
+defineSlots<AppSlots>()
+
+const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
+const tooltipProps = toRef(() => props.tooltip)
+const toasterProps = toRef(() => props.toaster)
+
+const locale = toRef(() => props.locale)
+provide(localeContextInjectionKey, locale)
+</script>
+
+<template>
+  <ConfigProvider :use-id="() => (useId() as string)" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
+    <TooltipProvider v-bind="tooltipProps">
+      <B24Toaster v-if="toaster !== null" v-bind="toasterProps">
+        <slot />
+      </B24Toaster>
+      <slot v-else />
+    </TooltipProvider>
+
+    <!-- B24ModalProvider / -->
+    <!-- B24SlideoverProvider / -->
+  </ConfigProvider>
+</template>

package/dist/runtime/components/Avatar.vue

@@ -0,0 +1,118 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AvatarFallbackProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/avatar'
+import { tv } from '../utils/tv'
+import type { IconComponent } from '../types'
+
+const appConfigAvatar = _appConfig as AppConfig & { b24ui: { avatar: Partial<typeof theme> } }
+
+const avatar = tv({ extend: tv(theme), ...(appConfigAvatar.b24ui?.avatar || {}) })
+
+type AvatarVariants = VariantProps<typeof avatar>
+
+export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'span'
+   */
+  as?: any
+  src?: string
+  alt?: string
+  icon?: IconComponent
+  text?: string
+  size?: AvatarVariants['size']
+  class?: any
+  b24ui?: Partial<typeof avatar.slots>
+}
+
+export interface AvatarSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, useAttrs, onMounted } from 'vue'
+import { AvatarRoot, AvatarFallback, useForwardProps } from 'reka-ui'
+import { reactivePick, useImage } from '@vueuse/core'
+import ImageComponent from '#build/b24ui-image-component'
+import { useAvatarGroup } from '../composables/useAvatarGroup'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
+const attrs = useAttrs()
+
+const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
+
+const fallback = computed(() => props.text || (props.alt || '')
+  .replace(/[+\-*)(}\][{]/g, '')
+  .split(' ')
+  .map(word => word.charAt(0))
+  .join('')
+  .substring(0, 2)
+)
+
+const imageLoaded = ref(false)
+
+const { size } = useAvatarGroup(props)
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => avatar({
+  size: size.value
+}))
+
+const sizePx = computed(() => ({
+  '3xs': 10,
+  '2xs': 14,
+  'xs': 18,
+  'sm': 22,
+  'md': 32,
+  'lg': 42,
+  'xl': 48,
+  '2xl': 60,
+  '3xl': 94
+})[props.size || 'md'])
+
+// Reproduces Reka UI's [AvatarImage](https://reka-ui.com/docs/components/avatar#image) component behavior which cannot be used with NuxtImg component
+onMounted(() => {
+  if (!props.src || (ImageComponent as unknown as string) !== 'img') {
+    return
+  }
+
+  const { then } = useImage({ ...props, ...attrs, src: props.src! })
+
+  then((img) => {
+    if (img.isReady.value) {
+      imageLoaded.value = true
+    }
+  })
+})
+</script>
+
+<template>
+  <AvatarRoot :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <component
+      :is="ImageComponent"
+      v-if="src"
+      v-show="imageLoaded"
+      role="img"
+      :src="src"
+      :alt="alt"
+      :width="sizePx"
+      :height="sizePx"
+      v-bind="attrs"
+      :class="b24ui.image({ class: props.b24ui?.image })"
+      @load="imageLoaded = true"
+    />
+
+    <AvatarFallback v-if="!imageLoaded" as-child v-bind="{ ...fallbackProps, ...$attrs }">
+      <slot>
+        <Component :is="icon" v-if="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
+        <span v-else :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
+      </slot>
+    </AvatarFallback>
+  </AvatarRoot>
+</template>

package/dist/runtime/components/AvatarGroup.vue

@@ -0,0 +1,99 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/avatar-group'
+import { tv } from '../utils/tv'
+
+const appConfigAvatarGroup = _appConfig as AppConfig & { b24ui: { avatarGroup: Partial<typeof theme> } }
+
+const avatarGroup = tv({ extend: tv(theme), ...(appConfigAvatarGroup.b24ui?.avatarGroup || {}) })
+
+type AvatarGroupVariants = VariantProps<typeof avatarGroup>
+
+export interface AvatarGroupProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  size?: AvatarGroupVariants['size']
+  /**
+   * The maximum number of avatars to display.
+   */
+  max?: number | string
+  class?: any
+  b24ui?: Partial<typeof avatarGroup.slots>
+}
+
+export interface AvatarGroupSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { Primitive } from 'reka-ui'
+import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
+import B24Avatar from './Avatar.vue'
+
+const props = defineProps<AvatarGroupProps>()
+const slots = defineSlots<AvatarGroupSlots>()
+
+const b24ui = computed(() => avatarGroup({
+  size: props.size
+}))
+
+const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
+
+const children = computed(() => {
+  let children = slots.default?.()
+  if (children?.length) {
+    children = children.flatMap((child: any) => {
+      if (typeof child.type === 'symbol') {
+        // `v-if="false"` or commented node
+        if (typeof child.children === 'string') {
+          return
+        }
+
+        return child.children
+      }
+
+      return child
+    }).filter(Boolean)
+  }
+
+  return children || []
+})
+
+const visibleAvatars = computed(() => {
+  if (!children.value.length) {
+    return []
+  }
+
+  if (!max.value || max.value <= 0) {
+    return [...children.value]
+  }
+
+  return [...children.value].slice(0, max.value)
+})
+
+const hiddenCount = computed(() => {
+  if (!children.value.length) {
+    return 0
+  }
+
+  return children.value.length - visibleAvatars.value.length
+})
+
+provide(avatarGroupInjectionKey, computed(() => ({
+  size: props.size
+})))
+</script>
+
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="b24ui.base({ class: props.b24ui?.base })" />
+    <B24Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="b24ui.base({ class: props.b24ui?.base })" />
+  </Primitive>
+</template>