@lumx/core 3.21.2-alpha.0 → 3.21.2-alpha.1

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

@@ -1,4 +0,0 @@
-/**
- * Visually hidden a11y utility class name
- */
-export declare const VISUALLY_HIDDEN = "visually-hidden";

package/js/constants/className/index.js

@@ -1,6 +0,0 @@
-/**
- * Visually hidden a11y utility class name
- */
-const VISUALLY_HIDDEN = 'visually-hidden';
-
-export { VISUALLY_HIDDEN };

package/js/types/Direction.d.ts

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

package/js/types/Spacing.d.ts

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

package/js/utils/_internal/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/_internal/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/_internal/className/index.d.ts

@@ -1,2 +0,0 @@
-export { handleBasicClasses } from './handleBasicClasses';
-export { getBasicClass } from './getBasicClass';

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

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

package/js/utils/_internal/color/resolveColorWithVariants.d.ts

@@ -1,3 +0,0 @@
-import type { ColorPalette, ColorVariant, ColorWithVariants } from '@lumx/core/js/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/classNames/color/index.d.ts

@@ -1,43 +0,0 @@
-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;
-/**
- * Generates a Lumx background color class name for the given color and variant.
- *
- * @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: (propColor: ColorWithVariants, propColorVariant?: ColorVariant) => string;
-/**
- * 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;

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

@@ -1,50 +0,0 @@
-import { ColorVariant } from '../../../constants/enums/index.js';
-import { resolveColorWithVariants } from '../../../../_internal/DPnPEC08.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) {
-    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 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 = (propColor, propColorVariant) => color('background', propColor, propColorVariant);
-/**
- * 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/classNames/index.d.ts

@@ -1,5 +0,0 @@
-export { default as join } from 'classnames';
-export * from './color';
-export * from './typography';
-export * from './spacing';
-export * from './visually-hidden';

package/js/utils/classNames/index.js

@@ -1,5 +0,0 @@
-export { default as join } from 'classnames';
-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';

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

@@ -1,70 +0,0 @@
-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 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 [
- *  { 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/classNames/spacing/index.js

@@ -1,74 +0,0 @@
-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
- */
-function 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) => 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/classNames/typography/index.d.ts

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

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

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

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

@@ -1,5 +0,0 @@
-/**
- * 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/classNames/visually-hidden/index.js

@@ -1,10 +0,0 @@
-import '../../../constants/enums/index.js';
-import { VISUALLY_HIDDEN } from '../../../constants/className/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 };