@lumx/core 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/js/types/Falsy.d.ts

@@ -0,0 +1,8 @@
+//#region src/js/types/Falsy.d.ts
+/**
+ * JS falsy values.
+ * (excluding `NaN` as it can't be distinguished from `number`)
+ */
+type Falsy = false | undefined | null | 0 | '';
+//#endregion
+export { Falsy };

package/_internal/js/types/GenericProps.d.ts

@@ -0,0 +1,14 @@
+import { HasClassName } from "./HasClassName.js";
+
+//#region src/js/types/GenericProps.d.ts
+/**
+ * Define a generic props types.
+ */
+interface GenericProps extends HasClassName {
+  /**
+   * Any prop (particularly any supported prop for a HTML element).
+   */
+  [propName: string]: any;
+}
+//#endregion
+export { GenericProps };

package/_internal/js/types/HasAriaDisabled.d.ts

@@ -0,0 +1,9 @@
+import { Booleanish } from "./Booleanish.js";
+
+//#region src/js/types/HasAriaDisabled.d.ts
+interface HasAriaDisabled {
+  /** Similar to `disabled` but does not block pointer events or focus */
+  'aria-disabled'?: Booleanish;
+}
+//#endregion
+export { HasAriaDisabled };

package/_internal/js/types/HasAriaLabelOrLabelledBy.d.ts

@@ -0,0 +1,19 @@
+//#region src/js/types/HasAriaLabelOrLabelledBy.d.ts
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
+  /**
+   * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+   * Although it is not recommended, aria-label can be used instead if no visible element is available.
+   */
+  'aria-labelledby': T; /** The label of the dialog. */
+  'aria-label'?: undefined;
+} : {
+  'aria-label': string;
+  'aria-labelledby'?: undefined;
+};
+//#endregion
+export { HasAriaLabelOrLabelledBy };

package/_internal/js/types/HasChecked.d.ts

@@ -0,0 +1,9 @@
+//#region src/js/types/HasChecked.d.ts
+interface HasChecked<C = boolean> {
+  /** Component checked state. */
+  isChecked?: C;
+  /** @alias isChecked */
+  checked?: boolean;
+}
+//#endregion
+export { HasChecked };

package/_internal/js/types/HasClassName.d.ts

@@ -0,0 +1,9 @@
+//#region src/js/types/HasClassName.d.ts
+interface HasClassName {
+  /**
+   * Class name forwarded to the root element of the component.
+   */
+  className?: string;
+}
+//#endregion
+export { HasClassName };

package/_internal/js/types/HasCloseMode.d.ts

@@ -0,0 +1,10 @@
+//#region src/js/types/HasCloseMode.d.ts
+interface HasCloseMode {
+  /**
+   * Choose how the children are hidden when closed
+   * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+   */
+  closeMode?: 'hide' | 'unmount';
+}
+//#endregion
+export { HasCloseMode };

package/_internal/js/types/HasDisabled.d.ts

@@ -0,0 +1,9 @@
+//#region src/js/types/HasDisabled.d.ts
+interface HasDisabled {
+  /** Whether the component is disabled or not. */
+  isDisabled?: boolean;
+  /** @alias isDisabled */
+  disabled?: boolean;
+}
+//#endregion
+export { HasDisabled };

package/_internal/js/types/HasPolymorphicAs.d.ts

@@ -0,0 +1,12 @@
+import { ElementType } from "./JSXElement.js";
+import React from "react";
+
+//#region src/js/types/HasPolymorphicAs.d.ts
+type HasPolymorphicAs<E extends ElementType> = React.ComponentPropsWithoutRef<E> & {
+  /**
+   * Customize the rendered component.
+   */
+  as?: E;
+};
+//#endregion
+export { HasPolymorphicAs };

package/_internal/js/types/HasRequiredLinkHref.d.ts

@@ -0,0 +1,6 @@
+//#region src/js/types/HasRequiredLinkHref.d.ts
+type HasRequiredLinkHref<E> = E extends 'a' ? {
+  href: string;
+} : Record<string, unknown>;
+//#endregion
+export { HasRequiredLinkHref };

package/_internal/js/types/HasTheme.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from "../constants/enums/index.js";
+
+//#region src/js/types/HasTheme.d.ts
+interface HasTheme {
+  /**
+   * Theme adapting the component to light or dark background.
+   */
+  theme?: Theme;
+}
+//#endregion
+export { HasTheme };

package/_internal/js/types/HeadingElement.d.ts

@@ -0,0 +1,5 @@
+//#region src/js/types/HeadingElement.d.ts
+/** Union type of all heading elements */
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+//#endregion
+export { HeadingElement };

package/_internal/js/types/JSXElement.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+//#region src/js/types/JSXElement.d.ts
+/**
+ * Framework-agnostic type for renderable content.
+ * Vue components should cast VNode[] from slots to this type.
+ *
+ * Note: Uses type-only import to avoid runtime dependencies.
+ */
+type JSXElement = React.ReactNode;
+type ElementType = React.ElementType;
+//#endregion
+export { ElementType, JSXElement };

package/_internal/js/types/KebabCase.d.ts

@@ -0,0 +1,5 @@
+//#region src/js/types/KebabCase.d.ts
+/** Transform a string literal into kebab case */
+type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T> ? `${Uncapitalize<C>}${KebabCase<T>}` : `${Uncapitalize<C>}-${KebabCase<T>}` : S;
+//#endregion
+export { KebabCase };

package/_internal/js/types/LumxClassName.d.ts

@@ -0,0 +1,7 @@
+import { KebabCase } from "./KebabCase.js";
+
+//#region src/js/types/LumxClassName.d.ts
+/** Transform the component name into the lumx class name. */
+type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;
+//#endregion
+export { LumxClassName };

package/{js → _internal/js}/types/NamedProps.d.ts

@@ -1,8 +1,9 @@
+//#region src/js/types/NamedProps.d.ts
 /**
  * Strips index signature from a type, keeping only explicitly named properties.
  * Used to prevent `GenericProps`'s `[propName: string]: any` from contaminating
  * TypeScript inference of the option type `O`.
  */
-export type NamedProps<T> = {
-    [K in keyof T as string extends K ? never : K]: T[K];
-};
+type NamedProps<T> = { [K in keyof T as string extends K ? never : K]: T[K] };
+//#endregion
+export { NamedProps };

package/{js → _internal/js}/types/NestedComponents.d.ts

@@ -1,9 +1,10 @@
+//#region src/js/types/NestedComponents.d.ts
 /**
  * A component reference that can be used in nested components.
  * This is framework-agnostic and works with both React components (functions)
  * and Vue components (objects/constructors).
  */
-export type ComponentLike = any;
+type ComponentLike = any;
 /**
  * Represents a mapping of nested component names to their component implementations.
  * Used to provide component references to LumX core components that accept nested components.
@@ -20,4 +21,6 @@ export type ComponentLike = any;
  * // Vue usage with VueToJSX
  * const ui = VueToJSX(FlagUI, { nestedComponents: { Text } });
  */
-export type NestedComponents = Record<string, ComponentLike>;
+type NestedComponents = Record<string, ComponentLike>;
+//#endregion
+export { ComponentLike, NestedComponents };

package/_internal/js/types/ObjectValues.d.ts

@@ -0,0 +1,8 @@
+//#region src/js/types/ObjectValues.d.ts
+/**
+ * Returns a union type of the given generic values.
+ *
+ */
+type ObjectValues<T> = T[keyof T];
+//#endregion
+export { ObjectValues };

package/{js → _internal/js}/types/PartialBy.d.ts

@@ -1,12 +1,15 @@
+//#region src/js/types/PartialBy.d.ts
 /**
  * Same as `Partial` but for one property only.
  *
  * @example PartialBy<Foo, 'bar'> => produces a type almost identical to `Foo` but with the `bar` property as optional.
  */
-export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 /**
  * Same as `Partial` but for all except some properties only.
  *
  * @example PartialExcept<Foo, 'bar'> => produces a type almost identical to `Foo` but with the `bar` property as it is on the original type.
  */
-export type PartialExcept<T, K extends keyof T> = Pick<T, K> & Partial<Omit<T, K>>;
+type PartialExcept<T, K extends keyof T> = Pick<T, K> & Partial<Omit<T, K>>;
+//#endregion
+export { PartialBy, PartialExcept };

package/_internal/js/types/Point.d.ts

@@ -0,0 +1,10 @@
+//#region src/js/types/Point.d.ts
+/**
+ * A point coordinate in 2D space
+ */
+type Point = {
+  x: number;
+  y: number;
+};
+//#endregion
+export { Point };

package/_internal/js/types/Predicate.d.ts

@@ -0,0 +1,5 @@
+//#region src/js/types/Predicate.d.ts
+/** Predicate function type */
+type Predicate<T> = (t: T) => boolean;
+//#endregion
+export { Predicate };

package/_internal/js/types/RectSize.d.ts

@@ -0,0 +1,10 @@
+//#region src/js/types/RectSize.d.ts
+/**
+ * Rectangle size
+ */
+type RectSize = {
+  width: number;
+  height: number;
+};
+//#endregion
+export { RectSize };

package/_internal/js/types/Selector.d.ts

@@ -0,0 +1,11 @@
+//#region src/js/types/Selector.d.ts
+type FunctionSelector<TObject, TValue> = (o: TObject) => TValue;
+type FieldSelector<TObject, TValue> = keyof { [TKey in keyof TObject as TObject[TKey] extends TValue ? TKey : never]: TObject[TKey] };
+/**
+ * Value selector on an object
+ * - either via an object key
+ * - or a selector function
+ */
+type Selector<TObject, TValue = string> = FieldSelector<TObject, TValue> | FunctionSelector<TObject, TValue>;
+//#endregion
+export { Selector };

package/_internal/js/types/Spacing.d.ts

@@ -0,0 +1,4 @@
+//#region src/js/types/Spacing.d.ts
+type Spacing = 'margin' | 'padding';
+//#endregion
+export { Spacing };

package/_internal/js/types/TextElement.d.ts

@@ -0,0 +1,7 @@
+import { HeadingElement } from "./HeadingElement.js";
+
+//#region src/js/types/TextElement.d.ts
+/** Union type of all text elements */
+type TextElement = 'span' | 'p' | HeadingElement;
+//#endregion
+export { TextElement };

package/_internal/js/types/ValueOf.d.ts

@@ -0,0 +1,5 @@
+//#region src/js/types/ValueOf.d.ts
+/** Get types of the values of a record. */
+type ValueOf<T extends Record<any, any>> = T[keyof T];
+//#endregion
+export { ValueOf };

package/_internal/js/types/jsx/PropsToOverride.d.ts

@@ -0,0 +1,5 @@
+//#region src/js/types/jsx/PropsToOverride.d.ts
+/** list of generic props defined on JSX that need to be redefined for each framework */
+type PropsToOverride = 'ref' | 'handleClick' | 'handleChange' | 'handleInput' | 'handleKeyPress' | 'handleClose' | 'handleFocus' | 'handleBlur' | 'handleBeforeClick' | 'handleAfterClick' | 'handleMouseEnter' | 'handleMouseLeave' | 'handleKeyDown';
+//#endregion
+export { PropsToOverride };

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

@@ -0,0 +1,9 @@
+//#region src/js/utils/_internal/color/resolveColorWithVariants.ts
+/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
+function resolveColorWithVariants(colorWithVariants, colorVariant) {
+	if (!colorWithVariants) return [void 0, colorVariant];
+	const [color, baseColorVariant] = colorWithVariants.split("-");
+	return [color, colorVariant || baseColorVariant];
+}
+//#endregion
+export { resolveColorWithVariants };

package/{js → _internal/js}/utils/classNames/action-area/index.d.ts

@@ -1,3 +1,4 @@
+//#region src/js/utils/classNames/action-area/index.d.ts
 type ActionModifiers = Partial<Record<'has-overlay' | 'focus-outset' | 'focus-inset' | 'theme-dark' | 'theme-light', boolean>>;
 /**
  * Action area CSS utility.
@@ -8,8 +9,8 @@ type ActionModifiers = Partial<Record<'has-overlay' | 'focus-outset' | 'focus-in
  * Apply `actionArea.action()` to the primary interactive element (link or button)
  * whose click area should expand to fill the entire container.
  */
-export declare const actionArea: (() => "lumx-action-area") & {
-    /** Action element class. Adds a `::before` pseudo-element with `position: absolute; inset: 0` to expand the click area. */
-    action: (modifiers?: ActionModifiers) => string;
+declare const actionArea: (() => "lumx-action-area") & {
+  /** Action element class. Adds a `::before` pseudo-element with `position: absolute; inset: 0` to expand the click area. */action: (modifiers?: ActionModifiers) => string;
 };
-export {};
+//#endregion
+export { actionArea };

package/_internal/js/utils/classNames/action-area/index.js

@@ -0,0 +1,22 @@
+import { block } from "../bem/block.js";
+//#region src/js/utils/classNames/action-area/index.ts
+var PREFIX = "lumx-action-area";
+var ACTION_ELEMENT = `${PREFIX}__action`;
+/**
+* Action area CSS utility.
+*
+* Apply `actionArea()` to the container element to make it a positioning context
+* for the action's expanded click area.
+*
+* Apply `actionArea.action()` to the primary interactive element (link or button)
+* whose click area should expand to fill the entire container.
+*/
+var actionArea = Object.assign(
+	/** Action area container class. Sets `position: relative`. */
+	() => PREFIX,
+	{ 
+	/** Action element class. Adds a `::before` pseudo-element with `position: absolute; inset: 0` to expand the click area. */
+action: (modifiers) => block(ACTION_ELEMENT, modifiers) }
+);
+//#endregion
+export { actionArea };

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

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1,16 @@
+import { modifier } from "./modifier.js";
+import classnames from "classnames";
+//#region src/js/utils/classNames/bem/block.ts
+function block(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+	let modifiers;
+	let classes;
+	if (typeof modifiersOrAdditionalClasses === "string" || Array.isArray(modifiersOrAdditionalClasses)) classes = modifiersOrAdditionalClasses;
+	else {
+		modifiers = modifiersOrAdditionalClasses;
+		classes = additionalClasses;
+	}
+	if (!modifiers && !classes) return baseName;
+	return classnames(classes, baseName, modifiers ? modifier(baseName, modifiers) : null);
+}
+//#endregion
+export { block };

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

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1,7 @@
+import { block } from "./block.js";
+//#region src/js/utils/classNames/bem/element.ts
+function element(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+	return block(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+}
+//#endregion
+export { element };

package/_internal/js/utils/classNames/bem/index.d.ts

@@ -0,0 +1,18 @@
+import { AdditionalClasses, Modifier } from "./types.js";
+//#region src/js/utils/classNames/bem/index.d.ts
+/**
+ * Setup BEM block & element generation for a given base name.
+ */
+declare function bem(baseName: string): {
+  block: {
+    (additionalClasses: AdditionalClasses): string;
+    (modifiers?: Modifier, additionalClasses?: AdditionalClasses): string;
+  };
+  element: {
+    (elem: string, additionalClasses: AdditionalClasses): string;
+    (elem: string, modifiers?: Modifier, additionalClasses?: AdditionalClasses): string;
+  };
+  modifier: (modifiers: Modifier) => string;
+};
+//#endregion
+export { bem };

package/_internal/js/utils/classNames/bem/index.js

@@ -0,0 +1,22 @@
+import { modifier } from "./modifier.js";
+import { block } from "./block.js";
+import { element } from "./element.js";
+//#region src/js/utils/classNames/bem/index.ts
+/**
+* Setup BEM block & element generation for a given base name.
+*/
+function bem(baseName) {
+	function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
+		return block(baseName, modifiersOrAdditionalClasses, additionalClasses);
+	}
+	function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
+		return element(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+	}
+	return {
+		block: blockFn,
+		element: elementFn,
+		modifier: (modifiers) => modifier(baseName, modifiers)
+	};
+}
+//#endregion
+export { bem };

package/_internal/js/utils/classNames/bem/modifier.js

@@ -0,0 +1,19 @@
+//#region src/js/utils/classNames/bem/modifier.ts
+/**
+* Generates BEM modifier class names.
+*
+* @param baseName   The base BEM class to attach modifiers to.
+* @param modifiers  Map of modifier names to boolean values.
+* @returns Combined modifier class names string.
+*
+* @example
+* modifier('button', { active: true }); // 'button--active'
+* modifier('button', { active: true, disabled: false }); // 'button--active'
+*/
+function modifier(baseName, modifiers) {
+	const modifierClasses = [];
+	for (const [key, value] of Object.entries(modifiers)) if (value) modifierClasses.push(`${baseName}--${key}`);
+	return modifierClasses.join(" ");
+}
+//#endregion
+export { modifier };

package/_internal/js/utils/classNames/bem/types.d.ts

@@ -0,0 +1,15 @@
+import { ClassValue } from "classnames/types";
+
+//#region src/js/utils/classNames/bem/types.d.ts
+/**
+ * Modifier
+ * @example { 'is-disabled': true, 'is-selected': false }
+ */
+type Modifier = Record<string, boolean | undefined | null>;
+/**
+ * Additional classes that can be passed as a single string shorthand
+ * or an array of class values.
+ */
+type AdditionalClasses = string | ClassValue[];
+//#endregion
+export { AdditionalClasses, Modifier };

package/{js → _internal/js}/utils/classNames/color/index.d.ts

@@ -1,4 +1,6 @@
-import { ColorVariant, ColorWithVariants } from '@lumx/core/js/constants';
+import { ColorVariant, ColorWithVariants } from "../../../constants/enums/index.js";
+
+//#region src/js/utils/classNames/color/index.d.ts
 /**
  * Generates a Lumx color class name for the given type, color and variant.
  * This is the base function used by font() and background() utilities.
@@ -14,7 +16,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;
+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 +28,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;
+declare const background: (propColor: ColorWithVariants, propColorVariant?: ColorVariant) => string;
 /**
  * Generates a Lumx font color class name for the given color and variant.
  *
@@ -40,4 +42,6 @@ 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;
+declare const font: (propColor: ColorWithVariants, propColorVariant?: ColorVariant) => string;
+//#endregion
+export { background, color, font };

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

@@ -0,0 +1,50 @@
+import { ColorVariant } from "../../../constants/enums/index.js";
+import { resolveColorWithVariants } from "../../_internal/color/resolveColorWithVariants.js";
+//#region src/js/utils/classNames/color/index.ts
+/**
+* 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'
+*/
+var 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
+*/
+var font = (propColor, propColorVariant) => color("font", propColor, propColorVariant);
+//#endregion
+export { background, color, font };

package/{js → _internal/js}/utils/classNames/spacing/index.d.ts

@@ -1,5 +1,8 @@
-import type { Direction, Spacing } from '@lumx/core/js/types';
-import { type AbstractSize } from '@lumx/core/js/constants';
+import { Direction } from "../../../types/Direction.js";
+import { Spacing } from "../../../types/Spacing.js";
+import { AbstractSize } from "../../../constants/enums/index.js";
+
+//#region src/js/utils/classNames/spacing/index.d.ts
 /**
  * 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
@@ -8,8 +11,8 @@ import { type AbstractSize } from '@lumx/core/js/constants';
  * @param size - Size
  * @returns string
  */
-export declare function spacing(type: Spacing, size: AbstractSize | null): string;
-export declare function spacing(type: Spacing, direction?: Direction, size?: AbstractSize | null): string;
+declare function spacing(type: Spacing, size: AbstractSize | null): string;
+declare function spacing(type: Spacing, direction?: Direction, size?: AbstractSize | null): string;
 /**
  * Returns a list of lumx classnames for the given types, directions and sizes. For example, for
  * arguments [
@@ -20,10 +23,10 @@ export declare function spacing(type: Spacing, direction?: Direction, size?: Abs
  * @param spacingConfigs - Array of spacing configurations with direction and size
  * @returns string
  */
-export declare const spacings: (spacingConfigs: {
-    type: Spacing;
-    direction?: Direction;
-    size?: AbstractSize | null;
+declare const spacings: (spacingConfigs: {
+  type: Spacing;
+  direction?: Direction;
+  size?: AbstractSize | null;
 }[]) => string;
 /**
  * Returns a lumx margin classname for the given direction and size. For example, for
@@ -34,8 +37,8 @@ export declare const spacings: (spacingConfigs: {
  * @param size - Size
  * @returns string
  */
-export declare function margin(size: AbstractSize | null): string;
-export declare function margin(direction?: Direction, size?: AbstractSize | null): string;
+declare function margin(size: AbstractSize | null): string;
+declare function margin(direction?: Direction, size?: AbstractSize | null): string;
 /**
  * Returns a list of lumx margin classnames for the given directions and sizes. For example, for
  * arguments [
@@ -46,9 +49,9 @@ export declare function margin(direction?: Direction, size?: AbstractSize | null
  * @param marginConfigs - Array of padding configurations with direction and size
  * @returns string
  */
-export declare const margins: (marginConfigs: {
-    direction?: Direction;
-    size?: AbstractSize | null;
+declare const margins: (marginConfigs: {
+  direction?: Direction;
+  size?: AbstractSize | null;
 }[]) => string;
 /**
  * Returns a lumx padding classname for the given direction and size. For example, for
@@ -59,8 +62,8 @@ export declare const margins: (marginConfigs: {
  * @param size - Size
  * @returns string
  */
-export declare function padding(size: AbstractSize | null): string;
-export declare function padding(direction?: Direction, size?: AbstractSize | null): string;
+declare function padding(size: AbstractSize | null): string;
+declare function padding(direction?: Direction, size?: AbstractSize | null): string;
 /**
  * Returns a list of lumx padding classnames for the given directions and sizes. For example, for
  * arguments [
@@ -71,7 +74,9 @@ export declare function padding(direction?: Direction, size?: AbstractSize | nul
  * @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?: AbstractSize | null;
+declare const paddings: (paddingConfigs: {
+  direction?: Direction;
+  size?: AbstractSize | null;
 }[]) => string;
+//#endregion
+export { margin, margins, padding, paddings, spacing, spacings };