@lumx/core 3.20.1-alpha.42 → 3.20.1-alpha.44

package/js/constants/index.d.ts

@@ -1,8 +1,4 @@
 import { ValueOf } from '../types/ValueOf';
-/**
- * The prefix to use for the CSS classes.
- */
-export declare const CSS_PREFIX = "lumx";
 /**
  * Key codes.
  */
@@ -230,3 +226,7 @@ export declare const ColorVariant: {
 export type ColorVariant = ValueOf<typeof ColorVariant>;
 /** ColorPalette with all possible color variant combination */
 export type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
+/**
+ * Visually hidden a11y utility class name
+ */
+export declare const VISUALLY_HIDDEN = "visually-hidden";

package/js/constants/index.js

@@ -1,9 +1,8 @@
 export { BACKSPACE_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESCAPE_KEY_CODE, LEFT_KEY_CODE, RIGHT_KEY_CODE, SPACE_KEY_CODE, TAB_KEY_CODE, UP_KEY_CODE } from './keycodes.js';
 
 /**
- * The prefix to use for the CSS classes.
+ * Key codes.
  */
-const CSS_PREFIX = 'lumx';
 /**
  * Animation duration constants. Take into consideration that if you change one of these variables,
  * you need to update their scss counterpart as well
@@ -181,5 +180,9 @@ const ColorVariant = {
     L6: 'L6',
     N: 'N',
 };
+/**
+ * Visually hidden a11y utility class name
+ */
+const VISUALLY_HIDDEN = 'visually-hidden';
 
-export { Alignment, AspectRatio, CSS_PREFIX, ColorPalette, ColorVariant, DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, Emphasis, Kind, NOTIFICATION_TRANSITION_DURATION, Orientation, SLIDESHOW_TRANSITION_DURATION, Size, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, Emphasis, Kind, NOTIFICATION_TRANSITION_DURATION, Orientation, SLIDESHOW_TRANSITION_DURATION, Size, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, VISUALLY_HIDDEN, WhiteSpace };

package/js/types/Direction.d.ts

@@ -0,0 +1 @@
+export type Direction = 'top' | 'right' | 'bottom' | 'left' | 'vertical' | 'horizontal' | 'all';

package/js/types/Direction.js

@@ -0,0 +1 @@
+

package/js/types/KebabCase.d.ts

@@ -0,0 +1,2 @@
+/** Transform a string literal into kebab case */
+export type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T> ? `${Uncapitalize<C>}${KebabCase<T>}` : `${Uncapitalize<C>}-${KebabCase<T>}` : S;

package/js/types/KebabCase.js

@@ -0,0 +1 @@
+

package/js/types/LumxClassName.d.ts

@@ -0,0 +1,3 @@
+import type { KebabCase } from './KebabCase';
+/** Transform the component name into the lumx class name. */
+export type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;

package/js/types/LumxClassName.js

@@ -0,0 +1 @@
+

package/js/types/Spacing.d.ts

@@ -0,0 +1 @@
+export type Spacing = 'margin' | 'padding';

package/js/types/Spacing.js

@@ -0,0 +1 @@
+

package/js/types/index.d.ts

@@ -6,8 +6,12 @@ export type { HasCloseMode } from './HasCloseMode';
 export type { HasTheme } from './HasTheme';
 export type { GenericProps } from './GenericProps';
 export type { HeadingElement } from './HeadingElement';
+export type { KebabCase } from './KebabCase';
 export type { Point } from './Point';
 export type { Predicate } from './Predicate';
 export type { RectSize } from './RectSize';
 export type { TextElement } from './TextElement';
 export type { ValueOf } from './ValueOf';
+export type { LumxClassName } from './LumxClassName';
+export type { Direction } from './Direction';
+export type { Spacing } from './Spacing';

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

@@ -0,0 +1,20 @@
+import type { ClassValue } from 'classnames/types';
+import type { KebabCase } from '@lumx/core/js/types';
+import { type Modifier, type RawModifier } 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.
+ *
+ * @param baseClass - The base BEM block class name (e.g., 'button', 'card')
+ * @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');
+ * button(); // 'my-button'
+ * 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;

package/js/utils/className/bem/block.js

@@ -0,0 +1,23 @@
+import { generateBEMClass } from './generateBEMClass.js';
+
+/**
+ * Creates a BEM block class generator function for the given base class.
+ * Returns a function that generates BEM class names with optional modifiers.
+ *
+ * @param baseClass - The base BEM block class name (e.g., 'button', 'card')
+ * @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');
+ * button(); // 'my-button'
+ * 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);
+};
+
+export { block };

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

@@ -0,0 +1,21 @@
+import type { ClassValue } from 'classnames/types';
+import type { KebabCase } from '@lumx/core/js/types';
+import { type Modifier, type RawModifier } 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.
+ *
+ * @param baseClass - The base BEM block class name (e.g., 'button', 'card')
+ * @returns A function that accepts:
+ *   - 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');
+ * button('icon'); // 'my-button__icon'
+ * 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;

package/js/utils/className/bem/element.js

@@ -0,0 +1,25 @@
+import { generateBEMClass } from './generateBEMClass.js';
+
+/**
+ * Creates a BEM element class generator function for the given base class.
+ * Returns a function that generates BEM element class names with optional modifiers.
+ *
+ * @param baseClass - The base BEM block class name (e.g., 'button', 'card')
+ * @returns A function that accepts:
+ *   - 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');
+ * button('icon'); // 'my-button__icon'
+ * 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);
+};
+
+export { element };

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

@@ -0,0 +1,32 @@
+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 ClassValue[] ? T : {
+    [K in keyof T as KebabCase<K>]?: boolean;
+};
+/**
+ * Generates a BEM (Block Element Modifier) class name string.
+ * Combines a base class with optional modifiers and additional classes.
+ *
+ * @param baseClass - The base BEM class (block or element)
+ * @param modifier - Optional modifier as:
+ *   - string: creates `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
+ * generateBEMClass('button'); // 'button'
+ * generateBEMClass('button', 'primary'); // 'button button--primary'
+ * 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;

package/js/utils/className/bem/generateBEMClass.js

@@ -0,0 +1,48 @@
+import classnames from 'classnames';
+
+function parseModifier(baseClass, modifier) {
+    const classes = [];
+    if (typeof modifier === 'string') {
+        classes.push(`${baseClass}--${modifier}`);
+    }
+    else 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}`);
+        }
+    }
+    return classes;
+}
+/**
+ * Generates a BEM (Block Element Modifier) class name string.
+ * Combines a base class with optional modifiers and additional classes.
+ *
+ * @param baseClass - The base BEM class (block or element)
+ * @param modifier - Optional modifier as:
+ *   - string: creates `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
+ * generateBEMClass('button'); // 'button'
+ * generateBEMClass('button', 'primary'); // 'button button--primary'
+ * 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);
+}
+
+export { generateBEMClass };

package/js/utils/className/bem/index.d.ts

@@ -0,0 +1,2 @@
+export { block } from './block';
+export { element } from './element';

package/js/utils/className/bem/index.js

@@ -0,0 +1,2 @@
+export { block } from './block.js';
+export { element } from './element.js';

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

@@ -0,0 +1,43 @@
+import { ColorVariant, ColorWithVariants } from '@lumx/core/js/constants';
+/**
+ * Generates a Lumx color class name for the given type, color and variant.
+ * This is the base function used by font() and background() utilities.
+ *
+ * @param type - The color class type ('font' or 'background')
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx color class name or undefined if no color is provided
+ *
+ * @example
+ * color('font', 'dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * color('background', 'primary'); // 'lumx-color-background-primary-N'
+ * 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;
+/**
+ * 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')
+ * @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;
+/**
+ * Generates a Lumx font color class name for the given color and variant.
+ *
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx font color class name or undefined if no color is provided
+ *
+ * @example
+ * font('dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * font('primary-L2'); // 'lumx-color-font-primary-L2'
+ * font('primary'); // 'lumx-color-font-primary-N'
+ * font(undefined); // undefined
+ */
+export declare const font: (propColor?: ColorWithVariants, propColorVariant?: ColorVariant) => string | undefined;

package/js/utils/className/color/index.js

@@ -0,0 +1,52 @@
+import { ColorVariant } from '../../../constants/index.js';
+import { resolveColorWithVariants } from '../../color/resolveColorWithVariants.js';
+
+/**
+ * Generates a Lumx color class name for the given type, color and variant.
+ * This is the base function used by font() and background() utilities.
+ *
+ * @param type - The color class type ('font' or 'background')
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx color class name or undefined if no color is provided
+ *
+ * @example
+ * color('font', 'dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * color('background', 'primary'); // 'lumx-color-background-primary-N'
+ * color('font', 'primary-L2'); // 'lumx-color-font-primary-L2'
+ * 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}`;
+}
+/**
+ * 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')
+ * @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);
+/**
+ * Generates a Lumx font color class name for the given color and variant.
+ *
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx font color class name or undefined if no color is provided
+ *
+ * @example
+ * font('dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * font('primary-L2'); // 'lumx-color-font-primary-L2'
+ * font('primary'); // 'lumx-color-font-primary-N'
+ * font(undefined); // undefined
+ */
+const font = (propColor, propColorVariant) => color('font', propColor, propColorVariant);
+
+export { background, color, font };

package/js/utils/className/index.d.ts

@@ -1,6 +1,5 @@
-export { handleBasicClasses } from './handleBasicClasses';
-export { getBasicClass } from './getBasicClass';
-export { getRootClassName } from './getRootClassName';
-export { getTypographyClassName } from './getTypographyClassName';
-export { fontColorClass } from './fontColorClass';
-export { resolveColorWithVariants } from './resolveColorWithVariants';
+export * from './color';
+export * from './typography';
+export * from './spacing';
+export * from './visually-hidden';
+export * as bem from './bem';

package/js/utils/className/index.js

@@ -1,6 +1,6 @@
-export { handleBasicClasses } from './handleBasicClasses.js';
-export { getBasicClass } from './getBasicClass.js';
-export { getRootClassName } from './getRootClassName.js';
-export { getTypographyClassName } from './getTypographyClassName.js';
-export { fontColorClass } from './fontColorClass.js';
-export { resolveColorWithVariants } from './resolveColorWithVariants.js';
+export { background, color, font } from './color/index.js';
+export { typography } from './typography/index.js';
+export { margin, margins, padding, paddings, spacing, spacings } from './spacing/index.js';
+export { visuallyHidden } from './visually-hidden/index.js';
+import * as index from './bem/index.js';
+export { index as bem };

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

@@ -0,0 +1,70 @@
+import type { Direction, Spacing } from '@lumx/core/js/types';
+import type { Size } from '@lumx/core/js/constants';
+/**
+ * Returns a lumx classname for the given type, direction and size. For example, for
+ * arguments type='padding', direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ * @param type - margin or padding
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+export declare const 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 [
+ *  { type: 'padding', direction: 'right', size: 'regular'},
+ *  { type: 'margin', direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-padding-right-regular lumx-spacing-margin-left-big
+ * @param spacingConfigs - Array of spacing configurations with direction and size
+ * @returns string
+ */
+export declare const spacings: (spacingConfigs: {
+    type: Spacing;
+    direction?: Direction;
+    size?: Size | null;
+}[]) => string;
+/**
+ * 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
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+export declare const margin: (direction?: Direction, size?: Size | null) => string;
+/**
+ * Returns a list of lumx margin classnames for the given directions and sizes. For example, for
+ * arguments [
+ *  { direction: 'right', size: 'regular'},
+ *  { direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-margin-right-regular lumx-spacing-margin-left-big
+ * @param marginConfigs - Array of padding configurations with direction and size
+ * @returns string
+ */
+export declare const margins: (marginConfigs: {
+    direction?: Direction;
+    size?: Size | null;
+}[]) => string;
+/**
+ * Returns a lumx padding classname for the given direction and size. For example, for
+ * arguments direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+export declare const padding: (direction?: Direction, size?: Size | null) => string;
+/**
+ * Returns a list of lumx padding classnames for the given directions and sizes. For example, for
+ * arguments [
+ *  { direction: 'right', size: 'regular'},
+ *  { direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-padding-right-regular lumx-spacing-padding-left-big
+ * @param paddingConfigs - Array of padding configurations with direction and size
+ * @returns Combined padding classnames as a string
+ */
+export declare const paddings: (paddingConfigs: {
+    direction?: Direction;
+    size?: Size | null;
+}[]) => string;

package/js/utils/className/spacing/index.js

@@ -0,0 +1,76 @@
+import classnames from 'classnames';
+
+/**
+ * Returns a lumx classname for the given type, direction and size. For example, for
+ * arguments type='padding', direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ * @param type - margin or padding
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+const spacing = (type, direction, size) => {
+    let baseClass = `lumx-spacing-${type}`;
+    if (direction && direction !== 'all') {
+        baseClass = `${baseClass}-${direction}`;
+    }
+    if (size) {
+        baseClass = `${baseClass}-${size}`;
+    }
+    else if (size === null) {
+        baseClass = `${baseClass}-none`;
+    }
+    return baseClass;
+};
+/**
+ * Returns a list of lumx classnames for the given types, directions and sizes. For example, for
+ * arguments [
+ *  { type: 'padding', direction: 'right', size: 'regular'},
+ *  { type: 'margin', direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-padding-right-regular lumx-spacing-margin-left-big
+ * @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)));
+};
+/**
+ * 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
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+const margin = (direction, size) => spacing('margin', direction, size);
+/**
+ * Returns a list of lumx margin classnames for the given directions and sizes. For example, for
+ * arguments [
+ *  { direction: 'right', size: 'regular'},
+ *  { direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-margin-right-regular lumx-spacing-margin-left-big
+ * @param marginConfigs - Array of padding configurations with direction and size
+ * @returns string
+ */
+const margins = (marginConfigs) => spacings(marginConfigs.map(({ direction, size }) => ({ type: 'margin', direction, size })));
+/**
+ * Returns a lumx padding classname for the given direction and size. For example, for
+ * arguments direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+const padding = (direction, size) => spacing('padding', direction, size);
+/**
+ * Returns a list of lumx padding classnames for the given directions and sizes. For example, for
+ * arguments [
+ *  { direction: 'right', size: 'regular'},
+ *  { direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-padding-right-regular lumx-spacing-padding-left-big
+ * @param paddingConfigs - Array of padding configurations with direction and size
+ * @returns Combined padding classnames as a string
+ */
+const paddings = (paddingConfigs) => spacings(paddingConfigs.map(({ direction, size }) => ({ type: 'padding', direction, size })));
+
+export { margin, margins, padding, paddings, spacing, spacings };

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

@@ -0,0 +1,6 @@
+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;

package/js/utils/className/typography/index.js

@@ -0,0 +1,11 @@
+/**
+ * Returns the classname associated to the given typography. For example, for Typography.title it returns
+ * lumx-typography-title
+ */
+function typography(typo) {
+    if (!typo)
+        return undefined;
+    return `lumx-typography-${typo}`;
+}
+
+export { typography };

package/js/utils/className/visually-hidden/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Visually hidden class name.
+ * Used to hide elements from view but keep them readable from screen readers
+ */
+export declare const visuallyHidden: () => string;

package/js/utils/className/visually-hidden/index.js

@@ -0,0 +1,9 @@
+import { VISUALLY_HIDDEN } from '../../../constants/index.js';
+
+/**
+ * Visually hidden class name.
+ * Used to hide elements from view but keep them readable from screen readers
+ */
+const visuallyHidden = () => VISUALLY_HIDDEN;
+
+export { visuallyHidden };

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

@@ -0,0 +1 @@
+export { resolveColorWithVariants } from './resolveColorWithVariants';

package/js/utils/color/index.js

@@ -0,0 +1 @@
+export { resolveColorWithVariants } from './resolveColorWithVariants.js';

package/js/utils/{className → color}/resolveColorWithVariants.d.ts

@@ -1,3 +1,3 @@
-import { ColorPalette, ColorVariant, ColorWithVariants } from '../../constants';
+import type { ColorPalette, ColorVariant, ColorWithVariants } from '../../constants';
 /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
 export declare function resolveColorWithVariants(colorWithVariants?: ColorWithVariants, colorVariant?: ColorVariant): [color?: ColorPalette, colorVariant?: ColorVariant];

package/js/utils/index.d.ts

@@ -1,2 +1,3 @@
-export * from './className';
+export * as cls from './className';
+export * from './color';
 export * from './events';

package/js/utils/index.js

@@ -1,8 +1,5 @@
-export { handleBasicClasses } from './className/handleBasicClasses.js';
-export { getBasicClass } from './className/getBasicClass.js';
-export { getRootClassName } from './className/getRootClassName.js';
-export { getTypographyClassName } from './className/getTypographyClassName.js';
-export { fontColorClass } from './className/fontColorClass.js';
-export { resolveColorWithVariants } from './className/resolveColorWithVariants.js';
+import * as index from './className/index.js';
+export { index as cls };
+export { resolveColorWithVariants } from './color/resolveColorWithVariants.js';
 export { onButtonPressed, onEnterPressed, onEscapePressed } from './events/keyboard.js';
 export { detectHorizontalSwipe } from './events/swipe.js';

package/package.json

@@ -29,13 +29,13 @@
         "url": "git+https://github.com/lumapps/design-system.git"
     },
     "scripts": {
-        "generate:design-tokens": "yarn node style-dictionary",
+        "generate:design-tokens": "yarn node style-dictionary/index.cjs",
         "build": "rollup -c",
         "test": "vitest run",
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.42",
+    "version": "3.20.1-alpha.44",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@types/react": "^17.0.2",

package/js/utils/className/fontColorClass.d.ts

@@ -1,6 +0,0 @@
-import { ColorVariant, ColorWithVariants } from '../../constants';
-/**
- * Returns the classname associated to the given color and variant.
- * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
- */
-export declare function fontColorClass(propColor?: ColorWithVariants, propColorVariant?: ColorVariant): string | undefined;

package/js/utils/className/fontColorClass.js

@@ -1,15 +0,0 @@
-import { ColorVariant } from '../../constants/index.js';
-import { resolveColorWithVariants } from './resolveColorWithVariants.js';
-
-/**
- * Returns the classname associated to the given color and variant.
- * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
- */
-function fontColorClass(propColor, propColorVariant) {
-    if (!propColor)
-        return undefined;
-    const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
-    return `lumx-color-font-${color}-${colorVariant}`;
-}
-
-export { fontColorClass };

package/js/utils/className/getBasicClass.d.ts

@@ -1,13 +0,0 @@
-/**
- * Get the basic CSS class for the given type.
- *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
- * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
- * @return The basic CSS class.
- */
-export declare function getBasicClass({ prefix, type, value, }: {
-    prefix: string;
-    type: string;
-    value: string | number | boolean | undefined;
-}): string;

package/js/utils/className/getBasicClass.js

@@ -1,27 +0,0 @@
-import isBoolean from 'lodash/isBoolean';
-import kebabCase from 'lodash/kebabCase';
-
-/**
- * Get the basic CSS class for the given type.
- *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
- * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
- * @return The basic CSS class.
- */
-function getBasicClass({ prefix, type, value, }) {
-    if (isBoolean(value)) {
-        if (!value) {
-            // False value should not return a class.
-            return '';
-        }
-        const booleanPrefixes = ['has', 'is'];
-        if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
-            return `${prefix}--${kebabCase(type)}`;
-        }
-        return `${prefix}--is-${kebabCase(type)}`;
-    }
-    return `${prefix}--${kebabCase(type)}-${value}`;
-}
-
-export { getBasicClass };

package/js/utils/className/getRootClassName.d.ts

@@ -1,11 +0,0 @@
-/**
- * Get the name of the root CSS class of a component based on its name.
- *
- * @param  componentName The name of the component. This name should contains the component prefix and be
- *                       written in PascalCase.
- * @param  subComponent Whether the current component is a sub component, if true, define the class according
- *                      to BEM standards.
- * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in
- *         lower-snake-case.
- */
-export declare function getRootClassName(componentName: string, subComponent?: boolean): string;

package/js/utils/className/getRootClassName.js

@@ -1,24 +0,0 @@
-import kebabCase from 'lodash/kebabCase';
-import { CSS_PREFIX } from '../../constants/index.js';
-
-// See https://regex101.com/r/YjS1uI/3
-const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
-/**
- * Get the name of the root CSS class of a component based on its name.
- *
- * @param  componentName The name of the component. This name should contains the component prefix and be
- *                       written in PascalCase.
- * @param  subComponent Whether the current component is a sub component, if true, define the class according
- *                      to BEM standards.
- * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in
- *         lower-snake-case.
- */
-function getRootClassName(componentName, subComponent) {
-    const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;
-    if (subComponent) {
-        return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');
-    }
-    return formattedClassName;
-}
-
-export { getRootClassName };

package/js/utils/className/getTypographyClassName.d.ts

@@ -1,6 +0,0 @@
-import { Typography } from '../../constants';
-/**
- * Returns the classname associated to the given typography.
- * For example, for `Typography.title` it returns `lumx-typography-title`
- */
-export declare const getTypographyClassName: (typography: Typography) => string;

package/js/utils/className/getTypographyClassName.js

@@ -1,9 +0,0 @@
-/**
- * Returns the classname associated to the given typography.
- * For example, for `Typography.title` it returns `lumx-typography-title`
- */
-const getTypographyClassName = (typography) => {
-    return `lumx-typography-${typography}`;
-};
-
-export { getTypographyClassName };

package/js/utils/className/handleBasicClasses.d.ts

@@ -1,15 +0,0 @@
-/**
- * Return all basic LumX CSS classes which are available for every components.
- *
- * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
- *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  props  All the other props you want to generate a class.
- *                The rule of thumb: the key is the name of the prop in the class, the value a string that will
- *                be used in the classname to represent the value of the given prop.
- * @return All LumX basic CSS classes.
- */
-export declare function handleBasicClasses({ prefix, ...props }: {
-    prefix: string;
-    [prop: string]: any;
-}): string;

package/js/utils/className/handleBasicClasses.js

@@ -1,41 +0,0 @@
-import classNames from 'classnames';
-import isBoolean from 'lodash/isBoolean';
-import isEmpty from 'lodash/isEmpty';
-import { getBasicClass } from './getBasicClass.js';
-
-/**
- * Enhance isEmpty method to also works with numbers.
- *
- * @param  value The value to check.
- * @return Whether the input value is empty or != 0.
- */
-const _isEmpty = (value) => {
-    if (typeof value === 'number') {
-        return value === 0;
-    }
-    return isEmpty(value);
-};
-/**
- * Return all basic LumX CSS classes which are available for every components.
- *
- * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
- *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  props  All the other props you want to generate a class.
- *                The rule of thumb: the key is the name of the prop in the class, the value a string that will
- *                be used in the classname to represent the value of the given prop.
- * @return All LumX basic CSS classes.
- */
-function handleBasicClasses({ prefix, ...props }) {
-    const otherClasses = {};
-    if (!isEmpty(props)) {
-        Object.keys(props).forEach((prop) => {
-            otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean(props[prop])
-                ? props[prop]
-                : !_isEmpty(props[prop]);
-        });
-    }
-    return classNames(prefix, otherClasses);
-}
-
-export { handleBasicClasses };