@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

package/dist/runtime/air-design-tokens/index.css

@@ -1 +1 @@
-@import "./001_b24_global.css";@import "./003_b24_context_light.css";@import "./004_b24_context_dark.css";@import "./005_b24_context_edge-light.css";@import "./006_b24_context_edge-dark.css";@import "./007_b24_global.css";@import "./008_ui_global.css";@import "./009_b24_tools.css";@import "./components/popup.css";@import "./components/scrollbar.css";@import "./components/navigation-menu.css";@import "./components/badge-counter.css";@import "./components/button.css";
+@import "./001_b24_global.css";@import "./003_b24_context_light.css";@import "./004_b24_context_dark.css";@import "./005_b24_context_edge-light.css";@import "./006_b24_context_edge-dark.css";@import "./013_b24_mobile_light.css";@import "./014_b24_mobile_dark.css";@import "./015_b24_mobile_edge-light.css";@import "./016_b24_mobile_edge-dark.css";@import "./023_b24_desktop_light.css";@import "./024_b24_desktop_dark.css";@import "./025_b24_desktop_edge-light.css";@import "./026_b24_desktop_edge-dark.css";@import "./007_b24_global.css";@import "./008_ui_global.css";@import "./009_b24_tools.css";@import "./components/popup.css";@import "./components/scrollbar.css";@import "./components/navigation-menu.css";@import "./components/badge-counter.css";@import "./components/button.css";

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

@@ -1,4 +1,5 @@
 import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/accordion';
 import type { IconComponent } from '../types';
@@ -57,17 +58,17 @@ type SlotProps<T extends AccordionItem> = (props: {
     index: number;
     open: boolean;
     b24ui: Accordion['b24ui'];
-}) => any;
+}) => VNode[];
 export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
-    leading: SlotProps<T>;
-    default(props: {
+    leading?: SlotProps<T>;
+    default?(props: {
         item: T;
         index: number;
         open: boolean;
-    }): any;
-    trailing: SlotProps<T>;
-    content: SlotProps<T>;
-    body: SlotProps<T>;
+    }): VNode[];
+    trailing?: SlotProps<T>;
+    content?: SlotProps<T>;
+    body?: SlotProps<T>;
 } & DynamicSlots<T, 'body', {
     index: number;
     open: boolean;

package/dist/runtime/components/Accordion.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -28,6 +29,7 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("accordion", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "unmountOnHide"), emits);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordion || {} })({
   disabled: props.disabled
@@ -35,7 +37,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :type="type" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" :type="type" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
@@ -43,23 +45,23 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
       :value="get(item, props.valueKey) ?? String(index)"
       :disabled="item.disabled"
       data-slot="item"
-      :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
+      :class="b24ui.item({ class: [uiProp?.item, item.b24ui?.item, item.class] })"
     >
-      <AccordionHeader as="div" data-slot="header" :class="b24ui.header({ class: [props.b24ui?.header, item.b24ui?.header] })">
-        <AccordionTrigger data-slot="trigger" :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger], disabled: item.disabled })">
+      <AccordionHeader as="div" data-slot="header" :class="b24ui.header({ class: [uiProp?.header, item.b24ui?.header] })">
+        <AccordionTrigger data-slot="trigger" :class="b24ui.trigger({ class: [uiProp?.trigger, item.b24ui?.trigger], disabled: item.disabled })">
           <slot name="leading" :item="item" :index="index" :open="open" :b24ui="b24ui">
             <Component
               :is="item.icon"
               v-if="item.icon"
               data-slot="leadingIcon"
-              :class="b24ui.leadingIcon({ class: [props.b24ui?.leadingIcon, item?.b24ui?.leadingIcon] })"
+              :class="b24ui.leadingIcon({ class: [uiProp?.leadingIcon, item?.b24ui?.leadingIcon] })"
             />
           </slot>
 
           <span
             v-if="get(item, props.labelKey) || !!slots.default"
             data-slot="label"
-            :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })"
+            :class="b24ui.label({ class: [uiProp?.label, item.b24ui?.label] })"
           >
             <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
           </span>
@@ -68,7 +70,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
             <Component
               :is="item.trailingIcon || trailingIcon || icons.chevronDown"
               data-slot="trailingIcon"
-              :class="b24ui.trailingIcon({ class: [props.b24ui?.trailingIcon, item.b24ui?.trailingIcon] })"
+              :class="b24ui.trailingIcon({ class: [uiProp?.trailingIcon, item.b24ui?.trailingIcon] })"
             />
           </slot>
         </AccordionTrigger>
@@ -77,7 +79,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
       <AccordionContent
         v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]"
         data-slot="content"
-        :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] })"
+        :class="b24ui.content({ class: [uiProp?.content, item.b24ui?.content] })"
       >
         <slot
           :name="item.slot || 'content'"
@@ -86,7 +88,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
           :open="open"
           :b24ui="b24ui"
         >
-          <div data-slot="body" :class="b24ui.body({ class: [props.b24ui?.body, item.b24ui?.body] })">
+          <div data-slot="body" :class="b24ui.body({ class: [uiProp?.body, item.b24ui?.body] })">
             <slot
               :name="item.slot ? `${item.slot}-body` : 'body'"
               :item="item"

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

@@ -1,4 +1,5 @@
 import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/accordion';
 import type { IconComponent } from '../types';
@@ -57,17 +58,17 @@ type SlotProps<T extends AccordionItem> = (props: {
     index: number;
     open: boolean;
     b24ui: Accordion['b24ui'];
-}) => any;
+}) => VNode[];
 export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
-    leading: SlotProps<T>;
-    default(props: {
+    leading?: SlotProps<T>;
+    default?(props: {
         item: T;
         index: number;
         open: boolean;
-    }): any;
-    trailing: SlotProps<T>;
-    content: SlotProps<T>;
-    body: SlotProps<T>;
+    }): VNode[];
+    trailing?: SlotProps<T>;
+    content?: SlotProps<T>;
+    body?: SlotProps<T>;
 } & DynamicSlots<T, 'body', {
     index: number;
     open: boolean;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/advice';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
@@ -18,10 +19,10 @@ export interface AdviceProps extends Omit<UseComponentIconsProps, 'loading' | 't
     b24ui?: Advice['slots'];
 }
 export interface AdviceSlots {
-    leading(props: {
+    default?(props?: {}): VNode[];
+    leading?(props: {
         b24ui: Advice['b24ui'];
-    }): any;
-    default(props?: {}): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Advice.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/advice";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
@@ -21,6 +22,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("advice", props);
 const { isLeading, leadingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: false }))
 );
@@ -30,27 +32,27 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.advice
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: uiProp?.leading })">
       <slot name="leading" :b24ui="b24ui">
         <Component
           :is="leadingIconName"
           v-if="isLeading && leadingIconName"
           data-slot="leadingIcon"
-          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
         />
         <B24Avatar
           v-else-if="!!avatar"
-          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+          :size="uiProp?.leadingAvatarSize || b24ui.leadingAvatarSize()"
           v-bind="avatar"
           data-slot="leadingAvatar"
-          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
-          :b24ui="{ icon: props.b24ui?.leadingAvatarIcon || b24ui.leadingAvatarIcon() }"
+          :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
+          :b24ui="{ icon: uiProp?.leadingAvatarIcon || b24ui.leadingAvatarIcon() }"
         />
       </slot>
     </div>
-    <div data-slot="descriptionWrapper" :class="b24ui.descriptionWrapper({ class: props.b24ui?.descriptionWrapper })">
-      <div data-slot="descriptionAngle" :class="b24ui.descriptionAngle({ class: props.b24ui?.descriptionAngle })">
+    <div data-slot="descriptionWrapper" :class="b24ui.descriptionWrapper({ class: uiProp?.descriptionWrapper })">
+      <div data-slot="descriptionAngle" :class="b24ui.descriptionAngle({ class: uiProp?.descriptionAngle })">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="14"
@@ -60,19 +62,19 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.advice
         >
           <path
             data-slot="descriptionBg"
-            :class="b24ui.descriptionBg({ class: props.b24ui?.descriptionBg })"
+            :class="b24ui.descriptionBg({ class: uiProp?.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
             data-slot="descriptionBorder"
-            :class="b24ui.descriptionBorder({ class: props.b24ui?.descriptionBorder })"
+            :class="b24ui.descriptionBorder({ class: uiProp?.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 data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <div data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
         <slot>
           {{ description }}
         </slot>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/advice';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
@@ -18,10 +19,10 @@ export interface AdviceProps extends Omit<UseComponentIconsProps, 'loading' | 't
     b24ui?: Advice['slots'];
 }
 export interface AdviceSlots {
-    leading(props: {
+    default?(props?: {}): VNode[];
+    leading?(props: {
         b24ui: Advice['b24ui'];
-    }): any;
-    default(props?: {}): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/alert';
 import type { AvatarProps, ButtonProps, IconComponent, LinkPropsKeys } from '../types';
@@ -63,15 +64,15 @@ export interface AlertEmits {
     'update:open': [value: boolean];
 }
 export interface AlertSlots {
-    leading(props: {
+    leading?(props: {
         b24ui: Alert['b24ui'];
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    actions(props?: {}): any;
-    close(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
         b24ui: Alert['b24ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Alert.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/alert";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -31,6 +32,7 @@ const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("alert", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert || {} })({
   color: props.color,
   inverted: Boolean(props.inverted),
@@ -41,37 +43,37 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert |
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot name="leading" :b24ui="b24ui">
       <Component
         :is="icon"
         v-if="icon"
         data-slot="icon"
-        :class="b24ui.icon({ class: props.b24ui?.icon })"
+        :class="b24ui.icon({ class: uiProp?.icon })"
       />
-      <B24Avatar v-else-if="avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+      <B24Avatar v-else-if="avatar" :size="uiProp?.avatarSize || b24ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="b24ui.avatar({ class: uiProp?.avatar })" />
     </slot>
 
-    <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-      <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+    <div data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+      <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
         <slot name="title">
           {{ title }}
         </slot>
       </div>
-      <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
         <slot name="description">
           {{ description }}
         </slot>
       </div>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions })">
         <slot name="actions">
           <B24Button v-for="(action, index) in actions" :key="index" size="sm" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <B24Button v-for="(action, index) in actions" :key="index" size="sm" v-bind="action" />
@@ -87,7 +89,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert |
           :aria-label="t('alert.close')"
           v-bind="typeof close === 'object' ? close : {}"
           data-slot="close"
-          :class="b24ui.close({ class: props.b24ui?.close })"
+          :class="b24ui.close({ class: uiProp?.close })"
           @click="emits('update:open', false)"
         />
       </slot>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/alert';
 import type { AvatarProps, ButtonProps, IconComponent, LinkPropsKeys } from '../types';
@@ -63,15 +64,15 @@ export interface AlertEmits {
     'update:open': [value: boolean];
 }
 export interface AlertSlots {
-    leading(props: {
+    leading?(props: {
         b24ui: Alert['b24ui'];
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    actions(props?: {}): any;
-    close(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
         b24ui: Alert['b24ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { ToasterProps, Locale, Messages } from '../types';
 export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'locale'> {
     tooltip?: TooltipProviderProps;
@@ -7,7 +8,7 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
     portal?: boolean | string | HTMLElement;
 }
 export interface AppSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { ToasterProps, Locale, Messages } from '../types';
 export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'locale'> {
     tooltip?: TooltipProviderProps;
@@ -7,7 +8,7 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
     portal?: boolean | string | HTMLElement;
 }
 export interface AppSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/avatar';
 import type { IconComponent, ChipProps } from '../types';
@@ -31,7 +32,7 @@ export interface AvatarProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes,
     b24ui?: Avatar['slots'];
 }
 export interface AvatarSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Avatar.vue

@@ -8,6 +8,7 @@ import { Primitive, Slot } from "reka-ui";
 import { defu } from "defu";
 import { useAppConfig } from "#imports";
 import ImageComponent from "#build/b24ui-image-component";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 import B24Chip from "./Chip.vue";
@@ -34,6 +35,7 @@ const fallback = computed(
   () => props.text || (props.alt || "").replace(/[+\-*)(}\][{]/g, "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2)
 );
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("avatar", props);
 const { size } = useAvatarGroup(props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.avatar || {} })({
   size: size.value
@@ -66,7 +68,7 @@ function onError() {
     :as="as.root"
     v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     :style="props.style"
   >
     <component
@@ -78,14 +80,14 @@ function onError() {
       :height="sizePx"
       v-bind="$attrs"
       data-slot="image"
-      :class="b24ui.image({ class: props.b24ui?.image })"
+      :class="b24ui.image({ class: uiProp?.image })"
       @error="onError"
     />
 
     <Slot v-else v-bind="$attrs">
       <slot>
-        <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-        <span v-else data-slot="fallback" :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || "\xA0" }}</span>
+        <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: uiProp?.icon })" />
+        <span v-else data-slot="fallback" :class="b24ui.fallback({ class: uiProp?.fallback })">{{ fallback || "\xA0" }}</span>
       </slot>
     </Slot>
   </component>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/avatar';
 import type { IconComponent, ChipProps } from '../types';
@@ -31,7 +32,7 @@ export interface AvatarProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes,
     b24ui?: Avatar['slots'];
 }
 export interface AvatarSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/avatar-group';
 import type { ComponentConfig } from '../types/tv';
@@ -20,7 +21,7 @@ export interface AvatarGroupProps {
     b24ui?: AvatarGroup['slots'];
 }
 export interface AvatarGroupSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/AvatarGroup.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/avatar-group";
 import { computed, provide } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { avatarGroupInjectionKey } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
@@ -18,6 +19,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("avatarGroup", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.avatarGroup || {} })({
   size: props.size
 }));
@@ -58,8 +60,8 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })" />
-    <B24Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })" />
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" data-slot="base" :class="b24ui.base({ class: uiProp?.base })" />
+    <B24Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-slot="base" :class="b24ui.base({ class: uiProp?.base })" />
   </Primitive>
 </template>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/avatar-group';
 import type { ComponentConfig } from '../types/tv';
@@ -20,7 +21,7 @@ export interface AvatarGroupProps {
     b24ui?: AvatarGroup['slots'];
 }
 export interface AvatarGroupSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/badge';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
@@ -41,15 +42,15 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
     b24ui?: Badge['slots'];
 }
 export interface BadgeSlots {
-    leading(props: {
+    leading?(props: {
         b24ui: Badge['b24ui'];
-    }): any;
-    default(props: {
+    }): VNode[];
+    default?(props: {
         b24ui: Badge['b24ui'];
-    }): any;
-    trailing(props: {
+    }): VNode[];
+    trailing?(props: {
         b24ui: Badge['b24ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;