@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

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

@@ -1,11 +1,12 @@
 import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/select-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ButtonProps, ChipProps, InputProps, LinkPropsKeys, BadgeProps, IconComponent } from '../types';
-import type { ModelModifiers } from '../types/input';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
-import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
+import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type SelectMenu = ComponentConfig<typeof theme, AppConfig, 'selectMenu'>;
 export type SelectMenuValue = AcceptableValue;
@@ -31,7 +32,11 @@ export type SelectMenuItem = SelectMenuValue | {
     b24ui?: Pick<SelectMenu['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
-export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'resetModelValueOnClear' | 'highlightOnHover' | 'by'>, UseComponentIconsProps, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
+type ExcludeItem = {
+    type: 'label' | 'separator';
+};
+type IsClearUsed<M extends boolean, C extends boolean | object> = M extends false ? (C extends true ? null : C extends object ? null : never) : never;
+export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>, C extends boolean | object = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'resetModelValueOnClear' | 'highlightOnHover' | 'by'>, UseComponentIconsProps, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     id?: string;
     /** The placeholder text when the select is empty. */
     placeholder?: string;
@@ -96,11 +101,11 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
      * Can be an object to pass additional props to the Button.
      * @defaultValue false
      */
-    clear?: boolean | Partial<Omit<ButtonProps, LinkPropsKeys>>;
+    clear?: (C & boolean) | (C & Partial<Omit<ButtonProps, LinkPropsKeys>>);
     /**
      * The icon displayed in the clear button.
      * @defaultValue icons.close
-     * @IconifyIcon
+     * @IconComponent
      */
     clearIcon?: IconComponent;
     /**
@@ -152,10 +157,10 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     descriptionKey?: GetItemKeys<T>;
     items?: T;
     /** The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu. */
-    defaultValue?: GetModelValue<T, VK, M>;
+    defaultValue?: ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod> | IsClearUsed<M, C>;
     /** The controlled value of the SelectMenu. Can be binded-with with `v-model`. */
-    modelValue?: GetModelValue<T, VK, M>;
-    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
+    modelValue?: ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod> | IsClearUsed<M, C>;
+    modelModifiers?: Mod;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
@@ -183,78 +188,119 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     class?: any;
     b24ui?: SelectMenu['slots'];
 }
-export type SelectMenuEmits<A extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & {
-    change: [event: Event];
-    blur: [event: FocusEvent];
-    focus: [event: FocusEvent];
-    create: [item: string];
-    clear: [];
+export interface SelectMenuEmits<A extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>, C extends boolean | object = false> extends Pick<ComboboxRootEmits, 'update:open'> {
+    'change': [event: Event];
+    'blur': [event: FocusEvent];
+    'focus': [event: FocusEvent];
+    'create': [item: string];
+    'clear': [];
     /** Event handler when highlighted element changes. */
-    highlight: [
+    'highlight': [
         payload: {
             ref: HTMLElement;
-            value: GetModelValue<A, VK, M>;
+            value: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod> | IsClearUsed<M, C>;
         } | undefined
     ];
-} & GetModelValueEmits<A, VK, M>;
+    'update:modelValue': [value: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod> | IsClearUsed<M, C>];
+}
 type SlotProps<T extends SelectMenuItem> = (props: {
     item: T;
     index: number;
     b24ui: SelectMenu['b24ui'];
-}) => any;
-export interface SelectMenuSlots<A extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, T extends NestedItem<A> = NestedItem<A>> {
-    'leading'(props: {
-        modelValue?: GetModelValue<A, VK, M>;
+}) => VNode[];
+export interface SelectMenuSlots<A extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>, C extends boolean | object = false, T extends NestedItem<A> = NestedItem<A>> {
+    'leading'?(props: {
+        modelValue: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod> | IsClearUsed<M, C>;
         open: boolean;
         b24ui: SelectMenu['b24ui'];
-    }): any;
-    'default'(props: {
-        modelValue?: GetModelValue<A, VK, M>;
+    }): VNode[];
+    'default'?(props: {
+        modelValue: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod> | IsClearUsed<M, C>;
         open: boolean;
         b24ui: SelectMenu['b24ui'];
-    }): any;
-    'trailing'(props: {
-        modelValue?: GetModelValue<A, VK, M>;
+    }): VNode[];
+    'trailing'?(props: {
+        modelValue: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod> | IsClearUsed<M, C>;
         open: boolean;
         b24ui: SelectMenu['b24ui'];
-    }): any;
-    'empty'(props: {
-        searchTerm?: string;
-    }): any;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label'(props: {
+    }): VNode[];
+    'empty'?(props: {
+        searchTerm: string;
+    }): VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?(props: {
         item: T;
         index: number;
-    }): any;
-    'item-description'(props: {
+    }): VNode[];
+    'item-description'?(props: {
         item: T;
         index: number;
-    }): any;
-    'item-trailing': SlotProps<T>;
-    'content-top': (props?: {}) => any;
-    'content-bottom': (props?: {}) => any;
-    'create-item-label'(props: {
+    }): VNode[];
+    'item-trailing'?: SlotProps<T>;
+    'content-top'?: (props?: {}) => VNode[];
+    'content-bottom'?: (props?: {}) => VNode[];
+    'create-item-label'?(props: {
         item: string;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(SelectMenuProps<T, VK, M> & {
+declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, "lazy"> = Omit<ModelModifiers, "lazy">, C extends boolean | object = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(SelectMenuProps<T, VK, M, Mod, C> & {
         searchTerm?: string;
     }) & {
         onClear?: (() => any) | undefined;
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        onCreate?: ((item: string) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
-            value: GetModelValue<T, VK, M>;
+            value: (Mod extends {
+                number: true;
+            } ? (Mod extends {
+                optional: true;
+            } ? (Mod extends {
+                nullable: true;
+            } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+                nullable: true;
+            } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+                optional: true;
+            } ? (Mod extends {
+                nullable: true;
+            } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+                nullable: true;
+            } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+                optional: true;
+            } ? (Mod extends {
+                nullable: true;
+            } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+                nullable: true;
+            } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
         } | undefined) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onCreate?: ((item: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: (Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -264,11 +310,51 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
         viewportRef: Readonly<import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>>;
     }>) => void;
     attrs: any;
-    slots: SelectMenuSlots<T, VK, M, NestedItem<T>>;
-    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+    slots: SelectMenuSlots<T, VK, M, Mod, C, NestedItem<T>>;
+    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
-        value: GetModelValue<T, VK, M>;
-    } | undefined) => void)) & ((event: "update:searchTerm", value: string) => void);
+        value: (Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
+    } | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: (Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,5 +1,6 @@
 import { Separator } from 'reka-ui';
 import type { SeparatorProps as _SeparatorProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/separator';
 import type { AvatarProps, IconComponent } from '../types';
@@ -43,17 +44,17 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
     b24ui?: Separator['slots'];
 }
 export interface SeparatorSlots {
-    default(props: {
+    default?(props: {
         b24ui: Separator['b24ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
     size: Separator["variants"]["size"];
-    accent: Separator["variants"]["accent"];
-    type: Separator["variants"]["type"];
     orientation: Separator["variants"]["orientation"];
+    type: Separator["variants"]["type"];
+    accent: Separator["variants"]["accent"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Separator.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { Separator, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
 const props = defineProps({
@@ -24,6 +25,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("separator", props);
 const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.separator || {} })({
   accent: props.accent,
@@ -34,19 +36,19 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.separat
 </script>
 
 <template>
-  <Separator v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="border" :class="b24ui.border({ class: props.b24ui?.border })" />
+  <Separator v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="border" :class="b24ui.border({ class: uiProp?.border })" />
 
     <template v-if="label !== void 0 && label !== null || icon || avatar || !!slots.default">
-      <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+      <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
         <slot :b24ui="b24ui">
-          <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">{{ label }}</span>
-          <Component :is="icon" v-else-if="icon" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.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 })" />
+          <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: uiProp?.label })">{{ label }}</span>
+          <Component :is="icon" v-else-if="icon" data-slot="icon" :class="b24ui.icon({ class: uiProp?.icon })" />
+          <B24Avatar v-else-if="avatar" :size="uiProp?.avatarSize || b24ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="b24ui.avatar({ class: uiProp?.avatar })" />
         </slot>
       </div>
 
-      <div data-slot="border" :class="b24ui.border({ class: props.b24ui?.border })" />
+      <div data-slot="border" :class="b24ui.border({ class: uiProp?.border })" />
     </template>
   </Separator>
 </template>

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

@@ -1,5 +1,6 @@
 import { Separator } from 'reka-ui';
 import type { SeparatorProps as _SeparatorProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/separator';
 import type { AvatarProps, IconComponent } from '../types';
@@ -43,17 +44,17 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
     b24ui?: Separator['slots'];
 }
 export interface SeparatorSlots {
-    default(props: {
+    default?(props: {
         b24ui: Separator['b24ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
     size: Separator["variants"]["size"];
-    accent: Separator["variants"]["accent"];
-    type: Separator["variants"]["type"];
     orientation: Separator["variants"]["orientation"];
+    type: Separator["variants"]["type"];
+    accent: Separator["variants"]["accent"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type Sidebar = ComponentConfig<typeof theme, AppConfig, 'sidebar'>;
 export interface SidebarProps {
     /**

package/dist/runtime/components/Sidebar.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/sidebar";
 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, default: "div" },
@@ -14,12 +15,13 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebar", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar || {} })());
 </script>
 
 <template>
   <!-- Sidebar -->
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type Sidebar = ComponentConfig<typeof theme, AppConfig, 'sidebar'>;
 export interface SidebarProps {
     /**

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-body';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarBody = ComponentConfig<typeof theme, AppConfig, 'sidebarBody'>;
 export interface SidebarBodyProps {
     /**
@@ -15,9 +21,6 @@ export interface SidebarBodyProps {
     class?: any;
     b24ui?: SidebarBody['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarBodySlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarBody.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/sidebar-body";
 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, default: "div" },
@@ -15,13 +16,14 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarBody", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarBody || {} })({
   scrollbarThin: Boolean(props.scrollbarThin)
 }));
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-body';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarBody = ComponentConfig<typeof theme, AppConfig, 'sidebarBody'>;
 export interface SidebarBodyProps {
     /**
@@ -15,9 +21,6 @@ export interface SidebarBodyProps {
     class?: any;
     b24ui?: SidebarBody['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarBodySlots {
     default(props?: {}): any;
 }

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-footer';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarFooter = ComponentConfig<typeof theme, AppConfig, 'sidebarFooter'>;
 export interface SidebarFooterProps {
     /**
@@ -11,9 +17,6 @@ export interface SidebarFooterProps {
     class?: any;
     b24ui?: SidebarFooter['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarFooterSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarFooter.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/sidebar-footer";
 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, default: "div" },
@@ -14,11 +15,12 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarFooter", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarFooter || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-footer';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarFooter = ComponentConfig<typeof theme, AppConfig, 'sidebarFooter'>;
 export interface SidebarFooterProps {
     /**
@@ -11,9 +17,6 @@ export interface SidebarFooterProps {
     class?: any;
     b24ui?: SidebarFooter['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarFooterSlots {
     default(props?: {}): any;
 }

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-header';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarHeader = ComponentConfig<typeof theme, AppConfig, 'sidebarHeader'>;
 export interface SidebarHeaderProps {
     /**
@@ -11,9 +17,6 @@ export interface SidebarHeaderProps {
     class?: any;
     b24ui?: SidebarHeader['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarHeaderSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarHeader.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/sidebar-header";
 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, default: "div" },
@@ -14,11 +15,12 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarHeader", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarHeader || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-header';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarHeader = ComponentConfig<typeof theme, AppConfig, 'sidebarHeader'>;
 export interface SidebarHeaderProps {
     /**
@@ -11,9 +17,6 @@ export interface SidebarHeaderProps {
     class?: any;
     b24ui?: SidebarHeader['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarHeaderSlots {
     default(props?: {}): any;
 }