@lumx/core 3.20.1-alpha.49 → 3.20.1-alpha.50

package/js/utils/classNames/bem/block.d.ts

@@ -1,6 +1,5 @@
 import type { ClassValue } from 'classnames/types';
-import type { KebabCase } from '@lumx/core/js/types';
-import { type Modifier, type RawModifier } from './generateBEMClass';
+import { type Modifier } from './generateBEMClass';
 /**
  * Creates a BEM block class generator function for the given base class.
  * Returns a function that generates BEM class names with optional modifiers.
@@ -16,4 +15,4 @@ import { type Modifier, type RawModifier } from './generateBEMClass';
  * button('primary'); // 'my-button my-button--primary'
  * button({ active: true }); // 'my-button my-button--active'
  */
-export declare const block: <B extends string>(baseClass: KebabCase<B>) => <M extends RawModifier>(modifier?: Modifier<M>, additionalClasses?: ClassValue | ClassValue[]) => string;
+export declare const block: (baseClass: string) => (modifier?: Modifier, additionalClasses?: ClassValue | ClassValue[]) => string;

package/js/utils/classNames/bem/element.d.ts

@@ -1,6 +1,5 @@
 import type { ClassValue } from 'classnames/types';
-import type { KebabCase } from '@lumx/core/js/types';
-import { type Modifier, type RawModifier } from './generateBEMClass';
+import { type Modifier } from './generateBEMClass';
 /**
  * Creates a BEM element class generator function for the given base class.
  * Returns a function that generates BEM element class names with optional modifiers.
@@ -17,4 +16,4 @@ import { type Modifier, type RawModifier } from './generateBEMClass';
  * button('icon', 'large'); // 'my-button__icon my-button__icon--large'
  * button('icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
-export declare const element: <B extends string>(baseClass: KebabCase<B>) => <E extends string, M extends RawModifier>(elem: KebabCase<E>, modifier?: Modifier<M>, additionalClasses?: ClassValue | ClassValue[]) => string;
+export declare const element: (baseClass: string) => (elem: string, modifier?: Modifier, additionalClasses?: ClassValue | ClassValue[]) => string;

package/js/utils/classNames/bem/generateBEMClass.d.ts

@@ -1,15 +1,11 @@
 import type { ClassValue } from 'classnames/types';
-import type { KebabCase } from '@lumx/core/js/types';
-export type RawModifier = string | Record<string, boolean> | ClassValue[];
 /**
  * Modifier
  * @example 'is-disabled'
  * @example { 'is-disabled': true, 'is-selected': false }
  * @example ['another-class'] // => Added as-is, not as a BEM modifier suffix
  */
-export type Modifier<T extends RawModifier> = T extends string ? KebabCase<T> : T extends Record<string, boolean> ? {
-    [K in keyof T as KebabCase<K>]?: boolean;
-} : T;
+export type Modifier = string | Record<string, boolean | undefined | null> | ClassValue[];
 /**
  * Generates a BEM (Block Element Modifier) class name string.
  * Combines a base class with optional modifiers and additional classes.
@@ -28,4 +24,4 @@ export type Modifier<T extends RawModifier> = T extends string ? KebabCase<T> :
  * generateBEMClass('button', { active: true, disabled: false }); // 'button button--active'
  * generateBEMClass('button', 'primary', 'my-class'); // 'button button--primary my-class'
  */
-export declare function generateBEMClass<M extends RawModifier>(baseClass: string, modifier?: Modifier<M>, additionalClasses?: ClassValue | ClassValue[]): string;
+export declare function generateBEMClass(baseClass: string, modifier?: Modifier, additionalClasses?: ClassValue | ClassValue[]): string;

package/js/utils/classNames/color/index.d.ts

@@ -14,7 +14,7 @@ import { ColorVariant, ColorWithVariants } from '@lumx/core/js/constants';
  * color('font', 'primary-L2'); // 'lumx-color-font-primary-L2'
  * color('font', undefined); // undefined
  */
-export declare function color(type: 'font' | 'background', propColor: ColorWithVariants, propColorVariant?: ColorVariant): string | undefined;
+export declare function color(type: 'font' | 'background', propColor: ColorWithVariants, propColorVariant?: ColorVariant): string;
 /**
  * Generates a Lumx background color class name for the given color and variant.
  *
@@ -26,7 +26,7 @@ export declare function color(type: 'font' | 'background', propColor: ColorWithV
  * background('dark', 'L2'); // 'lumx-color-background-dark-L2'
  * background('primary', 'N'); // 'lumx-color-background-primary-N'
  */
-export declare const background: (propColor: ColorWithVariants, propColorVariant?: ColorVariant) => string | undefined;
+export declare const background: (propColor: ColorWithVariants, propColorVariant?: ColorVariant) => string;
 /**
  * Generates a Lumx font color class name for the given color and variant.
  *
@@ -40,4 +40,4 @@ export declare const background: (propColor: ColorWithVariants, propColorVariant
  * font('primary'); // 'lumx-color-font-primary-N'
  * font(undefined); // undefined
  */
-export declare const font: (propColor: ColorWithVariants, propColorVariant?: ColorVariant) => string | undefined;
+export declare const font: (propColor: ColorWithVariants, propColorVariant?: ColorVariant) => string;

package/js/utils/classNames/color/index.js

@@ -17,8 +17,6 @@ import { resolveColorWithVariants } from '../../../../_internal/DPnPEC08.js';
  * color('font', undefined); // undefined
  */
 function color(type, propColor, propColorVariant) {
-    if (!propColor)
-        return undefined;
     const [cColor, cColorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
     return `lumx-color-${type}-${cColor}-${cColorVariant}`;
 }

package/js/utils/classNames/spacing/index.d.ts

@@ -8,7 +8,7 @@ import type { Size } from '@lumx/core/js/constants';
  * @param size - Size
  * @returns string
  */
-export declare const spacing: (type: Spacing, direction?: Direction, size?: Size | null) => string;
+export declare function spacing(type: Spacing, direction?: Direction, size?: Size | null): string;
 /**
  * Returns a list of lumx classnames for the given types, directions and sizes. For example, for
  * arguments [

package/js/utils/classNames/spacing/index.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  * @param size - Size
  * @returns string
  */
-const spacing = (type, direction, size) => {
+function spacing(type, direction, size) {
     let baseClass = `lumx-spacing-${type}`;
     if (direction && direction !== 'all') {
         baseClass = `${baseClass}-${direction}`;
@@ -20,7 +20,7 @@ const spacing = (type, direction, size) => {
         baseClass = `${baseClass}-none`;
     }
     return baseClass;
-};
+}
 /**
  * Returns a list of lumx classnames for the given types, directions and sizes. For example, for
  * arguments [
@@ -31,9 +31,7 @@ const spacing = (type, direction, size) => {
  * @param spacingConfigs - Array of spacing configurations with direction and size
  * @returns string
  */
-const spacings = (spacingConfigs) => {
-    return classnames(spacingConfigs.map((spa) => spacing(spa.type, spa.direction, spa.size)));
-};
+const spacings = (spacingConfigs) => classnames(spacingConfigs.map((spa) => spacing(spa.type, spa.direction, spa.size)));
 /**
  * Returns a lumx margin classname for the given direction and size. For example, for
  * arguments direction='right', size='regular' it returns lumx-spacing-margin-right-regular

package/package.json

@@ -35,7 +35,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.49",
+    "version": "3.20.1-alpha.50",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@types/react": "^17.0.2",