@byyuurin/ui 0.0.11 → 0.2.0

package/dist/runtime/components/Alert.vue

@@ -1,82 +1,102 @@
 <script>
-
+import theme from "#build/ui/alert";
 </script>
 
 <script setup>
 import { Primitive } from "reka-ui";
 import { computed } from "vue";
+import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { useTheme } from "../composables/useTheme";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
 import Button from "./Button.vue";
+import Icon from "./Icon.vue";
 const props = defineProps({
   as: { type: null, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
-  icon: { type: String, required: false },
-  variant: { type: null, required: false, default: "solid" },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
   actions: { type: Array, required: false },
-  close: { type: [Object, Boolean], required: false },
-  closeIcon: { type: String, required: false },
-  class: { type: null, required: false },
-  ui: { type: null, required: false }
+  close: { type: [Boolean, Object], required: false },
+  closeIcon: { type: [String, Object], required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
 });
 const emit = defineEmits(["update:open"]);
 const slots = defineSlots();
 const { t } = useLocale();
-const { theme, generateStyle } = useTheme();
-const style = computed(() => generateStyle("alert", {
-  ...props,
-  title: !!props.title || !!slots.title
-}));
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.alert));
+  return styler({
+    ...props,
+    title: !!props.title || !!slots.title
+  });
+});
 </script>
 
 <template>
   <Primitive
     :as="props.as"
-    :class="style.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :data-orientation="props.orientation"
     data-part="root"
   >
-    <slot name="leading">
-      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })" data-part="icon"></span>
+    <slot name="leading" :ui="ui">
+      <Avatar
+        v-if="props.avatar"
+        :size="props.ui?.avatarSize || ui.avatarSize()"
+        v-bind="props.avatar"
+        :class="ui.avatar({ class: props.ui?.avatar })"
+        data-part="avatar"
+      />
+      <Icon
+        v-else-if="props.icon"
+        :name="props.icon"
+        :class="ui.icon({ class: props.ui?.icon })"
+        data-part="icon"
+      />
     </slot>
 
-    <div :class="style.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <div v-if="props.title || slots.title" :class="style.title({ class: props.ui?.title })" data-part="title">
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <div v-if="props.title || slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
         <slot name="title">
           {{ props.title }}
         </slot>
       </div>
-      <div v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })" data-part="description">
+      <div v-if="props.description || slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
         <slot name="description">
           {{ props.description }}
         </slot>
       </div>
 
-      <div v-if="props.orientation === 'vertical' && props.actions?.length" :class="style.actions({ class: props.ui?.actions })" data-part="actions">
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="actions">
         <slot name="actions">
           <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="props.orientation === 'horizontal' && props.actions?.length || props.close" :class="style.actions({ class: props.ui?.actions, orientation: 'horizontal' })" data-part="actions">
-      <template v-if="props.orientation === 'horizontal' && props.actions?.length">
+    <div v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions) || props.close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })" data-part="actions">
+      <template v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions)">
         <slot name="actions">
           <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </template>
 
-      <slot name="close" :ui="props.ui">
+      <slot name="close" :ui="ui">
         <Button
           v-if="props.close"
-          :icon="props.closeIcon || theme.app.icons.close"
-          size="md"
+          :icon="props.closeIcon || appConfig.ui.icons.close"
+          color="neutral"
           variant="link"
           :aria-label="t('alert.close')"
-          v-bind="typeof props.close === 'object' ? props.close : void 0"
-          :class="style.close({ class: props.ui?.close })"
+          v-bind="typeof props.close === 'object' ? props.close : {}"
+          :class="ui.close({ class: props.ui?.close })"
           data-part="close"
           @click="emit('update:open', false)"
         />

package/dist/runtime/components/Alert.vue.d.ts

@@ -1,21 +1,10 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { PrimitiveProps } from 'reka-ui';
-import type { alert } from '../theme/index.js';
-import type { ButtonProps, ComponentAttrs } from '../types/index.js';
-export interface AlertEmits {
-    'update:open': [value: boolean];
-}
-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> {
+import theme from '#build/ui/alert';
+import type { AvatarProps, ButtonProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface AlertProps extends ComponentBaseProps {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -23,9 +12,17 @@ export interface AlertProps extends ComponentAttrs<typeof alert> {
     as?: PrimitiveProps['as'];
     title?: string;
     description?: string;
-    icon?: string;
-    variant?: AlertVariants['variant'];
-    orientation?: AlertVariants['orientation'];
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "solid" */
+    variant?: ThemeVariants['variant'];
+    /**
+     * The orientation between the content and the actions.
+     * @default "vertical"
+     */
+    orientation?: ThemeVariants['orientation'];
     /**
      * Display a list of actions:
      * - under the title and description when orientation is `vertical`
@@ -36,21 +33,36 @@ export interface AlertProps extends ComponentAttrs<typeof alert> {
      * Display a close button to dismiss the alert.
      * @default false
      */
-    close?: ButtonProps | boolean;
+    close?: boolean | Partial<ButtonProps>;
     /**
      * The icon displayed in the close button.
      * @default app.icons.close
      */
-    closeIcon?: string;
+    closeIcon?: IconProps['name'];
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface AlertEmits {
+    'update:open': [open: boolean];
+}
+export interface AlertSlots {
+    leading: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    title: StaticSlot;
+    description: StaticSlot;
+    actions: StaticSlot;
+    close: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
-    variant: "solid" | "outline" | "soft" | "soft-outline";
     orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/App.vue

@@ -6,15 +6,15 @@
 import { reactivePick } from "@vueuse/core";
 import { ConfigProvider, TooltipProvider, useForwardProps } from "reka-ui";
 import { toRef, useId } from "vue";
-import { provideLocaleContext, provideThemeExtension, provideUnoConfig } from "../app/injections";
+import { provideLocaleContext } from "../composables/useLocale";
+import { providePortalTarget } from "../composables/usePortal";
 import OverlayProvider from "./OverlayProvider.vue";
 import ToastProvider from "./ToastProvider.vue";
 const props = defineProps({
-  unoConfig: { type: Object, required: false, default: () => ({}) },
-  ui: { type: null, required: false, default: () => ({}) },
-  toaster: { type: Object, required: false },
+  toaster: { type: null, required: false },
   tooltip: { type: Object, required: false },
   locale: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: "body" },
   scrollBody: { type: [Boolean, Object], required: false },
   nonce: { type: String, required: false }
 });
@@ -22,20 +22,21 @@ defineSlots();
 const configProviderProps = useForwardProps(reactivePick(props, "scrollBody"));
 const tooltipProps = toRef(() => props.tooltip);
 const toastProviderProps = toRef(() => props.toaster);
-provideUnoConfig(() => props.unoConfig);
-provideThemeExtension(() => props.ui);
 const locale = toRef(() => props.locale);
 provideLocaleContext(locale);
+const portal = toRef(() => props.portal);
+providePortalTarget(portal);
 </script>
 
 <template>
-  <ConfigProvider :use-id="useId" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
+  <ConfigProvider :use-id="() => useId()" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
     <TooltipProvider v-bind="tooltipProps">
       <ToastProvider v-if="props.toaster !== null" v-bind="toastProviderProps">
         <slot></slot>
       </ToastProvider>
       <slot v-else></slot>
+
+      <OverlayProvider />
     </TooltipProvider>
-    <OverlayProvider />
   </ConfigProvider>
 </template>

package/dist/runtime/components/App.vue.d.ts

@@ -1,24 +1,26 @@
-import type { UserConfig } from '@unocss/core';
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
-import type { Messages, ThemeExtension, ToastProviderProps } from '../types/index.js';
-import type { Locale } from '../utils/index.js';
-export interface AppSlots {
-    default: (props?: {}) => any;
-}
-export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
-    unoConfig?: UserConfig;
-    ui?: ThemeExtension;
-    toaster?: ToastProviderProps;
+import type { Locale, Messages, ToastProviderProps } from '../types';
+import type { MaybeNull, StaticSlot } from '../types/utils';
+export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
+    toaster?: MaybeNull<ToastProviderProps>;
     tooltip?: TooltipProviderProps;
-    locale?: Locale<Messages>;
+    locale?: Locale<T>;
+    portal?: boolean | string | HTMLElement;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AppProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppProps> & Readonly<{}>, {
-    ui: ThemeExtension;
-    unoConfig: UserConfig;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AppSlots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+export interface AppSlots {
+    default: StaticSlot;
+}
+declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<AppProps<T>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: AppSlots;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/Avatar.vue

@@ -1,50 +1,94 @@
 <script>
-
+import theme from "#build/ui/avatar";
 </script>
 
 <script setup>
-import { AvatarFallback, AvatarImage, AvatarRoot } from "reka-ui";
+import { defu } from "defu";
+import { Primitive } from "reka-ui";
 import { computed, shallowRef, watch } from "vue";
+import ImageComponent from "#build/ui-image-component";
+import { useAppConfig } from "#imports";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
-import { useTheme } from "../composables/useTheme";
+import { cv, merge } from "../utils/style";
+import Chip from "./Chip.vue";
+import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
-  src: { type: String, required: false, default: "" },
+  src: { type: String, required: false },
   alt: { type: String, required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   text: { type: String, required: false },
   size: { type: null, required: false },
+  chip: { type: [Boolean, Object], required: false },
   style: { type: null, required: false },
-  class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+const as = computed(() => {
+  if (typeof props.as === "string" || props.as && "render" in props.as && typeof props.as.render === "function")
+    return { root: props.as };
+  return defu(props.as, { root: "span" });
 });
-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 { size } = useAvatarGroup(props);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.avatar));
+  return styler({
+    ...props,
+    size: size.value
+  });
+});
+const sizePx = computed(() => ({
+  "3xs": 16,
+  "2xs": 20,
+  "xs": 24,
+  "sm": 28,
+  "md": 32,
+  "lg": 36,
+  "xl": 40,
+  "2xl": 44,
+  "3xl": 48
+})[props.size || "md"]);
 const error = shallowRef(false);
 watch(() => props.src, () => {
   if (error.value)
     error.value = false;
 });
+function onError() {
+  error.value = true;
+}
 </script>
 
 <template>
-  <AvatarRoot :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" :data-part="$attrs['data-part'] ?? 'root'" :style="props.style">
-    <AvatarImage
+  <component
+    :is="props.chip ? Chip : Primitive"
+    :as="as.root"
+    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    :style="props.style"
+  >
+    <component
+      :is="as.img || ImageComponent"
+      v-if="props.src && !error"
       :src="props.src"
       :alt="props.alt"
-      :class="style.image({ class: props.ui?.image })"
+      :width="sizePx"
+      :height="sizePx"
+      v-bind="$attrs"
+      :class="ui.image({ class: props.ui?.image })"
       data-part="image"
+      @error="onError"
     />
 
-    <AvatarFallback as-child>
-      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })" data-part="icon"></span>
-      <span v-else :class="style.fallback({ class: props.ui?.fallback })" data-part="fallback">{{ fallback || "\xA0" }}</span>
-    </AvatarFallback>
-  </AvatarRoot>
+    <slot v-else v-bind="$attrs">
+      <Icon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" data-part="icon" />
+      <span v-else :class="ui.fallback({ class: props.ui?.fallback })" data-part="fallback">
+        <template v-if="fallback">{{ fallback }}</template>
+        <template v-else>&nbsp;</template>
+      </span>
+    </slot>
+  </component>
 </template>

package/dist/runtime/components/Avatar.vue.d.ts

@@ -1,25 +1,39 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
-import type { AvatarRootProps } from 'reka-ui';
-import type { avatar } from '../theme/index.js';
-import type { ComponentAttrs } from '../types/index.js';
-export interface AvatarSlots {
-    default?: (props?: {}) => any;
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/avatar';
+import type { ChipProps, ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+interface InnerAs {
+    root?: PrimitiveProps['as'];
+    img?: PrimitiveProps['as'];
 }
-type AvatarVariants = VariantProps<typeof avatar>;
-export interface AvatarProps extends ComponentAttrs<typeof avatar> {
+export interface AvatarProps extends ComponentBaseProps {
     /**
      * The element or component this component should render as.
      * @default "span"
      */
-    as?: AvatarRootProps['as'];
+    as?: PrimitiveProps['as'] | InnerAs;
     src?: string;
     alt?: string;
-    icon?: string;
+    icon?: IconProps['name'];
     text?: string;
-    size?: AvatarVariants['size'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    chip?: boolean | ChipProps;
     style?: string | HTMLElement['style'];
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface AvatarSlots {
+    default: StaticSlot;
 }
-declare const _default: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
-    src: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/AvatarGroup.vue

@@ -1,19 +1,20 @@
 <script>
-
+import theme from "#build/ui/avatar-group";
 </script>
 
 <script setup>
 import { Primitive } from "reka-ui";
 import { computed } from "vue";
-import { provideAvatarGroup } from "../app/injections";
-import { useTheme } from "../composables/useTheme";
+import { useAppConfig } from "#imports";
+import { provideAvatarGroup } from "../composables/useAvatarGroup";
+import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 const props = defineProps({
   as: { type: null, required: false },
   size: { type: null, required: false },
   max: { type: [Number, String], required: false },
-  class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
 });
 const slots = defineSlots();
 const max = computed(() => typeof props.max === "string" ? Number.parseInt(props.max, 10) : props.max);
@@ -43,14 +44,17 @@ const hiddenCount = computed(() => {
     return 0;
   return children.value.length - visibleAvatars.value.length;
 });
-const { generateStyle } = useTheme();
-const style = computed(() => generateStyle("avatarGroup", props));
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.avatarGroup));
+  return styler(props);
+});
 provideAvatarGroup(computed(() => props));
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
-    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="style.base({ class: props.ui?.base })" data-part="base" />
-    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="style.base({ class: props.ui?.base })" data-part="base" />
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" data-part="base" />
+    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="ui.base({ class: props.ui?.base })" data-part="base" />
   </Primitive>
 </template>

package/dist/runtime/components/AvatarGroup.vue.d.ts

@@ -1,24 +1,27 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { PrimitiveProps } from 'reka-ui';
-import type { avatarGroup } from '../theme/index.js';
-import type { ComponentAttrs } from '../types/index.js';
-export interface AvatarGroupSlots {
-    default?: (props?: {}) => any;
-}
-type AvatarGroupVariants = VariantProps<typeof avatarGroup>;
-export interface AvatarGroupProps extends ComponentAttrs<typeof avatarGroup> {
+import theme from '#build/ui/avatar-group';
+import type { ComponentBaseProps, ComponentUIProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface AvatarGroupProps extends ComponentBaseProps {
     /**
      * The element or component this component should render as.
      * @default "div"
      */
     as?: PrimitiveProps['as'];
-    size?: AvatarGroupVariants['size'];
+    size?: ThemeVariants['size'];
     /**
      * The maximum number of avatars to display.
      */
     max?: number | string;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface AvatarGroupSlots {
+    default: StaticSlot;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {