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

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

@@ -9,7 +9,6 @@ import { type Modifier, type RawModifier } from './generateBEMClass';
  * @returns A function that accepts:
  *   - modifier - Optional BEM modifier (string, object, or array)
  *   - additionalClasses - Optional additional classes to include
- *   - modifierLast - Whether to append modifier classes last (default: false)
  *
  * @example
  * const button = block('my-button');
@@ -17,4 +16,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[], modifierLast?: boolean) => string;
+export declare const block: <B extends string>(baseClass: KebabCase<B>) => <M extends RawModifier>(modifier?: Modifier<M>, additionalClasses?: ClassValue | ClassValue[]) => string;

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

@@ -8,7 +8,6 @@ import { generateBEMClass } from './generateBEMClass.js';
  * @returns A function that accepts:
  *   - modifier - Optional BEM modifier (string, object, or array)
  *   - additionalClasses - Optional additional classes to include
- *   - modifierLast - Whether to append modifier classes last (default: false)
  *
  * @example
  * const button = block('my-button');
@@ -16,8 +15,6 @@ import { generateBEMClass } from './generateBEMClass.js';
  * button('primary'); // 'my-button my-button--primary'
  * button({ active: true }); // 'my-button my-button--active'
  */
-const block = (baseClass) => (modifier, additionalClasses, modifierLast) => {
-    return generateBEMClass(baseClass, modifier, additionalClasses, modifierLast);
-};
+const block = (baseClass) => (modifier, additionalClasses) => generateBEMClass(baseClass, modifier, additionalClasses);
 
 export { block };

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

@@ -10,7 +10,6 @@ import { type Modifier, type RawModifier } from './generateBEMClass';
  *   - elem - The BEM element name (e.g., 'icon', 'title')
  *   - modifier - Optional BEM modifier (string, object, or array)
  *   - additionalClasses - Optional additional classes to include
- *   - modifierLast - Whether to append modifier classes last (default: false)
  *
  * @example
  * const button = element('my-button');
@@ -18,4 +17,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[], modifierLast?: boolean) => string;
+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;

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

@@ -9,7 +9,6 @@ import { generateBEMClass } from './generateBEMClass.js';
  *   - elem - The BEM element name (e.g., 'icon', 'title')
  *   - modifier - Optional BEM modifier (string, object, or array)
  *   - additionalClasses - Optional additional classes to include
- *   - modifierLast - Whether to append modifier classes last (default: false)
  *
  * @example
  * const button = element('my-button');
@@ -17,9 +16,6 @@ import { generateBEMClass } from './generateBEMClass.js';
  * button('icon', 'large'); // 'my-button__icon my-button__icon--large'
  * button('icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
-const element = (baseClass) => (elem, modifier, additionalClasses, modifierLast) => {
-    const elementClassname = `${baseClass}__${elem}`;
-    return generateBEMClass(elementClassname, modifier, additionalClasses, modifierLast);
-};
+const element = (baseClass) => (elem, modifier, additionalClasses) => generateBEMClass(`${baseClass}__${elem}`, modifier, additionalClasses);
 
 export { element };

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

@@ -7,9 +7,9 @@ export type RawModifier = string | Record<string, boolean> | ClassValue[];
  * @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 ClassValue[] ? T : {
+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;
 /**
  * Generates a BEM (Block Element Modifier) class name string.
  * Combines a base class with optional modifiers and additional classes.
@@ -20,7 +20,6 @@ export type Modifier<T extends RawModifier> = T extends string ? KebabCase<T> :
  *   - object: creates `baseClass--key` for each truthy value
  *   - array: passes through as additional classes
  * @param additionalClasses - Optional additional classes to include
- * @param modifierLast - If true, appends modifier classes after additional classes (default: false)
  * @returns Combined class name string
  *
  * @example
@@ -29,4 +28,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<B extends string, M extends RawModifier>(baseClass: KebabCase<B>, modifier?: Modifier<M>, additionalClasses?: ClassValue | ClassValue[], modifierLast?: boolean): string;
+export declare function generateBEMClass<M extends RawModifier>(baseClass: string, modifier?: Modifier<M>, additionalClasses?: ClassValue | ClassValue[]): string;

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

@@ -1,18 +1,19 @@
 import classnames from 'classnames';
 
-function parseModifier(baseClass, modifier) {
-    const classes = [];
-    if (typeof modifier === 'string') {
-        classes.push(`${baseClass}--${modifier}`);
+function generateModifierClasses(baseClass, modifier) {
+    if (!modifier) {
+        return undefined;
     }
-    else if (Array.isArray(modifier)) {
+    if (Array.isArray(modifier)) {
         return modifier;
     }
-    else if (modifier && typeof modifier === 'object') {
-        for (const [key, value] of Object.entries(modifier)) {
-            if (value)
-                classes.push(`${baseClass}--${key}`);
-        }
+    if (typeof modifier === 'string') {
+        return `${baseClass}--${modifier}`;
+    }
+    const classes = [];
+    for (const [key, value] of Object.entries(modifier)) {
+        if (value)
+            classes.push(`${baseClass}--${key}`);
     }
     return classes;
 }
@@ -26,7 +27,6 @@ function parseModifier(baseClass, modifier) {
  *   - object: creates `baseClass--key` for each truthy value
  *   - array: passes through as additional classes
  * @param additionalClasses - Optional additional classes to include
- * @param modifierLast - If true, appends modifier classes after additional classes (default: false)
  * @returns Combined class name string
  *
  * @example
@@ -35,14 +35,14 @@ function parseModifier(baseClass, modifier) {
  * generateBEMClass('button', { active: true, disabled: false }); // 'button button--active'
  * generateBEMClass('button', 'primary', 'my-class'); // 'button button--primary my-class'
  */
-function generateBEMClass(baseClass, modifier, additionalClasses, modifierLast) {
-    if (!modifier && !additionalClasses) {
-        return baseClass;
-    }
-    if (modifierLast) {
-        return classnames(baseClass, additionalClasses, modifier && parseModifier(baseClass, modifier));
-    }
-    return classnames(baseClass, modifier && parseModifier(baseClass, modifier), additionalClasses);
+function generateBEMClass(baseClass, modifier, additionalClasses) {
+    return classnames(
+    // Base class
+    baseClass, 
+    // Modifier(s)
+    generateModifierClasses(baseClass, modifier), 
+    // Additional classes
+    additionalClasses);
 }
 
 export { generateBEMClass };

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

@@ -14,19 +14,19 @@ 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 | undefined;
 /**
  * Generates a Lumx background color class name for the given color and variant.
  *
- * @param col - The color palette name (e.g., 'primary', 'dark', 'light')
- * @param variant - The color variant (e.g., 'L1', 'L2', 'D1', 'N')
+ * @param propColor - The color palette name (e.g., 'primary', 'dark', 'light')
+ * @param propColorVariant - The color variant (e.g., 'L1', 'L2', 'D1', 'N')
  * @returns The Lumx background color class name
  *
  * @example
  * background('dark', 'L2'); // 'lumx-color-background-dark-L2'
  * background('primary', 'N'); // 'lumx-color-background-primary-N'
  */
-export declare const background: (col?: ColorWithVariants, variant?: ColorVariant) => string | undefined;
+export declare const background: (propColor: ColorWithVariants, propColorVariant?: ColorVariant) => string | undefined;
 /**
  * Generates a Lumx font color class name for the given color and variant.
  *
@@ -40,4 +40,4 @@ export declare const background: (col?: ColorWithVariants, variant?: ColorVarian
  * 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 | undefined;

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

@@ -25,15 +25,15 @@ function color(type, propColor, propColorVariant) {
 /**
  * Generates a Lumx background color class name for the given color and variant.
  *
- * @param col - The color palette name (e.g., 'primary', 'dark', 'light')
- * @param variant - The color variant (e.g., 'L1', 'L2', 'D1', 'N')
+ * @param propColor - The color palette name (e.g., 'primary', 'dark', 'light')
+ * @param propColorVariant - The color variant (e.g., 'L1', 'L2', 'D1', 'N')
  * @returns The Lumx background color class name
  *
  * @example
  * background('dark', 'L2'); // 'lumx-color-background-dark-L2'
  * background('primary', 'N'); // 'lumx-color-background-primary-N'
  */
-const background = (col, variant) => color('background', col, variant);
+const background = (propColor, propColorVariant) => color('background', propColor, propColorVariant);
 /**
  * Generates a Lumx font color class name for the given color and variant.
  *

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

@@ -3,4 +3,4 @@ import type { Typography } from '@lumx/core/js/constants';
  * Returns the classname associated to the given typography. For example, for Typography.title it returns
  * lumx-typography-title
  */
-export declare function typography(typo?: Typography): string | undefined;
+export declare function typography(typo: Typography): string;

package/js/utils/classNames/typography/index.js

@@ -3,8 +3,6 @@
  * lumx-typography-title
  */
 function typography(typo) {
-    if (!typo)
-        return undefined;
     return `lumx-typography-${typo}`;
 }
 

package/package.json

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