@uzum-tech/ui 1.12.12 → 1.12.14

package/lib/chat/src/ChatMessages.js

@@ -101,7 +101,6 @@ exports.default = (0, vue_1.defineComponent)({
             };
         });
         const themeClassHandle = (0, _mixins_1.useThemeClass)('chat-messages', (0, vue_1.computed)(() => ''), cssVarsRef, props);
-        const mergedTypingTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
         const mergedRetryTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.retryText) !== null && _a !== void 0 ? _a : localeRef.value.retryText; });
         const mergedUnreadNotificationTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.unreadNotificationText) !== null && _a !== void 0 ? _a : localeRef.value.unreadNotificationText; });
         const unreadMessagesCount = (0, vue_1.computed)(() => {
@@ -266,23 +265,6 @@ exports.default = (0, vue_1.defineComponent)({
                                 ], theme: themeRef.value.peers.StatusIcon, themeOverrides: themeRef.value.peerOverrides.StatusIcon }))))))))));
             return messageContent;
         };
-        const renderTypingIndicator = () => {
-            return ((0, vue_1.h)("div", { class: [
-                    `${mergedClsPrefixRef.value}-chat-main__message`,
-                    `${mergedClsPrefixRef.value}-chat-main__message--other`
-                ] },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
-                    (0, vue_1.h)("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--typing`
-                        ] }),
-                    (0, vue_1.h)("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta--other`
-                        ] },
-                        (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, mergedTypingTextRef.value)))));
-        };
         const renderSkeletonMessage = (isOwn, index) => {
             return ((0, vue_1.h)("div", { key: `skeleton-${index}`, class: [
                     `${mergedClsPrefixRef.value}-chat-main__message`,
@@ -312,7 +294,6 @@ exports.default = (0, vue_1.defineComponent)({
             mergedTheme: themeRef,
             renderMessage,
             renderMarkMessage,
-            renderTypingIndicator,
             renderSkeletonMessage,
             renderDateSeparator,
             renderUnreadNotification,
@@ -326,9 +307,9 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        var _a, _b, _c;
+        var _a, _b;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        const { mergedClsPrefixRef, renderMessage, renderMarkMessage, renderTypingIndicator, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
+        const { mergedClsPrefixRef, renderMessage, renderMarkMessage, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
         if (this.loading) {
             return ((0, vue_1.h)("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
@@ -389,7 +370,6 @@ exports.default = (0, vue_1.defineComponent)({
                 id: 'unread-notification'
             });
         }
-        const isTyping = this.selectedChatId && ((_c = this.typingChatIds) === null || _c === void 0 ? void 0 : _c.includes(this.selectedChatId));
         return ((0, vue_1.h)("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
             (0, vue_1.h)("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
                     border: 'none',
@@ -404,21 +384,19 @@ exports.default = (0, vue_1.defineComponent)({
                             event.preventDefault();
                             this.contextMenuShow = false;
                         }
-                    } },
-                    messagesWithDates.map((item) => {
-                        var _a;
-                        if (item.type === 'date-separator') {
-                            return renderDateSeparator((_a = item.date) !== null && _a !== void 0 ? _a : '');
-                        }
-                        if (item.type === 'unread-notification') {
-                            return renderUnreadNotification();
-                        }
-                        const message = item;
-                        if (message.type === interface_1.ChatMessageType.MARK) {
-                            return renderMarkMessage(message);
-                        }
-                        return renderMessage(message);
-                    }),
-                    isTyping && renderTypingIndicator()))));
+                    } }, messagesWithDates.map((item) => {
+                    var _a;
+                    if (item.type === 'date-separator') {
+                        return renderDateSeparator((_a = item.date) !== null && _a !== void 0 ? _a : '');
+                    }
+                    if (item.type === 'unread-notification') {
+                        return renderUnreadNotification();
+                    }
+                    const message = item;
+                    if (message.type === interface_1.ChatMessageType.MARK) {
+                        return renderMarkMessage(message);
+                    }
+                    return renderMessage(message);
+                })))));
     }
 });

package/lib/chat/src/ChatParts/MainArea.js

@@ -49,6 +49,11 @@ exports.default = (0, vue_1.defineComponent)({
                 return 0;
             return messagesRef.value.filter((msg) => !msg.isOwn && msg.status === interface_1.MessageStatus.UNREAD).length;
         });
+        const isTyping = (0, vue_1.computed)(() => {
+            if (!selectedChatRef.value || !typingChatIdsRef.value)
+                return false;
+            return typingChatIdsRef.value.includes(selectedChatRef.value.id);
+        });
         const showNotificationManually = (0, vue_1.ref)(false);
         const hasUnreadMessages = (0, vue_1.ref)(false);
         const unreadCountOnOpen = (0, vue_1.ref)(0);
@@ -188,9 +193,16 @@ exports.default = (0, vue_1.defineComponent)({
                         const keyId = toKeyString(chat === null || chat === void 0 ? void 0 : chat.id);
                         const keyTitle = toKeyString(chat === null || chat === void 0 ? void 0 : chat.title);
                         return ((0, vue_1.h)(vue_1.Fragment, null,
-                            (0, vue_1.h)(typography_1.UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
-                                default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
-                            }),
+                            (0, vue_1.h)(flex_1.UFlex, { vertical: true, size: [0, 0], justify: 'flex-start"' },
+                                (0, vue_1.h)(typography_1.UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
+                                    default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
+                                }),
+                                isTyping.value && ((0, vue_1.h)(typography_1.UText, { class: [
+                                        `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
+                                        'typing'
+                                    ], variant: "body-m-medium" }, {
+                                    default: () => { var _a; return (_a = typingTextRef.value) !== null && _a !== void 0 ? _a : ''; }
+                                }))),
                             (0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
                                 default: () => (0, _utils_1.resolveSlot)(slots.headerActions, () => {
                                     const shareButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerShareButtonPropsRef.value);

package/lib/chat/src/styles/index.cssr.js

@@ -77,53 +77,28 @@ exports.default = (0, cssr_1.cB)('chat', `
  background-color: var(--u-sidebar-item-background-color-selected);
  `, [(0, cssr_1.c)('&:hover', `
  background-color: var(--u-sidebar-item-background-color-selected);
- `)]), (0, cssr_1.cM)('typing', `
- .u-list-item__description {
- color: var(--u-color-primary) !important;
- font-style: italic;
- }
- `), (0, cssr_1.c)('&:hover', `
+ `)]), (0, cssr_1.c)('&:hover', `
  background-color: var(--u-sidebar-item-background-color-hover);
  `, [(0, cssr_1.cM)('selected', `
  background-color: var(--u-sidebar-item-background-color-selected);
  `)])]), (0, cssr_1.cE)('item-title', `
- font-weight: 500;
- font-size: 14px;
- line-height: 20px;
  color: var(--u-sidebar-item-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+ margin-bottom: 0;
  `), (0, cssr_1.cE)('item-subtitle', `
- font-size: 12px;
- line-height: 16px;
+ display: block;
  color: var(--u-sidebar-item-subtitle-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
- `, [(0, cssr_1.cM)('typing', `
- color: var(--u-color-primary);
- font-style: italic;
- `)]), (0, cssr_1.cE)('item-main', `
+ minWidth: 0;
+ maxWidth: 100%;
+ `), (0, cssr_1.cE)('item-main', `
  flex: 1;
  min-width: 0;
  margin-right: 12px;
- `), (0, cssr_1.cE)('item-title', `
- font-weight: 500;
- font-size: 14px;
- line-height: 20px;
- color: var(--u-text-color-base);
- margin-bottom: 2px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- `), (0, cssr_1.cE)('item-subtitle', `
- font-size: 12px;
- line-height: 16px;
- color: var(--u-text-color-disabled);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
  `), (0, cssr_1.cE)('item-indicators', `
  display: flex;
  flex-direction: column;
@@ -162,10 +137,9 @@ exports.default = (0, cssr_1.cB)('chat', `
  `, [(0, cssr_1.cE)('header', `
  border-bottom: 1px solid var(--u-border-color);
  width: 100%;
- padding: 24px 20px 8px 24px;
+ padding: 24px 20px 10px 24px;
  flex-shrink: 0;
  `), (0, cssr_1.cE)('header-title', `
- margin-top: 9px;
  color: var(--u-header-title-color);
  flex: 1;
  min-width: 0;
@@ -174,6 +148,14 @@ exports.default = (0, cssr_1.cB)('chat', `
  white-space: nowrap;
  display: block;
  margin-right: 16px;
+ `), (0, cssr_1.cE)('header-subtitle', `
+ display: block;
+ color: var(--u-sidebar-item-subtitle-color);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ minWidth: 0;
+ maxWidth: 100%;
  `), (0, cssr_1.cE)('header-actions', `
  padding: 4px;
  flex-shrink: 0;

package/lib/config-provider/src/ConfigProvider.d.ts

@@ -1,8 +1,8 @@
-import { type PropType, type ComputedRef, type ExtractPropTypes } from 'vue';
+import { type PropType, type ExtractPropTypes } from 'vue';
 import { type Hljs } from '../../_mixins';
 import type { UDateLocale, ULocale } from '../../locales';
 import type { GlobalTheme, GlobalThemeOverrides, GlobalComponentConfig, GlobalIconConfig } from './interface';
-import type { RtlProp, Breakpoints, BreakpointProps, BreakpointThemeOverrides } from './internal-interface';
+import type { RtlProp, Breakpoints, BreakpointProps, BreakpointThemeOverrides, BreakpointMode } from './internal-interface';
 import type { Katex } from './katex';
 export declare const configProviderProps: {
     readonly abstract: BooleanConstructor;
@@ -31,6 +31,10 @@ export declare const configProviderProps: {
     readonly breakpoints: PropType<Breakpoints>;
     readonly breakpointProps: PropType<BreakpointProps>;
     readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;
+    readonly breakpointMode: {
+        readonly type: PropType<BreakpointMode>;
+        readonly default: "desktop-first";
+    };
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
@@ -70,6 +74,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly breakpoints: PropType<Breakpoints>;
     readonly breakpointProps: PropType<BreakpointProps>;
     readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;
+    readonly breakpointMode: {
+        readonly type: PropType<BreakpointMode>;
+        readonly default: "desktop-first";
+    };
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
@@ -81,11 +89,11 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
 }, {
-    mergedClsPrefix: ComputedRef<string>;
-    mergedBordered: ComputedRef<boolean | undefined>;
-    mergedNamespace: ComputedRef<string | undefined>;
-    mergedTheme: ComputedRef<GlobalTheme | undefined>;
-    mergedThemeOverrides: ComputedRef<GlobalThemeOverrides | undefined>;
+    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedBordered: import("vue").ComputedRef<boolean | undefined>;
+    mergedNamespace: import("vue").ComputedRef<string | undefined>;
+    mergedTheme: import("vue").ComputedRef<GlobalTheme | undefined>;
+    mergedThemeOverrides: import("vue").ComputedRef<GlobalThemeOverrides | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     readonly abstract: BooleanConstructor;
     readonly bordered: {
@@ -113,6 +121,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly breakpoints: PropType<Breakpoints>;
     readonly breakpointProps: PropType<BreakpointProps>;
     readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;
+    readonly breakpointMode: {
+        readonly type: PropType<BreakpointMode>;
+        readonly default: "desktop-first";
+    };
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
@@ -128,6 +140,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly bordered: boolean | undefined;
     readonly clsPrefix: string;
     readonly tag: string;
+    readonly breakpointMode: BreakpointMode;
     readonly preflightStyleDisabled: boolean;
     readonly inlineThemeDisabled: boolean;
     readonly as: string | undefined;

package/lib/config-provider/src/ConfigProvider.js

@@ -32,6 +32,10 @@ exports.configProviderProps = {
     breakpoints: Object,
     breakpointProps: Object,
     breakpointThemeOverrides: Object,
+    breakpointMode: {
+        type: String,
+        default: 'desktop-first'
+    },
     preflightStyleDisabled: Boolean,
     inlineThemeDisabled: {
         type: Boolean,
@@ -56,7 +60,7 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedThemeRef = (0, vue_1.computed)(() => {
             const { theme } = props;
             if (theme === null)
-                return undefined;
+                return;
             const inheritedTheme = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedThemeRef.value;
             return theme === undefined
                 ? inheritedTheme
@@ -64,30 +68,64 @@ exports.default = (0, vue_1.defineComponent)({
                     ? theme
                     : Object.assign({}, inheritedTheme, theme);
         });
-        const getActiveBreakpointValue = (breakpointMap) => {
-            if (!breakpointMap || !_utils_1.isBrowser) {
-                return undefined;
-            }
-            const currentWidth = windowWidthRef.value;
+        const mergedBreakpointModeRef = (0, vue_1.computed)(() => {
+            const { breakpointMode } = props;
+            return (breakpointMode ||
+                (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointModeRef.value) ||
+                'desktop-first');
+        });
+        const getMergedBreakpointValues = (breakpointMap) => {
+            if (!breakpointMap)
+                return;
             const breakpointWidths = Object.keys(breakpointMap)
                 .map(Number)
-                .filter((width) => width <= currentWidth)
-                .sort((a, b) => b - a);
-            if (breakpointWidths.length === 0) {
-                return undefined;
+                .sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+            const mergedMap = {};
+            let previousValue;
+            for (const width of breakpointWidths) {
+                if (previousValue !== undefined) {
+                    mergedMap[width] = (0, lodash_1.merge)({}, previousValue, breakpointMap[width]);
+                }
+                else {
+                    mergedMap[width] = breakpointMap[width];
+                }
+                previousValue = mergedMap[width];
+            }
+            return mergedMap;
+        };
+        const getActiveBreakpointValue = (breakpointMap, mode = 'desktop-first') => {
+            if (!breakpointMap || !_utils_1.isBrowser)
+                return;
+            const mergedMap = getMergedBreakpointValues(breakpointMap);
+            if (!mergedMap)
+                return;
+            const currentWidth = windowWidthRef.value;
+            const breakpointWidths = Object.keys(mergedMap).map(Number);
+            let matchingBreakpoints;
+            if (mode === 'mobile-first') {
+                matchingBreakpoints = breakpointWidths
+                    .filter((width) => width >= currentWidth)
+                    .sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+            }
+            else {
+                matchingBreakpoints = breakpointWidths
+                    .filter((width) => width <= currentWidth)
+                    .sort((leftWidth, rightWidth) => rightWidth - leftWidth);
             }
-            const activeBreakpoint = breakpointWidths[0];
-            return breakpointMap[activeBreakpoint];
+            if (matchingBreakpoints.length === 0)
+                return;
+            const activeBreakpoint = matchingBreakpoints[0];
+            return mergedMap[activeBreakpoint];
         };
-        const activeBreakPointThemeOverridesRef = (0, vue_1.computed)(() => {
+        const activeBreakpointThemeOverridesRef = (0, vue_1.computed)(() => {
             const { breakpointThemeOverrides } = props;
             const breakpointThemeOverridesToUse = breakpointThemeOverrides !== null && breakpointThemeOverrides !== void 0 ? breakpointThemeOverrides : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointThemeOverridesRef.value;
-            return getActiveBreakpointValue(breakpointThemeOverridesToUse);
+            return getActiveBreakpointValue(breakpointThemeOverridesToUse, mergedBreakpointModeRef.value);
         });
         const mergedThemeOverridesRef = (0, vue_1.computed)(() => {
             const { themeOverrides } = props;
             if (themeOverrides === null)
-                return undefined;
+                return;
             let baseThemeOverrides;
             if (themeOverrides === undefined) {
                 baseThemeOverrides = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedThemeOverridesRef.value;
@@ -101,14 +139,14 @@ exports.default = (0, vue_1.defineComponent)({
                     baseThemeOverrides = (0, lodash_1.merge)({}, inheritedThemeOverrides, themeOverrides);
                 }
             }
-            const activeBreakPointThemeOverrides = activeBreakPointThemeOverridesRef.value;
-            if (!activeBreakPointThemeOverrides) {
+            const activeBreakpointThemeOverrides = activeBreakpointThemeOverridesRef.value;
+            if (!activeBreakpointThemeOverrides) {
                 return baseThemeOverrides;
             }
             if (!baseThemeOverrides) {
-                return activeBreakPointThemeOverrides;
+                return activeBreakpointThemeOverrides;
             }
-            return (0, lodash_1.merge)({}, baseThemeOverrides, activeBreakPointThemeOverrides);
+            return (0, lodash_1.merge)({}, baseThemeOverrides, activeBreakpointThemeOverrides);
         });
         const mergedNamespaceRef = (0, vooks_1.useMemo)(() => {
             const { namespace } = props;
@@ -143,24 +181,24 @@ exports.default = (0, vue_1.defineComponent)({
                 window.removeEventListener('resize', updateWindowWidth);
             }
         });
-        const activeBreakPointPropsRef = (0, vue_1.computed)(() => {
+        const activeBreakpointPropsRef = (0, vue_1.computed)(() => {
             const { breakpointProps } = props;
             const breakpointPropsToUse = breakpointProps !== null && breakpointProps !== void 0 ? breakpointProps : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointPropsRef.value;
-            return getActiveBreakpointValue(breakpointPropsToUse);
+            return getActiveBreakpointValue(breakpointPropsToUse, mergedBreakpointModeRef.value);
         });
         const mergedComponentPropsRef = (0, vue_1.computed)(() => {
             const { componentOptions } = props;
             const baseComponentOptions = componentOptions !== undefined
                 ? componentOptions
                 : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedComponentPropsRef.value;
-            const activeBreakPointProps = activeBreakPointPropsRef.value;
-            if (!activeBreakPointProps) {
+            const activeBreakpointProps = activeBreakpointPropsRef.value;
+            if (!activeBreakpointProps) {
                 return baseComponentOptions;
             }
             if (!baseComponentOptions) {
-                return activeBreakPointProps;
+                return activeBreakpointProps;
             }
-            return (0, lodash_1.merge)({}, baseComponentOptions, activeBreakPointProps);
+            return (0, lodash_1.merge)({}, baseComponentOptions, activeBreakpointProps);
         });
         const mergedClsPrefixRef = (0, vue_1.computed)(() => {
             const { clsPrefix } = props;
@@ -230,13 +268,16 @@ exports.default = (0, vue_1.defineComponent)({
             mergedComponentPropsRef,
             mergedBreakpointPropsRef,
             mergedBreakpointThemeOverridesRef,
+            mergedBreakpointModeRef,
+            activeBreakpointPropsRef,
+            activeBreakpointThemeOverridesRef,
             mergedBorderedRef,
             mergedNamespaceRef,
             mergedClsPrefixRef,
             mergedLocaleRef: (0, vue_1.computed)(() => {
                 const { locale } = props;
                 if (locale === null)
-                    return undefined;
+                    return;
                 return locale === undefined
                     ? UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedLocaleRef.value
                     : locale;
@@ -244,7 +285,7 @@ exports.default = (0, vue_1.defineComponent)({
             mergedDateLocaleRef: (0, vue_1.computed)(() => {
                 const { dateLocale } = props;
                 if (dateLocale === null)
-                    return undefined;
+                    return;
                 return dateLocale === undefined
                     ? UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedDateLocaleRef.value
                     : dateLocale;

package/lib/config-provider/src/interface.d.ts

@@ -13,4 +13,4 @@ export type GlobalThemeOverrides = {
 } & {
     [key in keyof GlobalThemeWithoutCommon]?: ExtractThemeOverrides<GlobalThemeWithoutCommon[key]>;
 };
-export type { GlobalIconConfig, GlobalComponentConfig, BreakpointProps, BreakpointThemeOverrides } from './internal-interface';
+export type { GlobalIconConfig, GlobalComponentConfig, BreakpointProps, BreakpointThemeOverrides, BreakpointMode } from './internal-interface';

package/lib/config-provider/src/internal-interface.d.ts

@@ -429,6 +429,7 @@ export type RtlEnabledState = Partial<Record<keyof GlobalThemeWithoutCommon, Rtl
 export type Breakpoints = Record<string, number> | undefined;
 export type BreakpointProps = Record<number, GlobalComponentConfig> | undefined;
 export type BreakpointThemeOverrides = Record<number, GlobalThemeOverrides> | undefined;
+export type BreakpointMode = 'mobile-first' | 'desktop-first';
 export interface ConfigProviderInjection {
     mergedBreakpointsRef: Ref<Breakpoints | undefined>;
     mergedClsPrefixRef: Ref<string>;
@@ -446,6 +447,9 @@ export interface ConfigProviderInjection {
     mergedThemeHashRef: Ref<string>;
     mergedBreakpointPropsRef: Ref<BreakpointProps | undefined>;
     mergedBreakpointThemeOverridesRef: Ref<BreakpointThemeOverrides | undefined>;
+    mergedBreakpointModeRef: Ref<BreakpointMode>;
+    activeBreakpointPropsRef: Ref<GlobalComponentConfig | undefined>;
+    activeBreakpointThemeOverridesRef: Ref<GlobalThemeOverrides | undefined>;
     inlineThemeDisabled: boolean;
     preflightStyleDisabled: boolean;
 }

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.12";
+declare const _default: "1.12.14";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.12.12';
+exports.default = '1.12.14';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "1.12.12",
+  "version": "1.12.14",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.js",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "1.12.12",
+  "version": "1.12.14",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {
@@ -3701,6 +3701,13 @@
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
               "type": "object"
             },
+            {
+              "name": "breakpoint-mode",
+              "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
+              "type": "'mobile-first' | 'desktop-first'",
+              "description": "Controls how breakpoints are applied. In `desktop-first` mode (default), applies the largest breakpoint ≤ current width. In `mobile-first` mode, applies the smallest breakpoint ≥ current width.",
+              "default": "'desktop-first'"
+            },
             {
               "name": "preflight-style-disabled",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
@@ -3730,14 +3737,14 @@
               "name": "break-point-props",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
               "type": "{ [width: number]: GlobalComponentConfig }",
-              "description": "Component props configuration based on screen width. When screen width is less than or equal to the specified width, the corresponding component props will be applied. Useful for responsive design (e.g., smaller button size on mobile).",
+              "description": "Component props configuration based on screen width. The behavior depends on `breakpoint-mode`. Values from previous breakpoints are inherited by default unless explicitly overridden.",
               "default": "undefined"
             },
             {
               "name": "break-point-theme-overrides",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
               "type": "{ [width: number]: GlobalThemeOverrides }",
-              "description": "Theme variables configuration based on screen width. When screen width is less than or equal to the specified width, the corresponding theme overrides will be applied. Useful for responsive theming (e.g., different colors on mobile vs desktop).",
+              "description": "Theme variables configuration based on screen width. The behavior depends on `breakpoint-mode`. Values from previous breakpoints are inherited by default unless explicitly overridden.",
               "default": "undefined"
             },
             {