@uzum-tech/ui 1.12.13 → 1.12.14

package/es/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/es/config-provider/src/ConfigProvider.js

@@ -29,6 +29,10 @@ export const configProviderProps = {
     breakpoints: Object,
     breakpointProps: Object,
     breakpointThemeOverrides: Object,
+    breakpointMode: {
+        type: String,
+        default: 'desktop-first'
+    },
     preflightStyleDisabled: Boolean,
     inlineThemeDisabled: {
         type: Boolean,
@@ -53,7 +57,7 @@ export default defineComponent({
         const mergedThemeRef = 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
@@ -61,30 +65,64 @@ export default defineComponent({
                     ? theme
                     : Object.assign({}, inheritedTheme, theme);
         });
-        const getActiveBreakpointValue = (breakpointMap) => {
-            if (!breakpointMap || !isBrowser) {
-                return undefined;
-            }
-            const currentWidth = windowWidthRef.value;
+        const mergedBreakpointModeRef = 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] = merge({}, previousValue, breakpointMap[width]);
+                }
+                else {
+                    mergedMap[width] = breakpointMap[width];
+                }
+                previousValue = mergedMap[width];
+            }
+            return mergedMap;
+        };
+        const getActiveBreakpointValue = (breakpointMap, mode = 'desktop-first') => {
+            if (!breakpointMap || !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 = computed(() => {
+        const activeBreakpointThemeOverridesRef = 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 = 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;
@@ -98,14 +136,14 @@ export default defineComponent({
                     baseThemeOverrides = merge({}, inheritedThemeOverrides, themeOverrides);
                 }
             }
-            const activeBreakPointThemeOverrides = activeBreakPointThemeOverridesRef.value;
-            if (!activeBreakPointThemeOverrides) {
+            const activeBreakpointThemeOverrides = activeBreakpointThemeOverridesRef.value;
+            if (!activeBreakpointThemeOverrides) {
                 return baseThemeOverrides;
             }
             if (!baseThemeOverrides) {
-                return activeBreakPointThemeOverrides;
+                return activeBreakpointThemeOverrides;
             }
-            return merge({}, baseThemeOverrides, activeBreakPointThemeOverrides);
+            return merge({}, baseThemeOverrides, activeBreakpointThemeOverrides);
         });
         const mergedNamespaceRef = useMemo(() => {
             const { namespace } = props;
@@ -140,24 +178,24 @@ export default defineComponent({
                 window.removeEventListener('resize', updateWindowWidth);
             }
         });
-        const activeBreakPointPropsRef = computed(() => {
+        const activeBreakpointPropsRef = 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 = 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 merge({}, baseComponentOptions, activeBreakPointProps);
+            return merge({}, baseComponentOptions, activeBreakpointProps);
         });
         const mergedClsPrefixRef = computed(() => {
             const { clsPrefix } = props;
@@ -227,13 +265,16 @@ export default defineComponent({
             mergedComponentPropsRef,
             mergedBreakpointPropsRef,
             mergedBreakpointThemeOverridesRef,
+            mergedBreakpointModeRef,
+            activeBreakpointPropsRef,
+            activeBreakpointThemeOverridesRef,
             mergedBorderedRef,
             mergedNamespaceRef,
             mergedClsPrefixRef,
             mergedLocaleRef: computed(() => {
                 const { locale } = props;
                 if (locale === null)
-                    return undefined;
+                    return;
                 return locale === undefined
                     ? UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedLocaleRef.value
                     : locale;
@@ -241,7 +282,7 @@ export default defineComponent({
             mergedDateLocaleRef: 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/es/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/es/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/es/version.d.ts

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

package/es/version.js

@@ -1 +1 @@
-export default '1.12.13';
+export default '1.12.14';

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.13";
+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.13';
+exports.default = '1.12.14';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "1.12.13",
+  "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.13",
+  "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"
             },
             {