@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

package/dist/runtime/components/Badge.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/badge";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { tv } from "../utils/tv";
@@ -30,6 +31,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("badge", props);
 async function onCloseClickWrapper(event) {
   const callbacks = Array.isArray(props.onCloseClick) ? props.onCloseClick : [props.onCloseClick];
   try {
@@ -55,31 +57,31 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
   <Primitive
     :as="as"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
     <Primitive
       :as="as"
       data-slot="wrapper"
-      :class="b24ui.wrapper({ class: props.b24ui?.wrapper })"
+      :class="b24ui.wrapper({ class: uiProp?.wrapper })"
     >
       <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 })"
+          :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
         />
       </slot>
 
       <slot :b24ui="b24ui">
-        <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
+        <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: uiProp?.label })">
           {{ label }}
         </span>
       </slot>
@@ -88,7 +90,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
       <Cross20Icon
         v-if="useClose"
         data-slot="trailingIcon"
-        :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+        :class="b24ui.trailingIcon({ class: uiProp?.trailingIcon })"
         aria-hidden="true"
         @click.stop.prevent="onCloseClickWrapper"
       />

package/dist/runtime/components/Badge.vue.d.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;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/banner';
 import type { ButtonProps, IconComponent, LinkProps, LinkPropsKeys } from '../types';
@@ -48,14 +49,14 @@ export interface BannerProps {
     b24ui?: Banner['slots'];
 }
 export interface BannerSlots {
-    leading(props: {
+    leading?(props: {
         b24ui: Banner['b24ui'];
-    }): any;
-    title(props?: {}): any;
-    actions(props?: {}): any;
-    close(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
         b24ui: Banner['b24ui'];
-    }): any;
+    }): VNode[];
 }
 export interface BannerEmits {
     close: [];

package/dist/runtime/components/Banner.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/banner";
 import { computed, ref, onMounted, useId } from "vue";
 import { Primitive } from "reka-ui";
 import { useHead, 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 slots = defineSlots();
 const emits = defineEmits(["close"]);
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("banner", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.banner || {} })({
   color: props.color,
   to: !!props.to
@@ -89,7 +91,7 @@ function onClose() {
     class="banner"
     :data-banner-id="id"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
     <B24Link
       v-if="to"
@@ -102,21 +104,21 @@ function onClose() {
       <span class="absolute inset-0 " aria-hidden="true" />
     </B24Link>
 
-    <B24Container data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
-      <div data-slot="left" :class="b24ui.left({ class: props.b24ui?.left })" />
+    <B24Container data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <div data-slot="left" :class="b24ui.left({ class: uiProp?.left })" />
 
-      <div data-slot="center" :class="b24ui.center({ class: props.b24ui?.center })">
+      <div data-slot="center" :class="b24ui.center({ class: uiProp?.center })">
         <slot name="leading" :b24ui="b24ui">
-          <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
+          <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: uiProp?.icon })" />
         </slot>
 
-        <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+        <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </div>
 
-        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions })">
           <slot name="actions">
             <B24Button
               v-for="(action, index) in actions"
@@ -129,7 +131,7 @@ function onClose() {
         </div>
       </div>
 
-      <div data-slot="right" :class="b24ui.right({ class: props.b24ui?.right })">
+      <div data-slot="right" :class="b24ui.right({ class: uiProp?.right })">
         <slot name="close" :b24ui="b24ui">
           <B24Button
             v-if="close"
@@ -139,7 +141,7 @@ function onClose() {
             :aria-label="t('banner.close')"
             v-bind="typeof close === 'object' ? close : {}"
             data-slot="close"
-            :class="b24ui.close({ class: props.b24ui?.close })"
+            :class="b24ui.close({ class: uiProp?.close })"
             @click="onClose"
           />
         </slot>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/banner';
 import type { ButtonProps, IconComponent, LinkProps, LinkPropsKeys } from '../types';
@@ -48,14 +49,14 @@ export interface BannerProps {
     b24ui?: Banner['slots'];
 }
 export interface BannerSlots {
-    leading(props: {
+    leading?(props: {
         b24ui: Banner['b24ui'];
-    }): any;
-    title(props?: {}): any;
-    actions(props?: {}): any;
-    close(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
         b24ui: Banner['b24ui'];
-    }): any;
+    }): VNode[];
 }
 export interface BannerEmits {
     close: [];

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/breadcrumb';
 import type { AvatarProps, IconComponent, LinkProps } from '../types';
@@ -42,30 +43,30 @@ type SlotProps<T extends BreadcrumbItem> = (props: {
     index: number;
     active?: boolean;
     b24ui: Breadcrumb['b24ui'];
-}) => any;
+}) => VNode[];
 export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
         index: number;
-        active?: boolean;
-    }) => any;
-    'item-trailing': (props: {
+        active: boolean;
+    }) => VNode[];
+    'item-trailing'?: (props: {
         item: T;
         index: number;
-        active?: boolean;
-    }) => any;
-    'separator': (props: {
+        active: boolean;
+    }) => VNode[];
+    'separator'?: (props: {
         b24ui: Breadcrumb['b24ui'];
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<T, 'leading', {
     index: number;
-    active?: boolean;
+    active: boolean;
     b24ui: Breadcrumb['b24ui'];
 }> & DynamicSlots<T, 'label' | 'trailing', {
     index: number;
-    active?: boolean;
+    active: boolean;
 }>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Breadcrumb.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/breadcrumb";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
@@ -25,22 +26,23 @@ const props = defineProps({
 const slots = defineSlots();
 const { dir } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("breadcrumb", props);
 const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? icons.chevronLeft : icons.chevronRight));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcrumb || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <ol data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
+  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <ol data-slot="list" :class="b24ui.list({ class: uiProp?.list })">
       <template v-for="(item, index) in items" :key="index">
-        <li data-slot="item" :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item] })">
+        <li data-slot="item" :class="b24ui.item({ class: [uiProp?.item, item.b24ui?.item] })">
           <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
             <B24LinkBase
               v-bind="slotProps"
               as="span"
               :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0"
               data-slot="link"
-              :class="b24ui.link({ class: [props.b24ui?.link, item.b24ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: !!item.disabled, to: !!item.to })"
+              :class="b24ui.link({ class: [uiProp?.link, item.b24ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: !!item.disabled, to: !!item.to })"
             >
               <slot
                 :name="item.slot || 'item'"
@@ -60,21 +62,21 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcr
                     :is="item.icon"
                     v-if="item.icon"
                     data-slot="linkLeadingIcon"
-                    :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
+                    :class="b24ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
                   />
                   <B24Avatar
                     v-else-if="item.avatar"
-                    :size="props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()"
+                    :size="uiProp?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()"
                     v-bind="item.avatar"
                     data-slot="linkLeadingAvatar"
-                    :class="b24ui.linkLeadingAvatar({ class: [props.b24ui?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
+                    :class="b24ui.linkLeadingAvatar({ class: [uiProp?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
                   />
                 </slot>
 
                 <span
                   v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
                   data-slot="linkLabel"
-                  :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, item.b24ui?.linkLabel] })"
+                  :class="b24ui.linkLabel({ class: [uiProp?.linkLabel, item.b24ui?.linkLabel] })"
                 >
                   <slot
                     :name="item.slot ? `${item.slot}-label` : 'item-label'"
@@ -97,12 +99,12 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcr
           </B24Link>
         </li>
 
-        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })">
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="b24ui.separator({ class: [uiProp?.separator, item.b24ui?.separator] })">
           <slot name="separator" :b24ui="b24ui">
             <Component
               :is="separatorIcon"
               data-slot="separatorIcon"
-              :class="b24ui.separatorIcon({ class: [props.b24ui?.separatorIcon, item.b24ui?.separatorIcon] })"
+              :class="b24ui.separatorIcon({ class: [uiProp?.separatorIcon, item.b24ui?.separatorIcon] })"
             />
           </slot>
         </li>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/breadcrumb';
 import type { AvatarProps, IconComponent, LinkProps } from '../types';
@@ -42,30 +43,30 @@ type SlotProps<T extends BreadcrumbItem> = (props: {
     index: number;
     active?: boolean;
     b24ui: Breadcrumb['b24ui'];
-}) => any;
+}) => VNode[];
 export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
         index: number;
-        active?: boolean;
-    }) => any;
-    'item-trailing': (props: {
+        active: boolean;
+    }) => VNode[];
+    'item-trailing'?: (props: {
         item: T;
         index: number;
-        active?: boolean;
-    }) => any;
-    'separator': (props: {
+        active: boolean;
+    }) => VNode[];
+    'separator'?: (props: {
         b24ui: Breadcrumb['b24ui'];
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<T, 'leading', {
     index: number;
-    active?: boolean;
+    active: boolean;
     b24ui: Breadcrumb['b24ui'];
 }> & DynamicSlots<T, 'label' | 'trailing', {
     index: number;
-    active?: boolean;
+    active: boolean;
 }>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/button';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
@@ -71,15 +72,15 @@ export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | '
     b24ui?: Button['slots'];
 }
 export interface ButtonSlots {
-    leading(props: {
+    leading?(props: {
         b24ui: Button['b24ui'];
-    }): any;
-    default(props: {
+    }): VNode[];
+    default?(props: {
         b24ui: Button['b24ui'];
-    }): any;
-    trailing(props: {
+    }): VNode[];
+    trailing?(props: {
         b24ui: Button['b24ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Button.vue

@@ -7,6 +7,7 @@ import { computed, ref, inject } from "vue";
 import { defu } from "defu";
 import { useForwardProps } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { formLoadingInjectionKey } from "../composables/useFormField";
@@ -68,6 +69,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("button", props);
 const { orientation, size: buttonSize, noSplit } = useFieldGroup(props);
 const linkProps = useForwardProps(pickLinkProps(props));
 const proxyLinkProps = computed(() => {
@@ -142,7 +144,7 @@ const b24ui = computed(() => tv({
       v-bind="slotProps"
       data-slot="base"
       :class="b24ui.base({
-  class: [props.b24ui?.base, props.class],
+  class: [uiProp?.base, props.class],
   active,
   ...active && activeDepth ? { depth: activeDepth } : {},
   ...active && activeColor ? { color: activeColor } : {}
@@ -152,35 +154,35 @@ const b24ui = computed(() => tv({
       <div
         v-if="isLoading"
         data-slot="baseLoading"
-        :class="b24ui.baseLoading({ class: props.b24ui?.baseLoading, active })"
+        :class="b24ui.baseLoading({ class: uiProp?.baseLoading, active })"
       >
-        <LoaderWaitIcon v-if="useWait" data-slot="baseLoadingWaitIcon" :class="b24ui.baseLoadingWaitIcon({ class: props.b24ui?.baseLoadingWaitIcon })" aria-hidden="true" />
-        <LoaderClockIcon v-else-if="useClock" data-slot="baseLoadingClockIcon" :class="b24ui.baseLoadingClockIcon({ class: props.b24ui?.baseLoadingClockIcon })" aria-hidden="true" />
-        <SpinnerIcon v-else data-slot="baseLoadingSpinnerIcon" :class="b24ui.baseLoadingSpinnerIcon({ class: props.b24ui?.baseLoadingSpinnerIcon })" aria-hidden="true" />
+        <LoaderWaitIcon v-if="useWait" data-slot="baseLoadingWaitIcon" :class="b24ui.baseLoadingWaitIcon({ class: uiProp?.baseLoadingWaitIcon })" aria-hidden="true" />
+        <LoaderClockIcon v-else-if="useClock" data-slot="baseLoadingClockIcon" :class="b24ui.baseLoadingClockIcon({ class: uiProp?.baseLoadingClockIcon })" aria-hidden="true" />
+        <SpinnerIcon v-else data-slot="baseLoadingSpinnerIcon" :class="b24ui.baseLoadingSpinnerIcon({ class: uiProp?.baseLoadingSpinnerIcon })" aria-hidden="true" />
       </div>
       <div
         data-slot="baseLine"
-        :class="[b24ui.baseLine({ class: [props.b24ui?.baseLine] }), isLoading ? 'invisible' : '']"
+        :class="[b24ui.baseLine({ class: [uiProp?.baseLine] }), isLoading ? 'invisible' : '']"
       >
         <slot name="leading" :b24ui="b24ui">
           <Component
             :is="leadingIconName"
             v-if="isLeading && typeof leadingIconName !== 'undefined'"
             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 })"
+            :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
           />
         </slot>
 
         <slot :b24ui="b24ui">
-          <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label, active })">
-            <span data-slot="labelInner" :class="b24ui.labelInner({ class: props.b24ui?.labelInner, active })">
+          <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: uiProp?.label, active })">
+            <span data-slot="labelInner" :class="b24ui.labelInner({ class: uiProp?.labelInner, active })">
               {{ label }}
             </span>
           </span>
@@ -190,7 +192,7 @@ const b24ui = computed(() => tv({
           <ChevronDownSIcon
             v-if="useDropdown"
             data-slot="trailingIcon"
-            :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+            :class="b24ui.trailingIcon({ class: uiProp?.trailingIcon })"
             aria-hidden="true"
           />
         </slot>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/button';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
@@ -71,15 +72,15 @@ export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | '
     b24ui?: Button['slots'];
 }
 export interface ButtonSlots {
-    leading(props: {
+    leading?(props: {
         b24ui: Button['b24ui'];
-    }): any;
-    default(props: {
+    }): VNode[];
+    default?(props: {
         b24ui: Button['b24ui'];
-    }): any;
-    trailing(props: {
+    }): VNode[];
+    trailing?(props: {
         b24ui: Button['b24ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { DateValue } from '@internationalized/date';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/calendar';
@@ -91,13 +92,13 @@ export interface CalendarEmits<R extends boolean, M extends boolean> extends Omi
     'update:modelValue': [date: CalendarModelValue<R, M>];
 }
 export interface CalendarSlots {
-    'heading': (props: {
+    'heading'?: (props: {
         value: string;
-    }) => any;
-    'day': (props: Pick<CalendarCellTriggerProps, 'day'>) => any;
-    'week-day': (props: {
+    }) => VNode[];
+    'day'?: (props: Pick<CalendarCellTriggerProps, 'day'>) => VNode[];
+    'week-day'?: (props: {
         day: string;
-    }) => any;
+    }) => VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Calendar.vue

@@ -9,6 +9,7 @@ import { useForwardPropsEmits } from "reka-ui";
 import { Calendar as SingleCalendar, RangeCalendar } from "reka-ui/namespaced";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -62,6 +63,7 @@ const emits = defineEmits(["update:modelValue", "update:placeholder", "update:va
 defineSlots();
 const { dir, t, locale } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("calendar", props);
 const rootProps = useForwardPropsEmits(reactiveOmit(props, "range", "modelValue", "defaultValue", "color", "size", "monthControls", "yearControls", "class", "b24ui"), emits);
 const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === "rtl" ? icons.chevronDoubleLeft : icons.chevronDoubleRight));
 const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === "rtl" ? icons.chevronLeft : icons.chevronRight));
@@ -96,16 +98,16 @@ const btnSize = computed(() => {
     :model-value="modelValue"
     :default-value="defaultValue"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
-    <Calendar.Header data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+    <Calendar.Header data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
         <B24Button :icon="prevYearIcon" :size="btnSize" color="air-tertiary" v-bind="props.prevYear" />
       </Calendar.Prev>
       <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
         <B24Button :icon="prevMonthIcon" :size="btnSize" color="air-tertiary" v-bind="props.prevMonth" />
       </Calendar.Prev>
-      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="b24ui.heading({ class: props.b24ui?.heading })">
+      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="b24ui.heading({ class: uiProp?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
@@ -117,20 +119,20 @@ const btnSize = computed(() => {
         <B24Button :icon="nextYearIcon" :size="btnSize" color="air-tertiary" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
-    <div data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
+    <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
       <Calendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
         data-slot="grid"
-        :class="b24ui.grid({ class: props.b24ui?.grid })"
+        :class="b24ui.grid({ class: uiProp?.grid })"
       >
         <Calendar.GridHead>
-          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="b24ui.gridWeekDaysRow({ class: props.b24ui?.gridWeekDaysRow })">
+          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="b24ui.gridWeekDaysRow({ class: uiProp?.gridWeekDaysRow })">
             <Calendar.HeadCell
               v-for="day in weekDays"
               :key="day"
               data-slot="headCell"
-              :class="b24ui.headCell({ class: props.b24ui?.headCell })"
+              :class="b24ui.headCell({ class: uiProp?.headCell })"
             >
               <slot name="week-day" :day="day">
                 {{ day }}
@@ -138,18 +140,18 @@ const btnSize = computed(() => {
             </Calendar.HeadCell>
           </Calendar.GridRow>
         </Calendar.GridHead>
-        <Calendar.GridBody data-slot="gridBody" :class="b24ui.gridBody({ class: props.b24ui?.gridBody })">
+        <Calendar.GridBody data-slot="gridBody" :class="b24ui.gridBody({ class: uiProp?.gridBody })">
           <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDate-${index}`"
             data-slot="gridRow"
-            :class="b24ui.gridRow({ class: props.b24ui?.gridRow })"
+            :class="b24ui.gridRow({ class: uiProp?.gridRow })"
           >
             <td
               v-if="weekNumbers && weekDates[0]"
               role="gridcell"
               data-slot="cellWeek"
-              :class="b24ui.cellWeek({ class: props.b24ui?.cellWeek })"
+              :class="b24ui.cellWeek({ class: uiProp?.cellWeek })"
             >
               {{ getWeekNumber(weekDates[0], locale.code) }}
             </td>
@@ -158,13 +160,13 @@ const btnSize = computed(() => {
               :key="weekDate.toString()"
               :date="weekDate"
               data-slot="cell"
-              :class="b24ui.cell({ class: props.b24ui?.cell })"
+              :class="b24ui.cell({ class: uiProp?.cell })"
             >
               <Calendar.CellTrigger
                 :day="weekDate"
                 :month="month.value"
                 data-slot="cellTrigger"
-                :class="b24ui.cellTrigger({ class: props.b24ui?.cellTrigger })"
+                :class="b24ui.cellTrigger({ class: uiProp?.cellTrigger })"
               >
                 <slot name="day" :day="weekDate">
                   {{ weekDate.day }}