@lumx/core 4.3.2-alpha.4 → 4.3.2-alpha.41

package/js/components/Thumbnail/Stories.d.ts

@@ -0,0 +1,178 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { AspectRatio } from '../../constants';
+import { ThumbnailObjectFit, ThumbnailVariant } from './types';
+/**
+ * Setup Thumbnail stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ */
+export declare function setup({ component, render, decorators: { withNestedProps, withWrapper, withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withNestedProps' | 'withWrapper' | 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            image: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: string[];
+                mapping: Record<string, string> | undefined;
+            };
+            align: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("center" | "left" | "right")[];
+                mapping: Record<string, "center" | "left" | "right"> | undefined;
+            };
+            variant: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("squared" | "rounded")[];
+                mapping: Record<string, "squared" | "rounded"> | undefined;
+            };
+            aspectRatio: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("horizontal" | "vertical" | "original" | "panoramic" | "wide" | "square" | "free")[];
+                mapping: Record<string, "horizontal" | "vertical" | "original" | "panoramic" | "wide" | "square" | "free"> | undefined;
+            };
+            fallback: {
+                control: boolean;
+            };
+            'focusPoint.x': {
+                control: {
+                    type: string;
+                    max: number;
+                    min: number;
+                    step: number;
+                };
+            };
+            'focusPoint.y': {
+                control: {
+                    type: string;
+                    max: number;
+                    min: number;
+                    step: number;
+                };
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+        args: {
+            align?: import("../../constants").HorizontalAlignment | undefined;
+            alt?: string | undefined;
+            aspectRatio?: AspectRatio | undefined;
+            badge?: import("react").ReactNode;
+            crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+            fallback?: import("react").ReactNode;
+            fillHeight?: boolean | undefined;
+            image?: string | undefined;
+            loadingState?: string | undefined;
+            imgProps?: import("react").ImgHTMLAttributes<HTMLImageElement> | undefined;
+            imgRef?: import("../../types").CommonRef;
+            ref?: import("../../types").CommonRef;
+            isLoading?: boolean | undefined;
+            objectFit?: ThumbnailObjectFit | undefined;
+            size?: import("./types").ThumbnailSize | undefined;
+            loading?: "eager" | "lazy" | undefined;
+            loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement> | undefined;
+            handleClick?: ((event: any) => void) | undefined;
+            handleKeyPress?: ((event: any) => void) | undefined;
+            variant?: ThumbnailVariant | undefined;
+            linkProps?: import("../../types").GenericProps | undefined;
+            focusPointStyle?: import("../../types").GenericProps | undefined;
+            disabledStateProps?: import("../../types").GenericProps | undefined;
+            isAnyDisabled?: boolean | undefined;
+            linkAs?: "a" | any;
+            'aria-label'?: string | undefined;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+        };
+    };
+    /** Simple thumbnail taking the size of the original image */
+    Simple: {
+        args: {
+            image: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Loading state */
+    IsLoading: {
+        args: {
+            image: string;
+            isLoading: boolean;
+        };
+    };
+    WithoutSource: {
+        args: {
+            image: string;
+            size: "xxl";
+            aspectRatio: "square";
+        };
+    };
+    /** Demonstrate the focus point X on a vertical thumbnail containing an horizontal image */
+    FocusPointVertical: {
+        args: {
+            aspectRatio: "vertical";
+            size: "xxl";
+            image: string;
+            'focusPoint.x': number;
+        };
+    };
+    /** Demonstrate the focus point Y on a horizontal thumbnail containing an vertical image */
+    FocusPointHorizontal: {
+        args: {
+            aspectRatio: "horizontal";
+            size: "xxl";
+            image: string;
+            'focusPoint.y': number;
+        };
+    };
+    /** Setting `onClick` to turn the thumbnail into a button */
+    AsButton: {
+        args: {
+            image: string;
+        };
+        argTypes: {
+            onClick: {
+                action: boolean;
+            };
+        };
+    };
+    /** Setting `linkProps.href` to turn the thumbnail into a link */
+    AsLink: {
+        args: {
+            image: string;
+            linkProps: {
+                href: string;
+            };
+        };
+    };
+    /** Combinations of fillHeight and ratios */
+    FillHeightAndRatio: {
+        args: {
+            image: string;
+            fillHeight: boolean;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Simple thumbnail with svg image */
+    WithSvgImages: {
+        args: {
+            image: string;
+            size: "xxl";
+            fillHeight: boolean;
+            'focusPoint.x': number;
+        };
+    };
+    /** Thumbnail letter-boxing */
+    ObjectFit: {
+        args: {
+            size: "xl";
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/Thumbnail/Tests.d.ts

@@ -0,0 +1,11 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    thumbnail: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/Thumbnail/index.d.ts

@@ -0,0 +1,84 @@
+import type { ImgHTMLAttributes } from 'react';
+import { AspectRatio, HorizontalAlignment } from '@lumx/core/js/constants';
+import type { GenericProps, HasTheme, CommonRef, JSXElement, LumxClassName, HasClassName } from '@lumx/core/js/types';
+import { ThumbnailSize, ThumbnailVariant, ThumbnailObjectFit } from './types';
+type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
+/**
+ * Defines the props of the component.
+ */
+export interface ThumbnailProps extends HasTheme, HasClassName {
+    /** Alignment of the thumbnail in it's parent (requires flex parent). */
+    align?: HorizontalAlignment;
+    /** Image alternative text. */
+    alt: string;
+    /** Image aspect ratio. */
+    aspectRatio?: AspectRatio;
+    /** Badge. */
+    badge?: JSXElement;
+    /** Image cross origin resource policy. */
+    crossOrigin?: ImgHTMLProps['crossOrigin'];
+    /** Fallback icon (SVG path) or react node when image fails to load. */
+    fallback?: string | JSXElement;
+    /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */
+    fillHeight?: boolean;
+    /** Image URL. */
+    image: string;
+    loadingState: string;
+    /** Props to inject into the native <img> element. */
+    imgProps?: ImgHTMLProps;
+    /** Reference to the native <img> element. */
+    imgRef?: CommonRef;
+    ref?: CommonRef;
+    /** Set to true to force the display of the loading skeleton. */
+    isLoading?: boolean;
+    /** Set how the image should fit when its aspect ratio is constrained */
+    objectFit?: ThumbnailObjectFit;
+    /** Size variant of the component. */
+    size?: ThumbnailSize;
+    /** Image loading mode. */
+    loading?: 'eager' | 'lazy';
+    /** Ref of an existing placeholder image to display while loading. */
+    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
+    /** On click callback. */
+    handleClick?: (event: any) => void;
+    /** On key press callback. */
+    handleKeyPress?: (event: any) => void;
+    /** Variant of the component. */
+    variant?: ThumbnailVariant;
+    /** Props to pass to the link wrapping the thumbnail. */
+    linkProps?: GenericProps;
+    focusPointStyle?: GenericProps;
+    disabledStateProps?: GenericProps;
+    isAnyDisabled?: boolean;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    'aria-label'?: string;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Thumbnail";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const block: {
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+}, element: {
+    (elem: string, additionalClasses: import("classnames/types").ClassValue[]): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+};
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ThumbnailProps>;
+/**
+ * Thumbnail component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Thumbnail: (props: ThumbnailProps) => import("react").JSX.Element;
+export * from './utils';

package/js/components/Thumbnail/types.d.ts

@@ -0,0 +1,45 @@
+import { AspectRatio, Size } from '../../constants';
+import { ValueOf } from '../../types';
+/**
+ *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
+ */
+export type FocusPoint = {
+    x?: number;
+    y?: number;
+};
+/**
+ * Loading attribute is not yet supported in typescript, so we need
+ * to add it in order to avoid a ts error.
+ * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
+ */
+declare module 'react' {
+    interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {
+        loading?: 'eager' | 'lazy';
+    }
+}
+/**
+ * All available aspect ratios.
+ * @deprecated
+ */
+export declare const ThumbnailAspectRatio: Record<string, AspectRatio>;
+/**
+ *  Thumbnail sizes.
+ */
+export type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Thumbnail variants.
+ */
+export declare const ThumbnailVariant: {
+    readonly squared: "squared";
+    readonly rounded: "rounded";
+};
+export type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
+/**
+ * Thumbnail object fit.
+ */
+export declare const ThumbnailObjectFit: {
+    readonly cover: "cover";
+    readonly contain: "contain";
+};
+export type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;
+export type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';

package/js/components/Thumbnail/utils.d.ts

@@ -0,0 +1,79 @@
+import type { CSSProperties } from 'react';
+import type { RectSize } from '../../types';
+import { AspectRatio } from '../../constants';
+import type { FocusPoint, LoadingState } from './types';
+/**
+ * Determines the loading state of an HTML image element.
+ *
+ * @param img - The HTML image element to check
+ * @param event - Optional event (load or error) that triggered the state check
+ * @returns The current loading state: 'hasError', 'isLoading', or 'isLoaded'
+ */
+export declare function getImageLoadingState(img: HTMLImageElement | null | undefined, event?: Event): LoadingState;
+/**
+ * Parameters for getting image size.
+ */
+export interface GetImageSizeParams {
+    /** Image URL (used for validation) */
+    image?: string;
+    /** Aspect ratio setting */
+    aspectRatio?: AspectRatio;
+    /** Focus point (if not set, size calculation is skipped) */
+    focusPoint?: FocusPoint;
+    /** Width from imgProps */
+    width?: number;
+    /** Height from imgProps */
+    height?: number;
+    /** Image element (for getting natural dimensions) */
+    element?: HTMLImageElement;
+    /** Whether image is loaded */
+    isLoaded: boolean;
+}
+/**
+ * Gets the natural image size from props or element.
+ * Returns undefined if focus point is not applicable or size cannot be determined.
+ *
+ * @param params - Image size parameters
+ * @returns Image size or undefined
+ */
+export declare function getImageSize({ image, aspectRatio, focusPoint, width, height, element, isLoaded, }: GetImageSizeParams): RectSize | undefined;
+/**
+ * Calculate shift position to center the focus point in the container.
+ *
+ * This function computes the percentage offset needed to position an image
+ * such that a specific focus point on the image aligns with the center of
+ * the container, taking into account the image's scale.
+ *
+ * @param params - Focus point shift calculation parameters
+ * @returns Percentage shift (0-100) for CSS positioning
+ */
+export declare function shiftPosition({ scale, focusPoint, imageSize, containerSize, }: {
+    scale: number;
+    focusPoint: number;
+    imageSize: number;
+    containerSize: number;
+}): number;
+/**
+ * Parameters for calculating focus point style.
+ */
+export interface CalculateFocusPointStyleParams {
+    /** Image URL */
+    image?: string;
+    /** Aspect ratio */
+    aspectRatio?: AspectRatio;
+    /** Focus point */
+    focusPoint?: FocusPoint;
+    /** Image element (for validation) */
+    element?: HTMLImageElement;
+    /** Natural image size */
+    imageSize?: RectSize;
+    /** Container size */
+    containerSize?: RectSize;
+}
+/**
+ * Calculates CSS style for applying focus point positioning.
+ *
+ * @param params - Focus point style parameters
+ * @returns CSS properties to apply to the image
+ */
+export declare function calculateFocusPointStyle({ image, aspectRatio, focusPoint, element, imageSize, containerSize, }: CalculateFocusPointStyleParams): CSSProperties;

package/js/components/Toolbar/Stories.d.ts

@@ -0,0 +1,46 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component, render, overrides, }: SetupStoriesOptions<{
+    overrides: 'WithBefore' | 'WithAfter' | 'WithAll';
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            label: {
+                control: string;
+            };
+            before: {
+                control: boolean;
+            };
+            after: {
+                control: boolean;
+            };
+        };
+        args: {
+            after?: import("react").ReactNode;
+            before?: import("react").ReactNode;
+            label?: import("react").ReactNode;
+            ref?: import("../../types").CommonRef;
+            className?: string | undefined;
+        };
+    };
+    /** Default toolbar with label */
+    Default: {
+        args: {
+            label: string;
+        };
+    };
+    /** Toolbar with before content */
+    WithBefore: {
+        [x: string]: any;
+    };
+    /** Toolbar with after content */
+    WithAfter: {
+        [x: string]: any;
+    };
+    /** Toolbar with all content areas */
+    WithAll: {
+        [x: string]: any;
+    };
+};

package/js/components/Toolbar/Tests.d.ts

@@ -0,0 +1,12 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    toolbar: HTMLElement;
+    div: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/Toolbar/index.d.ts

@@ -0,0 +1,33 @@
+import type { JSXElement, LumxClassName, HasClassName, CommonRef } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface ToolbarProps extends HasClassName {
+    /** After content (placed after the label). */
+    after?: JSXElement;
+    /** Before content (placed before the label). */
+    before?: JSXElement;
+    /** Label content. */
+    label?: JSXElement;
+    /** Component ref. */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const TOOLBAR_NAME = "Toolbar";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof TOOLBAR_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ToolbarProps>;
+/**
+ * Toolbar component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Toolbar: (props: ToolbarProps) => import("react").JSX.Element;

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

@@ -198,3 +198,12 @@ 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}`>;
+export declare const REAL_SIZE_FOR_LUMX_SIZE: {
+    xxs: number;
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+};

package/js/constants/enums/index.js

@@ -151,5 +151,14 @@ const ColorVariant = {
     L6: 'L6',
     N: 'N',
 };
+const REAL_SIZE_FOR_LUMX_SIZE = {
+    [Size.xxs]: 14,
+    [Size.xs]: 20,
+    [Size.s]: 24,
+    [Size.m]: 36,
+    [Size.l]: 64,
+    [Size.xl]: 128,
+    [Size.xxl]: 256,
+};
 
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, REAL_SIZE_FOR_LUMX_SIZE, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };

package/js/constants/index.js

@@ -1,4 +1,4 @@
 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/index.js';
 export { DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, NOTIFICATION_TRANSITION_DURATION, SLIDESHOW_TRANSITION_DURATION, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from './components/index.js';
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace } from './enums/index.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, REAL_SIZE_FOR_LUMX_SIZE, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace } from './enums/index.js';
 export { VISUALLY_HIDDEN } from './className/index.js';

package/js/types/AriaAttributes.d.ts

@@ -1,2 +1,29 @@
-import type { AriaAttributes } from 'react';
-export type { AriaAttributes };
+/**
+ * ARIA attributes type for components.
+ * All attributes are optional.
+ *
+ * This is a custom interface containing only the ARIA attributes
+ * actually used in the @lumx/core components, avoiding dependency on React types.
+ */
+export interface AriaAttributes {
+    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+    'aria-expanded'?: boolean | 'true' | 'false';
+    /** Indicates the availability and type of interactive popup element that can be triggered by the element. */
+    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** Indicates the current "pressed" state of toggle buttons. */
+    'aria-pressed'?: boolean | 'false' | 'mixed' | 'true';
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current element. */
+    'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describes the object. */
+    'aria-describedby'?: string;
+    /** Indicates whether the element is exposed to an accessibility API. */
+    'aria-hidden'?: boolean | 'true' | 'false';
+    /** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. */
+    'aria-disabled'?: boolean | 'true' | 'false';
+    /** Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. */
+    'aria-checked'?: boolean | 'false' | 'mixed' | 'true';
+    /** Indicates whether items in a table or grid are sorted in ascending or descending order. */
+    'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
+}

package/js/types/PartialBy.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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>>;
+/**
+ * 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>>;

package/js/types/index.d.ts

@@ -25,3 +25,5 @@ export type { HasChecked } from './HasChecked';
 export type { HasDisabled } from './HasDisabled';
 export type { AriaAttributes } from './AriaAttributes';
 export type { Selector } from './Selector';
+export type { PropsToOverride } from './jsx/PropsToOverride';
+export type { PartialBy, PartialExcept } from './PartialBy';

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

@@ -0,0 +1,2 @@
+/** list of generic props defined on JSX that need to be redefined for each framework */
+export type PropsToOverride = 'ref' | 'handleClick' | 'handleChange' | 'handleKeyPress';

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

@@ -1,3 +1,4 @@
+import { ClassValue } from 'classnames/types';
 import { type Modifier } from './modifier';
 /**
  * Generates a BEM block + modifier class name string.
@@ -11,5 +12,5 @@ import { type Modifier } from './modifier';
  * block('button'); // 'button'
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
-export declare function block(baseName: string, additionalClasses: string[]): string;
-export declare function block(baseName: string, modifiers?: Modifier, additionalClasses?: string[]): string;
+export declare function block(baseName: string, additionalClasses: ClassValue[]): string;
+export declare function block(baseName: string, modifiers?: Modifier, additionalClasses?: ClassValue[]): string;

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

@@ -1,3 +1,4 @@
+import { ClassValue } from 'classnames/types';
 import type { Modifier } from './modifier';
 /**
  * Creates a BEM element class generator function for the given base class.
@@ -12,5 +13,5 @@ import type { Modifier } from './modifier';
  * 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: string[]): string;
-export declare function element(baseClass: string, elem: string, modifiers?: Modifier, additionalClasses?: string[]): string;
+export declare function element(baseClass: string, elem: string, additionalClasses: ClassValue[]): string;
+export declare function element(baseClass: string, elem: string, modifiers?: Modifier, additionalClasses?: ClassValue[]): string;

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

@@ -1,3 +1,4 @@
+import { ClassValue } from 'classnames/types';
 import { block } from './block';
 import { element } from './element';
 import { type Modifier } from './modifier';
@@ -6,12 +7,12 @@ import { type Modifier } from './modifier';
  */
 export declare function bem(baseName: string): {
     block: {
-        (additionalClasses: string[]): string;
-        (modifiers?: Modifier, additionalClasses?: string[]): string;
+        (additionalClasses: ClassValue[]): string;
+        (modifiers?: Modifier, additionalClasses?: ClassValue[]): string;
     };
     element: {
-        (elem: string, additionalClasses: string[]): string;
-        (elem: string, modifiers?: Modifier, additionalClasses?: string[]): string;
+        (elem: string, additionalClasses: ClassValue[]): string;
+        (elem: string, modifiers?: Modifier, additionalClasses?: ClassValue[]): string;
     };
     modifier: (modifiers: Modifier) => string;
 };