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

package/js/types/Selector.d.ts

@@ -1,11 +0,0 @@
-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
- */
-export type Selector<TObject, TValue = string> = FieldSelector<TObject, TValue> | FunctionSelector<TObject, TValue>;
-export {};

package/js/types/Spacing.d.ts

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

package/js/types/TextElement.d.ts

@@ -1,3 +0,0 @@
-import type { HeadingElement } from './HeadingElement';
-/** Union type of all text elements */
-export type TextElement = 'span' | 'p' | HeadingElement;

package/js/types/ValueOf.d.ts

@@ -1,2 +0,0 @@
-/** Get types of the values of a record. */
-export type ValueOf<T extends Record<any, any>> = T[keyof T];

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

@@ -1,2 +0,0 @@
-/** list of generic props defined on JSX that need to be redefined for each framework */
-export type PropsToOverride = 'ref' | 'handleClick' | 'handleChange' | 'handleInput' | 'handleKeyPress' | 'handleClose' | 'handleFocus' | 'handleBlur' | 'handleBeforeClick' | 'handleAfterClick' | 'handleMouseEnter' | 'handleMouseLeave' | 'handleKeyDown';

package/js/utils/ClickAway/TestStories.d.ts

@@ -1,36 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup ClickAwayProvider stories for a specific framework (React or Vue).
- * Framework-specific components are injected via `components`.
- */
-export declare function setup({ component: ClickAwayProvider, components: { PortalProvider, ButtonWithCard }, }: SetupStoriesOptions<{
-    components: {
-        PortalProvider: any;
-        /** A button that toggles a Card. Accepts: level, parentRef. */
-        ButtonWithCard: any;
-    };
-}>): {
-    meta: {
-        component: any;
-        parameters: {
-            chromatic: {
-                disable: boolean;
-            };
-        };
-        tags: string[];
-    };
-    NestedClickAway: {
-        render: () => import("react").JSX.Element;
-    };
-    InShadowDOM: {
-        render: () => import("react").JSX.Element;
-    };
-    TestClickAwayCloses: {
-        render: () => import("react").JSX.Element;
-        play(): Promise<void>;
-    };
-    TestNestedClickAway: {
-        render: () => import("react").JSX.Element;
-        play(): Promise<void>;
-    };
-};

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

@@ -1,34 +0,0 @@
-/**
- * Shared types and logic for ClickAway detection.
- *
- * ClickAway detects clicks outside a set of elements and triggers a callback.
- * The core logic (event listening + target checking) is framework-agnostic.
- * Framework-specific wrappers (React hook, Vue composable) and context providers
- * (React context, Vue provide/inject) are implemented in each framework package.
- */
-import type { Falsy } from '@lumx/core/js/types';
-/** Event types that trigger click away detection. */
-export declare const CLICK_AWAY_EVENT_TYPES: readonly ["mousedown", "touchstart"];
-/** Callback triggered when a click away is detected. */
-export type ClickAwayCallback = EventListener | Falsy;
-/**
- * Check if the click event targets are outside all the given elements.
- *
- * @param targets - The event target elements (from `event.target` and `event.composedPath()`).
- * @param elements - The elements considered "inside" the click away context.
- * @returns `true` if the click is outside all elements (i.e. a click away).
- */
-export declare function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean;
-/**
- * Imperative setup for click away detection.
- * Adds mousedown/touchstart listeners on `document` and calls the callback when a click
- * occurs outside the elements returned by `getElements`.
- *
- * Note: when `getElements` returns an empty array, any click is considered a click away.
- * Callers should guard against calling `setupClickAway` when no refs are registered.
- *
- * @param getElements - Getter returning the current list of elements considered "inside".
- * @param callback - Callback to invoke on click away.
- * @returns A teardown function that removes the event listeners.
- */
-export declare function setupClickAway(getElements: () => HTMLElement[], callback: ClickAwayCallback): (() => void) | undefined;

package/js/utils/InfiniteScroll/TestStories.d.ts

@@ -1,50 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup InfiniteScroll test stories for a specific framework (React or Vue).
- *
- * @param component      The framework InfiniteScroll component.
- * @param components     Framework-specific components:
- *   - ScrollZone: a pre-wired component rendering a fixed-height scrollable container
- *     with tall fake content and InfiniteScroll at the bottom. Accepts:
- *       - `onLoad` callback (called when the sentinel intersects)
- *       - `data-testid` forwarded to the scroll container div
- */
-export declare function setup({ component: InfiniteScroll }: SetupStoriesOptions): {
-    meta: {
-        component: any;
-        tags: string[];
-        parameters: {
-            chromatic: {
-                disableSnapshot: boolean;
-            };
-        };
-        args: {
-            callback: () => void;
-        };
-    };
-    TestRendersSentinelDiv: {
-        render: (args: any) => import("react").JSX.Element;
-        play({ canvasElement }: any): Promise<void>;
-    };
-    TestDetectsScrollEnd: {
-        render: ({ callback }: any) => import("react").JSX.Element;
-        args: {
-            callback: import("storybook/test").Mock<(...args: any[]) => any>;
-        };
-        play({ canvas, args }: any): Promise<void>;
-    };
-    TestNoCallbackWithoutScroll: {
-        render: ({ callback }: any) => import("react").JSX.Element;
-        args: {
-            callback: import("storybook/test").Mock<(...args: any[]) => any>;
-        };
-        play({ canvas, args }: any): Promise<void>;
-    };
-    TestRetriggersOnSubsequentScrolls: {
-        render: ({ callback }: any) => import("react").JSX.Element;
-        args: {
-            callback: import("storybook/test").Mock<(...args: any[]) => any>;
-        };
-        play({ canvas, args }: any): Promise<void>;
-    };
-};

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

@@ -1,21 +0,0 @@
-import type { CommonRef } from '../../types';
-export { setupInfiniteScrollObserver } from './setupInfiniteScrollObserver';
-export declare const INFINITE_SCROLL_CLASSNAME = "lumx-infinite-scroll-anchor";
-export interface InfiniteScrollProps {
-    /** Callback when infinite scroll component is in view */
-    callback: (evt?: Event) => void;
-    /** Customize intersection observer option */
-    options?: IntersectionObserverInit;
-}
-/**
- * Framework-agnostic InfiniteScroll sentinel component.
- *
- * Renders a tiny invisible div that triggers a callback when it enters the viewport
- * (or intersects its root element) via IntersectionObserver.
- *
- * The div has a small height (4px) to avoid issues when a browser zoom is applied,
- * where a zero-height element might not trigger IntersectionObserver reliably.
- */
-export declare const InfiniteScroll: ({ ref }: {
-    ref?: CommonRef;
-}) => import("react").JSX.Element;

package/js/utils/InfiniteScroll/setupInfiniteScrollObserver.d.ts

@@ -1,8 +0,0 @@
-type EventCallback = (evt?: Event) => void;
-/**
- * Sets up an IntersectionObserver on the given element.
- * Calls `callback` when at least one observed entry is intersecting.
- * Returns a cleanup function that unobserves the element.
- */
-export declare function setupInfiniteScrollObserver(element: Element, callback: EventCallback, options?: IntersectionObserverInit): () => void;
-export {};

package/js/utils/Portal/Stories.d.ts

@@ -1,29 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup PortalProvider stories for a specific framework (React or Vue).
- * Framework-specific components (Portal, Button) are injected via `components`.
- */
-export declare function setup({ component: PortalProvider, components: { Portal, Button }, }: SetupStoriesOptions<{
-    components: {
-        Portal: any;
-        Button: any;
-    };
-}>): {
-    meta: {
-        component: any;
-        args: {
-            enabled: boolean;
-        };
-        parameters: {
-            chromatic: {
-                disable: boolean;
-            };
-        };
-        tags: string[];
-    };
-    RenderInShadowDOM: {
-        render: ({ enabled }: {
-            enabled: boolean;
-        }) => import("react").JSX.Element;
-    };
-};

package/js/utils/Portal/Tests.d.ts

@@ -1,25 +0,0 @@
-import type { Screen } from '@testing-library/dom';
-import type { PortalInit } from '.';
-export interface PortalTestOptions {
-    screen: Screen;
-    /**
-     * Render Portal with a child element (a div with `data-testid="portal-child"` containing "Hello from portal").
-     * Return the render result (must have a `container` property for wrapper queries and `unmount` for cleanup).
-     */
-    renderPortal(options: {
-        enabled?: boolean;
-        /** Wrap the Portal in a PortalProvider with this value */
-        portalInit?: PortalInit;
-        /** Wrap the Portal + PortalProvider in a div#wrapper */
-        wrapInDiv?: boolean;
-    }): {
-        container: Element;
-        unmount: () => void;
-    };
-}
-/**
- * Shared Portal + PortalProvider tests.
- * Framework-specific render logic is injected via `renderPortal`.
- */
-declare const _default: ({ screen, renderPortal }: PortalTestOptions) => void;
-export default _default;

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

@@ -1,25 +0,0 @@
-/**
- * Shared types for Portal and PortalProvider.
- *
- * Portal renders children in a subtree outside the current DOM hierarchy.
- * PortalProvider customizes where Portal children render.
- *
- * Unlike other core components, Portal has no shared render function
- * since the implementation is entirely framework-specific
- * (React's createPortal vs Vue's Teleport).
- */
-export type Container = DocumentFragment | Element | string;
-/**
- * Portal initializing function.
- * If it does not provide a container, the Portal children will render in the standard component tree and not in a portal.
- */
-export type PortalInit = () => {
-    container?: Container;
-    teardown?: () => void;
-};
-export interface PortalProps {
-    enabled?: boolean;
-}
-export interface PortalProviderProps {
-    value: PortalInit;
-}

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/action-area/Stories.d.ts

@@ -1,38 +0,0 @@
-import { SetupStoriesOptions } from '@lumx/core/stories/types';
-export declare function setup({ classProp, components: { FlexBox, Heading, Link, Text, Button, IconButton }, decorators: { withCombinations, withThemedBackground }, }: SetupStoriesOptions<{
-    components: {
-        FlexBox: any;
-        Heading: any;
-        Link: any;
-        Text: any;
-        Button: any;
-        IconButton: any;
-    };
-    decorators: 'withCombinations' | 'withThemedBackground';
-}>): {
-    meta: {};
-    CardExample: {
-        render: ({ "data-lumx-hover": hover, "data-lumx-active": active, "data-focus-visible-added": focused, focusStyle, theme, hasOverlay, }: any) => import("react").JSX.Element;
-        argTypes: {
-            onClick: {
-                action: boolean;
-            };
-            hasOverlay: {
-                control: string;
-            };
-            focusStyle: {
-                control: {
-                    type: string;
-                };
-                options: (string | undefined)[];
-            };
-        };
-    };
-    OverlayStates: {
-        render: ({ "data-lumx-hover": hover, "data-lumx-active": active, "data-focus-visible-added": focused, focusStyle, theme, hasOverlay, }: any) => import("react").JSX.Element;
-        args: {
-            hasOverlay: boolean;
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

package/js/utils/browser/createSelectorTreeWalker.d.ts

@@ -1,13 +0,0 @@
-/**
- * Create a TreeWalker that iterates over elements matching a CSS selector
- * within a container.
- *
- * Uses `NodeFilter.SHOW_ELEMENT` and accepts nodes that match the given
- * selector, skipping everything else. The returned walker can be used with
- * `nextNode()` / `previousNode()` for lazy, sequential DOM traversal.
- *
- * @param container The root element to walk within.
- * @param selector CSS selector that items must match.
- * @returns A TreeWalker scoped to the container and filtered by the selector.
- */
-export declare function createSelectorTreeWalker(container: HTMLElement, selector: string): TreeWalker;

package/js/utils/browser/css/combineSize.d.ts

@@ -1,4 +0,0 @@
-/** Combine two CSS values with `min()`. */
-export declare const cssMin: (size1?: string, size2?: string) => string;
-/** Combine two CSS values with `max()`. */
-export declare const cssMax: (size1?: string, size2?: string) => string;

package/js/utils/browser/css/resolveCssSize.d.ts

@@ -1,4 +0,0 @@
-import { GlobalSize } from '../../../constants/enums';
-import type { VarSize } from './types';
-/** Resolve a t-shirt size token to its CSS custom property, or pass through as-is. */
-export declare function resolveCssSize<V extends string | undefined>(value: V): V extends GlobalSize ? VarSize<V> : V;

package/js/utils/browser/css/types.d.ts

@@ -1,7 +0,0 @@
-import type { GlobalSize } from '../../../constants/enums';
-/** Viewport-relative height value, e.g. `50vh`. */
-export type VHSize = `${number}vh`;
-/** Pixel value, e.g. `12px`. */
-export type PXSize = `${number}px`;
-/** CSS custom property referencing a LumX t-shirt size token, e.g. `var(--lumx-size-m)`. */
-export type VarSize<S extends GlobalSize = GlobalSize> = `var(--lumx-size-${S})`;

package/js/utils/browser/isFocusVisible.d.ts

@@ -1,2 +0,0 @@
-/** Check if the focus is visible on the given element */
-export declare const isFocusVisible: (element?: HTMLElement) => boolean | undefined;

package/js/utils/browser/isHoverNotSupported.d.ts

@@ -1,2 +0,0 @@
-/** Return true if the browser does not support pointer hover */
-export declare const isHoverNotSupported: () => boolean;

package/js/utils/browser/isPrintableKey.d.ts

@@ -1,7 +0,0 @@
-/**
- * Is the key a single printable character (not Space, no modifier keys)?
- *
- * Used by typeahead-style keyboard handlers (menu, combobox) to detect when a
- * keypress should start/continue a type-to-search rather than trigger navigation.
- */
-export declare function isPrintableKey({ key, altKey, ctrlKey, metaKey }: KeyboardEvent): boolean;

package/js/utils/browser/lastDescendant.d.ts

@@ -1,2 +0,0 @@
-/** Deepest last-child descendant of `el` (or `el` itself if it has no children). */
-export declare function lastDescendant(element: HTMLElement): HTMLElement;

package/js/utils/browser/querySelectorInclusive.d.ts

@@ -1,11 +0,0 @@
-/**
- * Like `querySelectorAll`, but also tests the root node itself.
- *
- * Yields the root element first (if it matches), then all matching descendants
- * in document order. Being a generator, callers that only need the first match
- * can break early without collecting the full list.
- *
- * @param node  The starting DOM node.
- * @param selector  CSS selector to match against.
- */
-export declare function querySelectorInclusive(node: Node, selector: string): Generator<HTMLElement>;

package/js/utils/browser/trackContainerFocus.d.ts

@@ -1,11 +0,0 @@
-/**
- * Track whether the container currently has focus.
- *
- * We can't rely on `document.activeElement` inside MutationObserver callbacks because
- * the browser moves focus to `<body>` before they fire. focusout with `relatedTarget === null`
- * (element removed from DOM) keeps the flag true so the observer can move focus to a fallback.
- */
-export declare function trackContainerFocus(container: HTMLElement, signal: AbortSignal): {
-    readonly hasFocus: boolean;
-    reset(): void;
-};

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

@@ -1,21 +0,0 @@
-import { block } from '../bem/block.js';
-
-const PREFIX = 'lumx-action-area';
-const 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.
- */
-const 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),
-});
-
-export { actionArea };

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

@@ -1,15 +0,0 @@
-import type { AdditionalClasses, Modifier } from './types';
-/**
- * Generates a BEM block + modifier class name string.
- * Combines a base class with optional modifiers and additional classes.
- *
- * @param baseName   The base BEM class
- * @param modifier   Optional modifiers
- * @returns Combined class name string
- *
- * @example
- * block('button'); // 'button'
- * block('button', { active: true, disabled: false }); // 'button button--active'
- */
-export declare function block(baseName: string, additionalClasses: AdditionalClasses): string;
-export declare function block(baseName: string, modifiers?: Modifier, additionalClasses?: AdditionalClasses): string;

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

@@ -1,26 +0,0 @@
-import classnames from 'classnames';
-import { modifier } from './modifier.js';
-
-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(
-    // Additional classes
-    classes, 
-    // Base class
-    baseName, 
-    // Modifier(s)
-    modifiers ? modifier(baseName, modifiers) : null);
-}
-
-export { block };

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

@@ -1,16 +0,0 @@
-import type { AdditionalClasses, Modifier } from './types';
-/**
- * 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')
- * @param elem       The BEM element name (e.g., 'icon', 'title')
- * @param modifier   Optional BEM modifier ()
- * @returns combined BEM element class name
- *
- * @example
- * element('my-button', 'icon'); // 'my-button__icon'
- * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
- */
-export declare function element(baseClass: string, elem: string, additionalClasses: AdditionalClasses): string;
-export declare function element(baseClass: string, elem: string, modifiers?: Modifier, additionalClasses?: AdditionalClasses): string;

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

@@ -1,7 +0,0 @@
-import { block } from './block.js';
-
-function element(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
-    return block(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
-}
-
-export { element };

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

@@ -1,18 +0,0 @@
-import { block } from './block';
-import { element } from './element';
-import type { AdditionalClasses, Modifier } from './types';
-/**
- * Setup BEM block & element generation for a given base name.
- */
-export 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;
-};
-export { block, element };

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

@@ -1,22 +0,0 @@
-import { block } from './block.js';
-import { element } from './element.js';
-import { modifier } from './modifier.js';
-
-/**
- * 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),
-    };
-}
-
-export { bem, block, element };

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

@@ -1,13 +0,0 @@
-import type { Modifier } from './types';
-/**
- * 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'
- */
-export declare function modifier(baseName: string, modifiers: Modifier): string;

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

@@ -1,21 +0,0 @@
-/**
- * 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(' ');
-}
-
-export { modifier };

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

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

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

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