@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

package/dist/runtime/components/Calendar.vue.d.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/Card.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/card';
 import type { ComponentConfig } from '../types/tv';
@@ -16,9 +17,9 @@ export interface CardProps {
     b24ui?: Card['slots'];
 }
 export interface CardSlots {
-    header(props?: {}): any;
-    default(props?: {}): any;
-    footer(props?: {}): any;
+    header?(props?: {}): VNode[];
+    default?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Card.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/card";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -15,22 +16,23 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("card", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.card || {} })({
   variant: props.variant
 }));
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
       <slot name="header" />
     </div>
 
-    <div v-if="!!slots.default" data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
+    <div v-if="!!slots.default" data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
       <slot />
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/card';
 import type { ComponentConfig } from '../types/tv';
@@ -16,9 +17,9 @@ export interface CardProps {
     b24ui?: Card['slots'];
 }
 export interface CardSlots {
-    header(props?: {}): any;
-    default(props?: {}): any;
-    footer(props?: {}): any;
+    header?(props?: {}): VNode[];
+    default?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIMessage } from 'ai';
 import theme from '#build/b24ui/chat-message';
@@ -43,14 +44,14 @@ export interface ChatMessageProps extends UIMessage {
     b24ui?: ChatMessage['slots'];
 }
 export interface ChatMessageSlots {
-    leading(props: {
+    leading?(props: {
         avatar: ChatMessageProps['avatar'];
         b24ui: ChatMessage['b24ui'];
-    }): any;
-    content(props: ChatMessageProps): any;
-    actions(props: {
+    }): VNode[];
+    content?(props: ChatMessageProps): VNode[];
+    actions?(props: {
         actions: ChatMessageProps['actions'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChatMessage.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/chat-message";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import B24Button from "./Button.vue";
@@ -28,6 +29,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatMessage", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMessage || {} })({
   variant: props.variant,
   side: props.side,
@@ -38,27 +40,27 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMes
 </script>
 
 <template>
-  <Primitive :as="as" :data-role="role" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
-      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+  <Primitive :as="as" :data-role="role" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: uiProp?.leading })">
         <slot name="leading" :avatar="avatar" :b24ui="b24ui">
           <Component
             :is="icon"
             v-if="icon"
             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>
       </div>
 
-      <div v-if="parts.length || !!slots.content" data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
+      <div v-if="parts.length || !!slots.content" data-slot="content" :class="b24ui.content({ class: uiProp?.content })">
         <slot
           :id="id"
           name="content"
@@ -73,7 +75,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMes
         </slot>
       </div>
 
-      <div v-if="actions || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+      <div v-if="actions || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions })">
         <slot name="actions" :actions="actions">
           <B24Tooltip v-for="(action, index) in actions" :key="index" :text="action.label">
             <B24Button

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIMessage } from 'ai';
 import theme from '#build/b24ui/chat-message';
@@ -43,14 +44,14 @@ export interface ChatMessageProps extends UIMessage {
     b24ui?: ChatMessage['slots'];
 }
 export interface ChatMessageSlots {
-    leading(props: {
+    leading?(props: {
         avatar: ChatMessageProps['avatar'];
         b24ui: ChatMessage['b24ui'];
-    }): any;
-    content(props: ChatMessageProps): any;
-    actions(props: {
+    }): VNode[];
+    content?(props: ChatMessageProps): VNode[];
+    actions?(props: {
         actions: ChatMessageProps['actions'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIMessage, ChatStatus } from 'ai';
 import theme from '#build/b24ui/chat-messages';
@@ -53,20 +54,20 @@ export interface ChatMessagesProps {
     class?: any;
     b24ui?: ChatMessages['slots'];
 }
-type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = ChatMessageSlots[K] extends (props: infer P) => any ? (props: P & {
+type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = Required<ChatMessageSlots>[K] extends (props: infer P) => VNode[] ? (props: P & {
     message: UIMessage;
-}) => any : ChatMessageSlots[K];
+}) => VNode[] : Required<ChatMessageSlots>[K];
 export type ChatMessagesSlots = {
-    [K in keyof ChatMessageSlots]: ExtendSlotWithVersion<K>;
+    [K in keyof ChatMessageSlots]?: ExtendSlotWithVersion<K>;
 } & {
-    default(props?: {}): any;
-    indicator(props: {
+    default?(props?: {}): VNode[];
+    indicator?(props: {
         b24ui: ChatMessages['b24ui'];
-    }): any;
-    viewport(props: {
+    }): VNode[];
+    viewport?(props: {
         b24ui: ChatMessages['b24ui'];
         onClick: () => void;
-    }): any;
+    }): VNode[];
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChatMessages.vue

@@ -8,6 +8,7 @@ import { Presence } from "reka-ui";
 import { defu } from "defu";
 import { useElementBounding, useEventListener, watchThrottled } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -30,6 +31,7 @@ const props = defineProps({
 const slots = defineSlots();
 const getProxySlots = () => omit(slots, ["default", "indicator", "viewport"]);
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatMessages", props);
 const userProps = toRef(() => defu(props.user, { side: "right", variant: "message" }));
 const assistantProps = toRef(() => defu(props.assistant, { side: "left", variant: "message" }));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMessages || {} })({
@@ -158,13 +160,16 @@ onMounted(() => {
     return;
   }
   lastScrollTop.value = parent.value.scrollTop;
-  setTimeout(() => {
-    if (props.shouldScrollToBottom) {
+  if (props.shouldScrollToBottom) {
+    scrollToBottom(false);
+    setTimeout(() => {
       scrollToBottom(false);
-    } else {
+    }, 100);
+  } else {
+    nextTick(() => {
       checkScrollPosition();
-    }
-  }, 100);
+    });
+  }
   useEventListener(parent, "scroll", checkScrollPosition);
   useEventListener(window, "resize", () => nextTick(updateLastMessageHeight));
 });
@@ -175,7 +180,7 @@ onMounted(() => {
     ref="el"
     :data-status="status"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
     <slot>
@@ -201,7 +206,7 @@ onMounted(() => {
     >
       <template #content>
         <slot name="indicator" :b24ui="b24ui">
-          <div data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })">
+          <div data-slot="indicator" :class="b24ui.indicator({ class: uiProp?.indicator })">
             <span />
             <span />
             <span />
@@ -211,7 +216,7 @@ onMounted(() => {
     </B24ChatMessage>
 
     <Presence :present="showAutoScroll">
-      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="b24ui.viewport({ class: uiProp?.viewport })">
         <slot name="viewport" :b24ui="b24ui" :on-click="onAutoScrollClick">
           <B24Button
             v-if="autoScroll"
@@ -219,7 +224,7 @@ onMounted(() => {
             color="air-secondary-no-accent"
             v-bind="typeof autoScroll === 'object' ? autoScroll : {}"
             data-slot="autoScroll"
-            :class="b24ui.autoScroll({ class: props.b24ui?.autoScroll })"
+            :class="b24ui.autoScroll({ class: uiProp?.autoScroll })"
             @click="onAutoScrollClick"
           />
         </slot>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIMessage, ChatStatus } from 'ai';
 import theme from '#build/b24ui/chat-messages';
@@ -53,20 +54,20 @@ export interface ChatMessagesProps {
     class?: any;
     b24ui?: ChatMessages['slots'];
 }
-type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = ChatMessageSlots[K] extends (props: infer P) => any ? (props: P & {
+type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = Required<ChatMessageSlots>[K] extends (props: infer P) => VNode[] ? (props: P & {
     message: UIMessage;
-}) => any : ChatMessageSlots[K];
+}) => VNode[] : Required<ChatMessageSlots>[K];
 export type ChatMessagesSlots = {
-    [K in keyof ChatMessageSlots]: ExtendSlotWithVersion<K>;
+    [K in keyof ChatMessageSlots]?: ExtendSlotWithVersion<K>;
 } & {
-    default(props?: {}): any;
-    indicator(props: {
+    default?(props?: {}): VNode[];
+    indicator?(props: {
         b24ui: ChatMessages['b24ui'];
-    }): any;
-    viewport(props: {
+    }): VNode[];
+    viewport?(props: {
         b24ui: ChatMessages['b24ui'];
         onClick: () => void;
-    }): any;
+    }): VNode[];
 };
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/chat-palette';
 import type { ComponentConfig } from '../types/tv';
@@ -12,8 +13,8 @@ export interface ChatPaletteProps {
     b24ui?: ChatPalette['slots'];
 }
 export interface ChatPaletteSlots {
-    default(props?: {}): any;
-    prompt(props?: {}): any;
+    default?(props?: {}): VNode[];
+    prompt?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChatPalette.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/chat-palette";
 import { computed } from "vue";
 import { Primitive, Slot } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -14,18 +15,19 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatPalette", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatPalette || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="content" :class="b24ui.content({ class: uiProp?.content })">
       <Slot compact>
         <slot />
       </Slot>
     </div>
 
-    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="b24ui.prompt({ class: props.b24ui?.prompt })">
+    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="b24ui.prompt({ class: uiProp?.prompt })">
       <slot name="prompt" />
     </Slot>
   </Primitive>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/chat-palette';
 import type { ComponentConfig } from '../types/tv';
@@ -12,8 +13,8 @@ export interface ChatPaletteProps {
     b24ui?: ChatPalette['slots'];
 }
 export interface ChatPaletteSlots {
-    default(props?: {}): any;
-    prompt(props?: {}): any;
+    default?(props?: {}): VNode[];
+    prompt?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/chat-prompt';
 import type { TextareaProps, TextareaSlots } from '../types';
@@ -27,8 +28,8 @@ export interface ChatPromptEmits {
     close: [event: Event];
 }
 export interface ChatPromptSlots extends TextareaSlots {
-    header(props?: {}): any;
-    footer(props?: {}): any;
+    header?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChatPrompt.vue

@@ -7,6 +7,7 @@ import { computed, toRef, useTemplateRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -35,6 +36,7 @@ const slots = defineSlots();
 const model = defineModel({ type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatPrompt", props);
 const textareaProps = useForwardProps(reactivePick(props, "rows", "autofocus", "autofocusDelay", "autoresize", "autoresizeDelay", "maxrows", "icon", "avatar", "loading"));
 const getProxySlots = () => omit(slots, ["header", "footer", "default"]);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatPrompt || {} })({
@@ -57,8 +59,8 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
       <slot name="header" />
     </div>
 
@@ -68,10 +70,11 @@ defineExpose({
       :placeholder="placeholder || t('chatPrompt.placeholder')"
       :disabled="Boolean(error) || disabled"
       no-border
+      fixed
       v-bind="{ ...textareaProps, ...$attrs }"
-      :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), props.b24ui)"
+      :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), uiProp)"
       data-slot="body"
-      :class="b24ui.body({ class: props.b24ui?.body })"
+      :class="b24ui.body({ class: uiProp?.body })"
       @keydown.enter.exact.prevent="submit"
       @keydown.esc="blur"
     >
@@ -80,9 +83,9 @@ defineExpose({
       </template>
     </B24Textarea>
 
-    <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
-      <slot name="default" :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), props.b24ui)" />
+      <slot name="default" :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), uiProp)" />
     </div>
   </Primitive>
 </template>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/chat-prompt';
 import type { TextareaProps, TextareaSlots } from '../types';
@@ -27,8 +28,8 @@ export interface ChatPromptEmits {
     close: [event: Event];
 }
 export interface ChatPromptSlots extends TextareaSlots {
-    header(props?: {}): any;
-    footer(props?: {}): any;
+    header?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -66,11 +66,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onStop?: ((event: MouseEvent) => any) | undefined;
     onReload?: ((event: MouseEvent) => any) | undefined;
 }>, {
-    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
     status: ChatStatus;
-    streamingColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-    submittedColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-    errorColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    streamingColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    submittedColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    errorColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -51,6 +52,7 @@ const emits = defineEmits(["stop", "reload"]);
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatPromptSubmit", props);
 const buttonProps = useForwardProps(reactiveOmit(props, "icon", "color", "status", "streamingIcon", "streamingColor", "submittedIcon", "submittedColor", "errorIcon", "errorColor", "class", "b24ui"));
 const statusButtonProps = computed(() => ({
   ready: {
@@ -94,8 +96,8 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatPro
 }"
     :aria-label="t('chatPromptSubmit.label')"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
-    :b24ui="transformUI(b24ui, props.b24ui)"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
+    :b24ui="transformUI(b24ui, uiProp)"
   >
     <template v-for="(_, name) in slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />

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

@@ -66,11 +66,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onStop?: ((event: MouseEvent) => any) | undefined;
     onReload?: ((event: MouseEvent) => any) | undefined;
 }>, {
-    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
     status: ChatStatus;
-    streamingColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-    submittedColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-    errorColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    streamingColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    submittedColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    errorColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,4 +1,5 @@
 import type { CheckboxRootProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/checkbox';
 import type { ButtonHTMLAttributes } from '../types/html';
@@ -36,12 +37,12 @@ export type CheckboxEmits = {
     change: [event: Event];
 };
 export interface CheckboxSlots {
-    label(props: {
-        label?: string;
-    }): any;
-    description(props: {
-        description?: string;
-    }): any;
+    label?(props: {
+        label: string | undefined;
+    }): VNode[];
+    description?(props: {
+        description: string | undefined;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;