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

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.17.1-alpha.2",
+        "@lumx/icons": "^4.17.1-alpha.3",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.18.1",
@@ -60,35 +60,29 @@
     "scripts": {
         "generate:design-tokens": "yarn node style-dictionary/index.cjs",
         "lint": "cd ../.. && eslint packages/lumx-core/src/",
-        "build": "rollup -c",
+        "build": "vite build",
         "test": "vitest run --run",
         "type-check": "yarn tsc -p tsconfig.json",
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.17.1-alpha.2",
+    "version": "4.17.1-alpha.3",
     "devDependencies": {
-        "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/user-event": "^14.6.1",
         "@types/react": "^18.3.24",
         "autoprefixer": "^9.7.4",
-        "glob": "^7.1.6",
         "jsdom": "^27.2.0",
         "postcss": "^8.5.11",
-        "rollup": "^4.59.0",
-        "rollup-plugin-cleaner": "^1.0.0",
-        "rollup-plugin-copy": "^3.5.0",
-        "rollup-plugin-ts-paths-resolve": "^1.7.1",
         "sass": "1.70.0",
         "style-dictionary": "^3.9.0",
         "tinycolor2": "^1.4.1",
         "typescript": "^5.4.3",
         "version-changelog": "^3.1.1",
-        "vite": "^7.3.5",
-        "vite-tsconfig-paths": "^5.1.4",
-        "vitest": "^4.0.18"
+        "vite": "^8.0.16",
+        "vite-plugin-static-copy": "^4.1.1",
+        "vitest": "^4.1.9"
     },
     "stableVersion": "4.17.0"
 }

package/_internal/DPnPEC08.js

@@ -1,9 +0,0 @@
-/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
-function resolveColorWithVariants(colorWithVariants, colorVariant) {
-    if (!colorWithVariants)
-        return [undefined, colorVariant];
-    const [color, baseColorVariant] = colorWithVariants.split('-');
-    return [color, (colorVariant || baseColorVariant)];
-}
-
-export { resolveColorWithVariants };

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

@@ -1,115 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-import { Kind } from '../../constants';
-/**
- * Setup AlertDialog stories for a specific framework (React or Vue).
- * Framework-specific components and render function are injected via `components` and `render`.
- */
-export declare function setup({ component: AlertDialog, render, components: { Link }, decorators: { withChromaticForceScreenSize, withNestedProps }, }: SetupStoriesOptions<{
-    components: {
-        Link: any;
-    };
-    decorators: 'withChromaticForceScreenSize' | 'withNestedProps';
-}>): {
-    meta: {
-        component: any;
-        render: any;
-        args: {
-            'confirmProps.label': string;
-            confirmProps?: any;
-            cancelProps?: any;
-            dialogProps?: any;
-            ref?: import("../../types").CommonRef;
-            cancelButtonRef?: import("../../types").CommonRef;
-            confirmationButtonRef?: import("../../types").CommonRef;
-            DescriptionElement?: any;
-            Dialog?: any;
-            Toolbar?: any;
-            Button?: any;
-            Icon?: any;
-            id?: string | undefined;
-            focusElement?: any;
-            className?: string | undefined;
-            kind?: Kind | undefined;
-            title?: string | undefined;
-            children?: import("react").ReactNode;
-            size?: import("../Dialog").DialogSizes | undefined;
-        };
-        argTypes: {
-            size: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("big" | "tiny" | "regular" | "huge")[];
-                mapping: Record<string, "big" | "tiny" | "regular" | "huge"> | undefined;
-            };
-            kind: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("info" | "success" | "warning" | "error")[];
-                mapping: Record<string, "info" | "success" | "warning" | "error"> | undefined;
-            };
-            'confirmProps.onClick': {
-                action: boolean;
-            };
-        };
-        parameters: {
-            chromatic: {
-                pauseAnimationAtEnd: boolean;
-                delay: number;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    DefaultKind: {
-        args: {
-            title: string;
-            children: string;
-        };
-    };
-    Warning: {
-        args: {
-            kind: "warning";
-            title: string;
-            children: string;
-        };
-    };
-    Success: {
-        args: {
-            kind: "success";
-            title: string;
-            children: string;
-        };
-    };
-    Error: {
-        args: {
-            kind: "error";
-            title: string;
-            children: string;
-        };
-    };
-    WithCancel: {
-        argTypes: {
-            'cancelProps.onClick': {
-                action: boolean;
-            };
-        };
-        args: {
-            title: string;
-            'cancelProps.label': string;
-            children: string;
-        };
-    };
-    RichDescription: {
-        argTypes: {
-            children: {
-                control: boolean;
-            };
-        };
-        args: {
-            title: string;
-            children: string;
-        };
-        render: ({ children, ...args }: any) => any;
-    };
-};

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

@@ -1,11 +0,0 @@
-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;
-    alertDialog: HTMLElement | null;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

@@ -1,91 +0,0 @@
-import { Kind } from '../../constants';
-import type { LumxClassName, JSXElement, HasClassName, CommonRef } from '../../types';
-import { DialogProps } from '../Dialog';
-export interface BaseAlertDialogProps {
-    /** Message variant. */
-    kind?: Kind;
-    /** Dialog title. */
-    title?: string;
-    /**
-     * Children
-     */
-    children?: JSXElement;
-}
-export interface AlertDialogProps extends HasClassName, BaseAlertDialogProps, Pick<DialogProps, 'size'> {
-    /** Props forwarded to the confirm button */
-    confirmProps: any;
-    /**
-     * Props forwarded to the cancel button.
-     * Will not render a cancel button if undefined.
-     */
-    cancelProps?: any;
-    /** Props forwarded to the dialog wrapper element. */
-    dialogProps?: any;
-    /** Ref forwarded to the dialog root element. */
-    ref?: CommonRef;
-    /** Ref forwarded to the cancel button element. */
-    cancelButtonRef?: CommonRef;
-    /** Ref forwarded to the confirm button element. */
-    confirmationButtonRef?: CommonRef;
-    /** Element used to wrap the description (children). */
-    DescriptionElement: any;
-    /** Dialog component injected by the framework wrapper. */
-    Dialog: any;
-    /** Toolbar component injected by the framework wrapper. */
-    Toolbar: any;
-    /** Button component injected by the framework wrapper. */
-    Button: any;
-    /** Icon component injected by the framework wrapper. */
-    Icon: any;
-    /** Unique identifier for the dialog (used for aria-labelledby / aria-describedby). */
-    id: string;
-    /**
-     * Pre-computed focus element.
-     * Allows framework wrappers to pass the actual DOM element directly when ref-on-component
-     * does not yield a DOM node (e.g. Vue). Falls back to cancelButtonRef / confirmationButtonRef.
-     */
-    focusElement?: any;
-}
-/**
- * Associative map from message kind to color and icon.
- */
-export declare const CONFIG: {
-    error: {
-        color: "red";
-        icon: string;
-    };
-    info: {
-        color: "blue";
-        icon: string;
-    };
-    success: {
-        color: "green";
-        icon: string;
-    };
-    warning: {
-        color: "yellow";
-        icon: string;
-    };
-};
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "AlertDialog";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<AlertDialogProps>;
-/**
- * AlertDialog component.
- *
- * An alert dialog is a modal dialog that interrupts the user's workflow to
- * communicate an important message and acquire a response.
- *
- * It should not have a complex content.
- * Children of this component should only be strings, paragraphs or links.
- */
-export declare const AlertDialog: (props: AlertDialogProps) => import("react").JSX.Element;

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

@@ -1,52 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-import { type AvatarSize } from '.';
-export declare function setup({ component: Avatar, decorators: { withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations';
-}>): {
-    meta: {
-        component: any;
-        argTypes: {
-            image: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: string[];
-                mapping: Record<string, string> | undefined;
-            };
-            size: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: AvatarSize[];
-                mapping: Record<string, AvatarSize> | undefined;
-            };
-        };
-        args: {
-            image: string;
-            alt: string;
-        };
-    };
-    Default: {};
-    AvatarButton: {
-        argTypes: {
-            onClick: {
-                action: boolean;
-            };
-        };
-    };
-    AvatarLink: {
-        args: {
-            href: string;
-            target: string;
-            linkAs: string;
-        };
-    };
-    AllSizes: {
-        argTypes: {
-            size: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

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

@@ -1,11 +0,0 @@
-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;
-    avatar: HTMLElement;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

@@ -1,50 +0,0 @@
-import type { HasClassName, JSXElement, LumxClassName, HasTheme, CommonRef } from '../../types';
-import { Size } from '../../constants';
-/**
- * Avatar sizes.
- */
-export type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-/**
- * Defines the props of the component.
- */
-export interface AvatarProps extends HasTheme, HasClassName {
-    /** Action toolbar content. */
-    actions?: JSXElement;
-    /** Badge. */
-    badge?: JSXElement;
-    /** Image URL. */
-    image: JSXElement;
-    /** Size variant. */
-    size?: AvatarSize;
-    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
-    ref?: CommonRef;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "Avatar";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-export declare const block: {
-    (additionalClasses: import("../../utils/classNames/bem/types").AdditionalClasses): string;
-    (modifiers?: import("../../utils/classNames/bem/types").Modifier, additionalClasses?: import("../../utils/classNames/bem/types").AdditionalClasses): string;
-}, element: {
-    (elem: string, additionalClasses: import("../../utils/classNames/bem/types").AdditionalClasses): string;
-    (elem: string, modifiers?: import("../../utils/classNames/bem/types").Modifier, additionalClasses?: import("../../utils/classNames/bem/types").AdditionalClasses): string;
-};
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: {
-    readonly size: "m";
-};
-/**
- * Avatar component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export declare const Avatar: (props: AvatarProps) => import("react").JSX.Element;

package/js/components/Badge/BadgeWrapper.d.ts

@@ -1,13 +0,0 @@
-import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
-export interface BadgeWrapperProps extends HasClassName {
-    /** Badge element to display */
-    badge?: JSXElement;
-    /** Content to wrap with badge */
-    children?: JSXElement;
-    /** Ref forwarding */
-    ref?: CommonRef;
-}
-export declare const COMPONENT_NAME = "BadgeWrapper";
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-export declare const DEFAULT_PROPS: Partial<BadgeWrapperProps>;
-export declare const BadgeWrapper: (props: BadgeWrapperProps) => import("react").JSX.Element;

package/js/components/Badge/BadgeWrapperStories.d.ts

@@ -1,29 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup BadgeWrapper stories for a specific framework (React or Vue).
- * Framework-specific components (Badge, Icon, Button) are injected via `components`.
- */
-export declare function setup({ component: BadgeWrapper, components: { Badge, Icon, Button }, }: SetupStoriesOptions<{
-    components: {
-        Badge: any;
-        Icon: any;
-        Button: any;
-    };
-}>): {
-    meta: {
-        component: any;
-        render: (args: any) => import("react").JSX.Element;
-        argTypes: {
-            children: {
-                control: boolean;
-            };
-        };
-        args: Partial<import("./BadgeWrapper").BadgeWrapperProps>;
-    };
-    WithIcon: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-    WithButton: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-};

package/js/components/Badge/BadgeWrapperTests.d.ts

@@ -1,9 +0,0 @@
-import { SetupOptions } from '../../../testing';
-export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
-    props: any;
-    badgeWrapper: HTMLElement;
-    div: HTMLElement;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

@@ -1,46 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup Badge stories for a specific framework (React or Vue).
- * Framework-specific components (Icon, Thumbnail, etc.) are injected via `components`.
- */
-export declare function setup({ component: Badge, components: { Icon, Thumbnail, FlexBox }, decorators: { withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations';
-    components: {
-        Icon: any;
-        Thumbnail: any;
-        FlexBox: any;
-    };
-}>): {
-    meta: {
-        component: any;
-        render: (args: any) => import("react").JSX.Element;
-        argTypes: {
-            color: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined)[];
-                mapping: Record<string, "light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined> | undefined;
-            };
-        };
-        args: Partial<import(".").BadgeProps>;
-    };
-    WithText: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-    WithIcon: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-    WithThumbnail: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-    AllColors: {
-        render: (args: any) => import("react").JSX.Element;
-        argTypes: {
-            color: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

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

@@ -1,12 +0,0 @@
-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;
-    badge: HTMLElement;
-    div: HTMLElement;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

@@ -1,37 +0,0 @@
-import { ColorPalette } from '../../constants';
-import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
-/**
- * Defines the props of the component.
- */
-export interface BadgeProps extends HasClassName {
-    /** Badge content. */
-    children?: JSXElement;
-    /** Color variant. */
-    color?: ColorPalette;
-    /** reference to the root element */
-    ref?: CommonRef;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "Badge";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<BadgeProps>;
-/**
- * Badge component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const Badge: {
-    (props: BadgeProps): import("react").JSX.Element;
-    displayName: string;
-    className: "lumx-badge";
-    defaultProps: Partial<BadgeProps>;
-};

package/js/components/Button/Button.d.ts

@@ -1,48 +0,0 @@
-import type { JSXElement, LumxClassName } from '../../types';
-import { BaseButtonProps } from './ButtonRoot';
-/**
- * Button emphasis definition.
- * @deprecated Use Emphasis instead.
- */
-export declare const ButtonEmphasis: {
-    readonly low: "low";
-    readonly medium: "medium";
-    readonly high: "high";
-};
-/**
- * Defines the props of the component.
- */
-export interface ButtonProps extends BaseButtonProps {
-    /** Left icon (SVG path). */
-    leftIcon?: string;
-    /** Right icon (SVG path). */
-    rightIcon?: string;
-    /** When `true`, the button gets as large as possible. */
-    fullWidth?: boolean;
-    /** Children */
-    children?: JSXElement;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "Button";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<ButtonProps>;
-/**
- * Button component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const Button: {
-    (props: ButtonProps): import("react").JSX.Element;
-    displayName: string;
-    className: "lumx-button";
-    defaultProps: Partial<ButtonProps>;
-};

package/js/components/Button/ButtonGroup.d.ts

@@ -1,36 +0,0 @@
-import type { LumxClassName, HasClassName, JSXElement, CommonRef } from '../../types';
-/**
- * Defines the props of the component
- */
-export interface ButtonGroupProps extends HasClassName {
-    /**
-     * Children
-     */
-    children?: JSXElement;
-    /** reference to the root element */
-    ref?: CommonRef;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "ButtonGroup";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<ButtonGroupProps>;
-/**
- * ButtonGroup component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const ButtonGroup: {
-    (props: ButtonGroupProps): import("react").JSX.Element;
-    displayName: string;
-    className: "lumx-button-group";
-    defaultProps: Partial<ButtonGroupProps>;
-};

package/js/components/Button/ButtonGroupStories.d.ts

@@ -1,33 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup ButtonGroup stories for a specific framework (React or Vue).
- * Framework-specific components (Button, IconButton) are injected via `components`.
- */
-export declare function setup({ component: ButtonGroup, components: { Button, IconButton }, decorators: { withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations';
-    components: {
-        Button: any;
-        IconButton: any;
-    };
-}>): {
-    meta: {
-        component: any;
-        render: (args: any) => import("react").JSX.Element;
-        argTypes: {
-            children: {
-                control: boolean;
-            };
-        };
-        args: any;
-    };
-    Variants: {
-        render: ({ size, emphasis, theme }: any) => import("react").JSX.Element;
-        decorators: ((story: any, context: any) => any)[];
-    };
-    OneButton: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-    ManyButtons: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-};