@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

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

@@ -53,15 +53,19 @@ export type ProgressSlots = {
         step: number;
     }) => any;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string[] | undefined) => any;
     "update:max": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<ProgressProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
     "onUpdate:max"?: ((value: number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProgressSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    modelValue: number | null;
+    inverted: boolean;
+    orientation: Progress["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProgressSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -57,7 +57,7 @@ export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[],
      * The orientation the radio buttons are laid out.
      * @defaultValue 'vertical'
      */
-    orientation?: RadioGroupRootProps['orientation'];
+    orientation?: RadioGroup['variants']['orientation'];
     /**
      * Position of the indicator.
      * @defaultValue 'start'
@@ -81,19 +81,24 @@ export interface RadioGroupSlots<T extends RadioGroupItem[] = RadioGroupItem[]>
     label: SlotProps<T[number]>;
     description: SlotProps<T[number]>;
 }
-declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<RadioGroupProps<T, VK> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__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<RadioGroupProps<T, VK> & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: RadioGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/RadioGroup.vue

@@ -7,6 +7,7 @@ import { computed, useId } from "vue";
 import { RadioGroupRoot, RadioGroupItem as RRadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
@@ -25,7 +26,7 @@ const props = defineProps({
   orientation: { type: null, required: false, default: "vertical" },
   indicator: { type: null, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
   loop: { type: Boolean, required: false },
   name: { type: String, required: false },
@@ -34,6 +35,7 @@ const props = defineProps({
 const emits = defineEmits(["change", "update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("radioGroup", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "loop", "required"), emits);
 const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField(props, { bind: false });
 const id = _id.value ?? useId();
@@ -96,11 +98,11 @@ function onUpdate(value) {
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset data-slot="fieldset" :class="b24ui.fieldset({ class: props.b24ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
+    <fieldset data-slot="fieldset" :class="b24ui.fieldset({ class: uiProp?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: uiProp?.legend })">
         <slot name="legend">
           {{ legend }}
         </slot>
@@ -111,31 +113,31 @@ function onUpdate(value) {
         v-for="item in normalizedItems"
         :key="item.value"
         data-slot="item"
-        :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class], disabled: item.disabled || disabled })"
+        :class="b24ui.item({ class: [uiProp?.item, item.b24ui?.item, item.class], disabled: item.disabled || disabled })"
       >
-        <div data-slot="container" :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
+        <div data-slot="container" :class="b24ui.container({ class: [uiProp?.container, item.b24ui?.container] })">
           <RRadioGroupItem
             :id="item.id"
             :value="item.value"
             :disabled="item.disabled || disabled"
             data-slot="base"
-            :class="b24ui.base({ class: [props.b24ui?.base, item.b24ui?.base], disabled: item.disabled || disabled })"
+            :class="b24ui.base({ class: [uiProp?.base, item.b24ui?.base], disabled: item.disabled || disabled })"
           >
-            <RadioGroupIndicator data-slot="indicator" :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })" />
+            <RadioGroupIndicator data-slot="indicator" :class="b24ui.indicator({ class: [uiProp?.indicator, item.b24ui?.indicator] })" />
           </RRadioGroupItem>
         </div>
 
         <div
           v-if="item.label || !!slots.label || (item.description || !!slots.description)"
           data-slot="wrapper"
-          :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })"
+          :class="b24ui.wrapper({ class: [uiProp?.wrapper, item.b24ui?.wrapper] })"
         >
           <component
             :is="!variant || variant === 'list' ? Label : 'p'"
             v-if="item.label || !!slots.label"
             :for="item.id"
             data-slot="label"
-            :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label], disabled: item.disabled || disabled })"
+            :class="b24ui.label({ class: [uiProp?.label, item.b24ui?.label], disabled: item.disabled || disabled })"
           >
             <slot name="label" :item="item" :model-value="modelValue">
               {{ item.label }}
@@ -144,7 +146,7 @@ function onUpdate(value) {
           <p
             v-if="item.description || !!slots.description"
             data-slot="description"
-            :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description], disabled: item.disabled || disabled })"
+            :class="b24ui.description({ class: [uiProp?.description, item.b24ui?.description], disabled: item.disabled || disabled })"
           >
             <slot name="description" :item="item" :model-value="modelValue">
               {{ item.description }}

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

@@ -57,7 +57,7 @@ export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[],
      * The orientation the radio buttons are laid out.
      * @defaultValue 'vertical'
      */
-    orientation?: RadioGroupRootProps['orientation'];
+    orientation?: RadioGroup['variants']['orientation'];
     /**
      * Position of the indicator.
      * @defaultValue 'start'
@@ -81,19 +81,24 @@ export interface RadioGroupSlots<T extends RadioGroupItem[] = RadioGroupItem[]>
     label: SlotProps<T[number]>;
     description: SlotProps<T[number]>;
 }
-declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<RadioGroupProps<T, VK> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__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<RadioGroupProps<T, VK> & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: RadioGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -22,7 +22,7 @@ export interface RangeProps extends Pick<SliderRootProps, 'name' | 'disabled' |
      * The orientation of the range.
      * @defaultValue 'horizontal'
      */
-    orientation?: SliderRootProps['orientation'];
+    orientation?: Range['variants']['orientation'];
     /**
      * Display a tooltip around the range thumbs with the current value.
      * `{ disableClosingTrigger: true }`{lang="ts-type"}
@@ -37,21 +37,26 @@ export interface RangeProps extends Pick<SliderRootProps, 'name' | 'disabled' |
 export interface RangeEmits {
     change: [event: Event];
 }
-declare const __VLS_export: <T extends number | number[]>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(RangeProps & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends number | number[]>(__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<(RangeProps & {
         modelValue?: T;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void);
+    emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Range.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import B24Tooltip from "./Tooltip.vue";
@@ -18,7 +19,7 @@ const props = defineProps({
   tooltip: { type: [Boolean, Object], required: false },
   defaultValue: { type: [Number, Array], required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   name: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   inverted: { type: Boolean, required: false },
@@ -30,6 +31,7 @@ const props = defineProps({
 const emits = defineEmits(["change"]);
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("range", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
 const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const defaultRangeValue = computed(() => {
@@ -71,13 +73,13 @@ function onChange(value) {
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     :default-value="defaultRangeValue"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
   >
-    <SliderTrack data-slot="track" :class="b24ui.track({ class: props.b24ui?.track })">
-      <SliderRange data-slot="range" :class="b24ui.range({ class: props.b24ui?.range })" />
+    <SliderTrack data-slot="track" :class="b24ui.track({ class: uiProp?.track })">
+      <SliderRange data-slot="range" :class="b24ui.range({ class: uiProp?.range })" />
     </SliderTrack>
 
     <template v-for="thumb in thumbs" :key="thumb">
@@ -87,9 +89,9 @@ function onChange(value) {
         disable-closing-trigger
         v-bind="typeof tooltip === 'object' ? tooltip : {}"
       >
-        <SliderThumb data-slot="thumb" :class="b24ui.thumb({ class: props.b24ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+        <SliderThumb data-slot="thumb" :class="b24ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
       </B24Tooltip>
-      <SliderThumb v-else data-slot="thumb" :class="b24ui.thumb({ class: props.b24ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+      <SliderThumb v-else data-slot="thumb" :class="b24ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
     </template>
   </SliderRoot>
 </template>

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

@@ -22,7 +22,7 @@ export interface RangeProps extends Pick<SliderRootProps, 'name' | 'disabled' |
      * The orientation of the range.
      * @defaultValue 'horizontal'
      */
-    orientation?: SliderRootProps['orientation'];
+    orientation?: Range['variants']['orientation'];
     /**
      * Display a tooltip around the range thumbs with the current value.
      * `{ disableClosingTrigger: true }`{lang="ts-type"}
@@ -37,21 +37,26 @@ export interface RangeProps extends Pick<SliderRootProps, 'name' | 'disabled' |
 export interface RangeEmits {
     change: [event: Event];
 }
-declare const __VLS_export: <T extends number | number[]>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(RangeProps & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends number | number[]>(__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<(RangeProps & {
         modelValue?: T;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void);
+    emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -20,6 +20,13 @@ export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOpt
      * @defaultValue undefined
      */
     lanes?: number;
+    /**
+     * Skip per-item DOM measurement for uniform-height items.
+     * When `true`, uses `estimateSize` only — significantly improving performance for uniform items.
+     * When `false` (default), measures each item for variable-height layouts (e.g., masonry).
+     * @defaultValue false
+     */
+    skipMeasurement?: boolean;
 }
 export type ScrollAreaItem = any;
 export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
@@ -60,8 +67,12 @@ export interface ScrollAreaEmits {
      */
     scroll: [isScrolling: boolean];
 }
-declare const __VLS_export: <T extends ScrollAreaItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<ScrollAreaProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "scroll", isScrolling: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ScrollAreaItem>(__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<ScrollAreaProps<T> & {
+        onScroll?: ((isScrolling: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -74,8 +85,8 @@ declare const __VLS_export: <T extends ScrollAreaItem>(__VLS_props: NonNullable<
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/ScrollArea.vue

@@ -3,11 +3,12 @@ import theme from "#build/b24ui/scroll-area";
 </script>
 
 <script setup>
-import { computed, toRef, useTemplateRef, watch } from "vue";
+import { computed, onMounted, onUnmounted, toRef, useTemplateRef, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { defu } from "defu";
 import { useVirtualizer } from "@tanstack/vue-virtual";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import { useLocale } from "../composables/useLocale";
 const props = defineProps({
@@ -16,12 +17,13 @@ const props = defineProps({
   items: { type: Array, required: false },
   virtualize: { type: [Boolean, Object], required: false, default: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const emits = defineEmits(["scroll"]);
 const { dir } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("scrollArea", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.scrollArea || {} })({
   orientation: props.orientation
 }));
@@ -44,6 +46,9 @@ const lanes = computed(() => {
   const value = virtualizerProps.value.lanes;
   return typeof value === "number" ? value : void 0;
 });
+const skipMeasurement = computed(() => {
+  return typeof props.virtualize === "object" && props.virtualize.skipMeasurement === true;
+});
 const virtualizer = !!props.virtualize && useVirtualizer({
   ...virtualizerProps.value,
   get overscan() {
@@ -101,13 +106,32 @@ function getVirtualItemStyle(virtualItem) {
     transform: isHorizontal.value ? `translateX(${isRtl.value ? -virtualItem.start : virtualItem.start}px)` : `translateY(${virtualItem.start}px)`
   };
 }
-watch(lanes, () => {
+let resizeObserver = null;
+let rafId = null;
+onMounted(() => {
   if (virtualizer) {
-    virtualizer.value.measure();
+    const el = rootRef.value?.$el;
+    if (el) {
+      resizeObserver = new ResizeObserver(() => {
+        if (rafId !== null) return;
+        rafId = requestAnimationFrame(() => {
+          rafId = null;
+          virtualizer.value.measure();
+        });
+      });
+      resizeObserver.observe(el);
+    }
+  }
+});
+onUnmounted(() => {
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
   }
-}, { flush: "sync" });
+  resizeObserver?.disconnect();
+});
 function measureElement(el) {
-  if (el && virtualizer) {
+  if (el && virtualizer && !skipMeasurement.value) {
     const element = el instanceof Element ? el : el.$el;
     virtualizer.value.measureElement(element);
   }
@@ -139,12 +163,12 @@ defineExpose({
     :as="as"
     data-slot="root"
     :data-orientation="orientation"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
     <template v-if="virtualizer">
       <div
         data-slot="viewport"
-        :class="b24ui.viewport({ class: props.b24ui?.viewport })"
+        :class="b24ui.viewport({ class: uiProp?.viewport })"
         :style="virtualViewportStyle"
       >
         <div
@@ -153,7 +177,7 @@ defineExpose({
           :ref="measureElement"
           :data-index="virtualItem.index"
           data-slot="item"
-          :class="b24ui.item({ class: props.b24ui?.item })"
+          :class="b24ui.item({ class: uiProp?.item })"
           :style="getVirtualItemStyle(virtualItem)"
         >
           <slot
@@ -166,13 +190,13 @@ defineExpose({
     </template>
 
     <template v-else>
-      <div data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+      <div data-slot="viewport" :class="b24ui.viewport({ class: uiProp?.viewport })">
         <template v-if="items?.length">
           <div
             v-for="(item, index) in items"
             :key="getItemKey(item, index)"
             data-slot="item"
-            :class="b24ui.item({ class: props.b24ui?.item })"
+            :class="b24ui.item({ class: uiProp?.item })"
           >
             <slot :item="item" :index="index" />
           </div>

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

@@ -20,6 +20,13 @@ export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOpt
      * @defaultValue undefined
      */
     lanes?: number;
+    /**
+     * Skip per-item DOM measurement for uniform-height items.
+     * When `true`, uses `estimateSize` only — significantly improving performance for uniform items.
+     * When `false` (default), measures each item for variable-height layouts (e.g., masonry).
+     * @defaultValue false
+     */
+    skipMeasurement?: boolean;
 }
 export type ScrollAreaItem = any;
 export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
@@ -60,8 +67,12 @@ export interface ScrollAreaEmits {
      */
     scroll: [isScrolling: boolean];
 }
-declare const __VLS_export: <T extends ScrollAreaItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<ScrollAreaProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "scroll", isScrolling: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ScrollAreaItem>(__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<ScrollAreaProps<T> & {
+        onScroll?: ((isScrolling: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -74,8 +85,8 @@ declare const __VLS_export: <T extends ScrollAreaItem>(__VLS_props: NonNullable<
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};