@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

package/dist/runtime/components/Toast.vue

@@ -3,10 +3,11 @@ import theme from "#build/b24ui/toast";
 </script>
 
 <script setup>
-import { ref, computed, onMounted, nextTick, useTemplateRef } from "vue";
+import { ref, computed, onMounted, useTemplateRef } from "vue";
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } 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";
@@ -26,7 +27,7 @@ const props = defineProps({
   actions: { type: Array, required: false },
   progress: { type: [Boolean, Object], required: false, default: true },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
   type: { type: String, required: false },
@@ -36,6 +37,7 @@ const emits = defineEmits(["escapeKeyDown", "pause", "resume", "swipeStart", "sw
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("toast", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "duration", "type"), emits);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.toast || {} })({
   color: props.color,
@@ -45,12 +47,10 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.toast |
 const rootRef = useTemplateRef("rootRef");
 const height = ref(0);
 onMounted(() => {
-  if (!rootRef.value) {
+  if (!rootRef.value?.$el?.getBoundingClientRect) {
     return;
   }
-  nextTick(() => {
-    height.value = rootRef.value?.$el?.getBoundingClientRect()?.height;
-  });
+  height.value = rootRef.value.$el.getBoundingClientRect().height;
 });
 defineExpose({
   height
@@ -64,7 +64,7 @@ defineExpose({
     v-bind="rootProps"
     :data-orientation="orientation"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     :style="{ '--height': height }"
   >
     <slot name="leading" :b24ui="b24ui">
@@ -72,13 +72,13 @@ defineExpose({
         :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 })">
-      <ToastTitle 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 })">
+      <ToastTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
         <slot name="title">
           <component :is="title()" v-if="typeof title === 'function'" />
           <component :is="title" v-else-if="typeof title === 'object'" />
@@ -87,7 +87,7 @@ defineExpose({
           </template>
         </slot>
       </ToastTitle>
-      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
         <slot name="description">
           <component :is="description()" v-if="typeof description === 'function'" />
           <component :is="description" v-else-if="typeof description === 'object'" />
@@ -97,7 +97,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <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">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <B24Button size="sm" :color="color" v-bind="action" />
@@ -106,7 +106,7 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close !== null" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close !== null" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
@@ -125,7 +125,7 @@ defineExpose({
             :aria-label="t('toast.close')"
             v-bind="typeof close === 'object' ? close : {}"
             data-slot="close"
-            :class="b24ui.close({ class: props.b24ui?.close })"
+            :class="b24ui.close({ class: uiProp?.close })"
             @click.stop
           />
         </slot>
@@ -139,7 +139,7 @@ defineExpose({
       v-bind="typeof progress === 'object' ? progress : {}"
       size="sm"
       data-slot="progress"
-      :class="b24ui.progress({ class: props.b24ui?.progress })"
+      :class="b24ui.progress({ class: uiProp?.progress })"
     />
   </ToastRoot>
 </template>

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

@@ -68,6 +68,8 @@ export interface ToastSlots {
         b24ui: Toast['b24ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToastProps, {
     height: import("vue").Ref<number, number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -152,9 +154,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToastP
             y: number;
         };
     }>, "currentTarget">) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToastSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    progress: boolean | Pick<ProgressProps, "color" | "b24ui">;
+    orientation: Toast["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToastSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -39,9 +39,16 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
 export interface ToasterSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
+    progress: boolean;
+    position: Toaster["variants"]["position"];
+    duration: number;
+    max: number;
+    expand: boolean;
+    portal: boolean | string | HTMLElement;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Toaster.vue

@@ -10,6 +10,7 @@ import { ref, computed, toRef, provide } from "vue";
 import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useToast, toastMaxInjectionKey } from "../composables/useToast";
 import { usePortal } from "../composables/usePortal";
 import { omit } from "../utils";
@@ -23,7 +24,7 @@ const props = defineProps({
   max: { type: Number, required: false, default: 5 },
   duration: { type: Number, required: false, default: 5e3 },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   label: { type: String, required: false },
   disableSwipe: { type: Boolean, required: false },
   swipeThreshold: { type: Number, required: false }
@@ -31,6 +32,7 @@ const props = defineProps({
 defineSlots();
 const { toasts, remove } = useToast();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("toaster", props);
 provide(toastMaxInjectionKey, toRef(() => props.max));
 const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold", "disableSwipe"));
 const portalProps = usePortal(toRef(() => props.portal));
@@ -78,10 +80,11 @@ function getOffset(index) {
       :key="toast.id"
       ref="refs"
       :progress="progress"
-      v-bind="omit(toast, ['id', 'close'])"
+      v-bind="omit(toast, ['id', 'close', '_duplicate', '_updated'])"
       :close="toast.close"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"
+      :data-pulsing="toast._duplicate ? toast._duplicate % 2 === 0 ? 'even' : 'odd' : void 0"
       :style="{
   '--index': index - toasts.length + toasts.length,
   '--before': toasts.length - 1 - index,
@@ -91,7 +94,7 @@ function getOffset(index) {
   '--transform': 'translateY(var(--translate)) scale(var(--scale))'
 }"
       data-slot="base"
-      :class="b24ui.base({ class: [props.b24ui?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
+      :class="b24ui.base({ class: [uiProp?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
     />
@@ -100,7 +103,7 @@ function getOffset(index) {
       <ToastViewport
         :data-expanded="expanded"
         data-slot="viewport"
-        :class="b24ui.viewport({ class: [props.b24ui?.viewport, props.class] })"
+        :class="b24ui.viewport({ class: [uiProp?.viewport, props.class] })"
         :style="{
   '--scale-factor': '0.05',
   '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',

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

@@ -39,9 +39,16 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
 export interface ToasterSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
+    progress: boolean;
+    position: Toaster["variants"]["position"];
+    duration: number;
+    max: number;
+    expand: boolean;
+    portal: boolean | string | HTMLElement;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -44,13 +44,16 @@ export interface TooltipSlots {
         b24ui: Tooltip['b24ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, TooltipSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    portal: boolean | string | HTMLElement;
+    arrow: boolean | Omit<TooltipArrowProps, "as" | "asChild">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, TooltipSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Tooltip.vue

@@ -8,6 +8,7 @@ import { defu } from "defu";
 import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { usePortal } from "../composables/usePortal";
 import { tv } from "../utils/tv";
 import B24Kbd from "./Kbd.vue";
@@ -19,7 +20,7 @@ const props = defineProps({
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   reference: { type: null, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
   delayDuration: { type: Number, required: false },
@@ -31,6 +32,7 @@ const props = defineProps({
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("tooltip", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "delayDuration", "disableHoverableContent", "disableClosingTrigger", "ignoreNonKeyboardFocus"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
@@ -57,22 +59,22 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tooltip
     </TooltipTrigger>
 
     <TooltipPortal v-bind="portalProps">
-      <TooltipContent v-bind="contentProps" data-slot="content" :class="b24ui.content({ class: [!slots.default && props.b24ui?.content, props.class] })">
+      <TooltipContent v-bind="contentProps" data-slot="content" :class="b24ui.content({ class: [!slots.default && uiProp?.content, props.class] })">
         <slot name="content" :b24ui="b24ui">
-          <span v-if="text" data-slot="text" :class="b24ui.text({ class: props.b24ui?.text })">{{ text }}</span>
+          <span v-if="text" data-slot="text" :class="b24ui.text({ class: uiProp?.text })">{{ text }}</span>
 
-          <span v-if="kbds?.length" data-slot="kbds" :class="b24ui.kbds({ class: props.b24ui?.kbds })">
+          <span v-if="kbds?.length" data-slot="kbds" :class="b24ui.kbds({ class: uiProp?.kbds })">
             <B24Kbd
               v-for="(kbd, index) in kbds"
               :key="index"
-              :size="props.b24ui?.kbdsSize || b24ui.kbdsSize()"
-              :accent="props.b24ui?.kbdsAccent || b24ui.kbdsAccent()"
+              :size="uiProp?.kbdsSize || b24ui.kbdsSize()"
+              :accent="uiProp?.kbdsAccent || b24ui.kbdsAccent()"
               v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
             />
           </span>
         </slot>
 
-        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: uiProp?.arrow })" />
       </TooltipContent>
     </TooltipPortal>
   </TooltipRoot>

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

@@ -44,13 +44,16 @@ export interface TooltipSlots {
         b24ui: Tooltip['b24ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, TooltipSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    portal: boolean | string | HTMLElement;
+    arrow: boolean | Omit<TooltipArrowProps, "as" | "asChild">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, TooltipSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -38,9 +38,11 @@ export interface UserSlots {
     description(props?: {}): any;
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+    orientation: User["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/User.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/user";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import B24Chip from "./Chip.vue";
 import B24Avatar from "./Avatar.vue";
@@ -23,10 +24,11 @@ const props = defineProps({
   target: { type: [String, Object, null], required: false },
   onClick: { type: Function, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("user", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.user || {} })({
   size: props.size,
   orientation: props.orientation,
@@ -56,10 +58,10 @@ const chipSize = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" @click="onClick">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })" @click="onClick">
     <slot name="avatar" :b24ui="b24ui">
       <B24Chip v-if="chip && avatar && !['3xs'].includes(size || '')" inset v-bind="typeof chip === 'object' ? chip : {}" :size="chipSize">
-        <B24Avatar :alt="name" v-bind="avatar" :size="size" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+        <B24Avatar :alt="name" v-bind="avatar" :size="size" data-slot="avatar" :class="b24ui.avatar({ class: uiProp?.avatar })" />
       </B24Chip>
       <B24Avatar
         v-else-if="avatar"
@@ -67,11 +69,11 @@ const chipSize = computed(() => {
         v-bind="avatar"
         :size="size"
         data-slot="avatar"
-        :class="b24ui.avatar({ class: props.b24ui?.avatar })"
+        :class="b24ui.avatar({ class: uiProp?.avatar })"
       />
     </slot>
 
-    <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+    <div data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
       <B24Link
         v-if="to"
         :aria-label="name"
@@ -83,12 +85,12 @@ const chipSize = computed(() => {
       </B24Link>
 
       <slot>
-        <p v-if="name || !!slots.name" data-slot="name" :class="b24ui.name({ class: props.b24ui?.name })">
+        <p v-if="name || !!slots.name" data-slot="name" :class="b24ui.name({ class: uiProp?.name })">
           <slot name="name">
             {{ name }}
           </slot>
         </p>
-        <p v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+        <p v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
           <slot name="description">
             {{ description }}
           </slot>

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

@@ -38,9 +38,11 @@ export interface UserSlots {
     description(props?: {}): any;
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+    orientation: User["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/color-mode/ColorModeAvatar.d.vue.ts

@@ -3,6 +3,6 @@ export interface ColorModeAvatarProps extends Omit<AvatarProps, 'src'> {
     light: string;
     dark: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/color-mode/ColorModeAvatar.vue

@@ -18,7 +18,7 @@ const props = defineProps({
   chip: { type: [Boolean, Object], required: false },
   class: { type: null, required: false },
   style: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const avatarProps = useForwardProps(reactiveOmit(props, "light", "dark"));
 </script>

package/dist/runtime/components/color-mode/ColorModeAvatar.vue.d.ts

@@ -3,6 +3,6 @@ export interface ColorModeAvatarProps extends Omit<AvatarProps, 'src'> {
     light: string;
     dark: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/color-mode/ColorModeButton.d.vue.ts

@@ -5,6 +5,8 @@ export interface ColorModeButtonProps extends Omit<ButtonProps, LinkPropsKeys |
      */
     color?: ButtonProps['color'];
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    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";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/color-mode/ColorModeButton.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useColorMode } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { useLocale } from "../../composables/useLocale";
 import icons from "../../dictionary/icons";
 import B24Button from "../Button.vue";
@@ -27,7 +28,7 @@ const props = defineProps({
   useDropdown: { type: Boolean, required: false },
   onClick: { type: [Function, Array], required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   icon: { type: [Function, Object], required: false },
   avatar: { type: Object, required: false },
   loading: { type: Boolean, required: false },
@@ -40,6 +41,7 @@ const props = defineProps({
 });
 const { t } = useLocale();
 const colorMode = useColorMode();
+const uiProp = useComponentUI("button", props);
 const buttonProps = useForwardProps(reactiveOmit(props, "icon"));
 const isDark = computed({
   get() {
@@ -61,8 +63,8 @@ const isDark = computed({
     @click="isDark = !isDark"
   >
     <template #leading="{ b24ui }">
-      <Component :is="icons.dark" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: [props.b24ui?.leadingIcon, 'hidden dark:inline-block'] })" />
-      <Component :is="icons.light" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: [props.b24ui?.leadingIcon, 'dark:hidden'] })" />
+      <Component :is="icons.dark" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: [uiProp?.leadingIcon, 'hidden dark:inline-block'] })" />
+      <Component :is="icons.light" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: [uiProp?.leadingIcon, 'dark:hidden'] })" />
     </template>
   </B24Button>
 </template>

package/dist/runtime/components/color-mode/ColorModeButton.vue.d.ts

@@ -5,6 +5,8 @@ export interface ColorModeButtonProps extends Omit<ButtonProps, LinkPropsKeys |
      */
     color?: ButtonProps['color'];
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    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";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/color-mode/ColorModeImage.d.vue.ts

@@ -3,6 +3,6 @@ export interface ColorModeImageProps extends /** @vue-ignore */ Omit<ImgHTMLAttr
     dark: string;
     light: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/color-mode/ColorModeImage.vue

@@ -3,15 +3,20 @@
 </script>
 
 <script setup>
+import { computed } from "vue";
+import { useRuntimeConfig } from "#imports";
 import ImageComponent from "#build/b24ui-image-component";
+import { resolveBaseURL } from "../../utils";
 defineOptions({ inheritAttrs: false });
-defineProps({
+const props = defineProps({
   dark: { type: String, required: true },
   light: { type: String, required: true }
 });
+const refinedLight = computed(() => resolveBaseURL(props.light, useRuntimeConfig().app.baseURL));
+const refinedDark = computed(() => resolveBaseURL(props.dark, useRuntimeConfig().app.baseURL));
 </script>
 
 <template>
-  <component :is="ImageComponent" :src="light" class="dark:hidden" v-bind="$attrs" />
-  <component :is="ImageComponent" :src="dark" class="hidden dark:block" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="refinedLight" class="dark:hidden" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="refinedDark" class="hidden dark:block" v-bind="$attrs" />
 </template>

package/dist/runtime/components/color-mode/ColorModeImage.vue.d.ts

@@ -3,6 +3,6 @@ export interface ColorModeImageProps extends /** @vue-ignore */ Omit<ImgHTMLAttr
     dark: string;
     light: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/color-mode/ColorModeSelect.d.vue.ts

@@ -1,6 +1,8 @@
 import type { SelectMenuProps, SelectMenuItem } from '../../types';
 export interface ColorModeSelectProps extends Omit<SelectMenuProps<SelectMenuItem[]>, 'icon' | 'items' | 'modelValue'> {
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {
+    searchInput: boolean | import("../Input.vue").InputProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/color-mode/ColorModeSelect.vue

@@ -25,6 +25,8 @@ const props = defineProps({
   required: { type: Boolean, required: false },
   trailingIcon: { type: [Function, Object], required: false },
   selectedIcon: { type: [Function, Object], required: false },
+  clear: { type: [Boolean, Object], required: false },
+  clearIcon: { type: [Function, Object], required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true },
@@ -33,7 +35,7 @@ const props = defineProps({
   labelKey: { type: null, required: false },
   descriptionKey: { type: null, required: false },
   defaultValue: { type: null, required: false },
-  modelModifiers: { type: Object, required: false },
+  modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
@@ -42,14 +44,16 @@ const props = defineProps({
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   name: { type: String, required: false },
   resetSearchTermOnBlur: { type: Boolean, required: false },
   resetSearchTermOnSelect: { type: Boolean, required: false },
+  resetModelValueOnClear: { type: Boolean, required: false },
   highlightOnHover: { type: Boolean, required: false },
+  by: { type: [String, Function], required: false },
   avatar: { type: Object, required: false },
   loading: { type: Boolean, required: false },
   trailing: { type: Boolean, required: false }

package/dist/runtime/components/color-mode/ColorModeSelect.vue.d.ts

@@ -1,6 +1,8 @@
 import type { SelectMenuProps, SelectMenuItem } from '../../types';
 export interface ColorModeSelectProps extends Omit<SelectMenuProps<SelectMenuItem[]>, 'icon' | 'items' | 'modelValue'> {
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {
+    searchInput: boolean | import("../Input.vue").InputProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;