@lumx/core 4.3.2-alpha.17 → 4.3.2-alpha.18

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/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,4 @@ export type { HasChecked } from './HasChecked';
 export type { HasDisabled } from './HasDisabled';
 export type { AriaAttributes } from './AriaAttributes';
 export type { Selector } from './Selector';
+export type { PartialBy, PartialExcept } from './PartialBy';

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;
 };

package/js/utils/events/index.js

@@ -0,0 +1,2 @@
+export { onButtonPressed, onEnterPressed, onEscapePressed } from './keyboard.js';
+export { detectHorizontalSwipe } from './swipe.js';

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^4.3.2-alpha.17",
+        "@lumx/icons": "^4.3.2-alpha.18",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.23",
@@ -22,32 +22,6 @@
     "license": "MIT",
     "type": "module",
     "name": "@lumx/core",
-    "exports": {
-        "./js/constants": {
-            "default": "./js/constants/index.js",
-            "types": "./js/constants/index.d.ts"
-        },
-        "./js/types": {
-            "default": "./js/types/index.js",
-            "types": "./js/types/index.d.ts"
-        },
-        "./js/utils/classNames": {
-            "default": "./js/utils/classNames/index.js",
-            "types": "./js/utils/classNames/index.d.ts"
-        },
-        "./js/utils/disabledState": {
-            "default": "./js/utils/disabledState/index.js",
-            "types": "./js/utils/disabledState/index.d.ts"
-        },
-        "./js/utils/selectors": {
-            "default": "./js/utils/selectors/index.js",
-            "types": "./js/utils/selectors/index.d.ts"
-        },
-        "./js/utils": {
-            "default": "./js/utils/index.js",
-            "types": "./js/utils/index.d.ts"
-        }
-    },
     "publishConfig": {
         "directory": "dist"
     },
@@ -63,7 +37,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.3.2-alpha.17",
+    "version": "4.3.2-alpha.18",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",

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';
-export declare function setup({ component, render, overrides, }: SetupStoriesOptions<{
-    overrides: 'WithIcon' | 'WithButton';
-    decorators?: never;
-}>): {
-    meta: {
-        component: any;
-        render: any;
-        argTypes: {
-            children: {
-                control: boolean;
-            };
-        };
-        args: {
-            badge?: import("react").ReactNode;
-            children?: import("react").ReactNode;
-            ref?: import("../../types").CommonRef;
-            className?: string | undefined;
-        };
-    };
-    /** Using badge wrapper with icon */
-    WithIcon: {
-        [x: string]: any;
-    };
-    /** Using badge wrapper with button */
-    WithButton: {
-        [x: string]: any;
-    };
-};

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,52 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-import { ColorPalette } from '../../constants';
-/**
- * Setup Badge 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: { withCombinations }, overrides, }: SetupStoriesOptions<{
-    overrides: 'WithIcon';
-    decorators: 'withCombinations';
-}>): {
-    meta: {
-        component: any;
-        render: any;
-        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;
-            };
-            children: {
-                control: boolean;
-            };
-        };
-        args: {
-            children?: import("react").ReactNode;
-            color?: ColorPalette | undefined;
-            ref?: import("../../types").CommonRef;
-            className?: string | undefined;
-        };
-    };
-    /** Using badge with text children */
-    WithText: {
-        args: {
-            children: string;
-        };
-    };
-    /** Using badge with icon children - Icon component provided via overrides */
-    WithIcon: {
-        [x: string]: any;
-    };
-    /** All combinations of colors and children types */
-    AllColors: {
-        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,37 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/** Names of all ButtonGroup stories */
-export type ButtonGroupStoryName = 'Variants' | 'OneButton' | 'ManyButtons';
-/** Options for setting up ButtonGroup stories */
-export type SetupButtonGroupStoriesOptions = SetupStoriesOptions<{
-    overrides: ButtonGroupStoryName;
-    decorators: 'withCombinations';
-}>;
-/**
- * Setup ButtonGroup stories for a specific framework (React or Vue).
- * This function creates all the stories with the appropriate decorators.
- * Framework-specific render functions or args can be injected via `overrides`.
- */
-export declare function setup({ component, render, decorators: { withCombinations }, overrides, }: SetupButtonGroupStoriesOptions): {
-    meta: {
-        component: any;
-        render: any;
-        argTypes: {
-            children: {
-                control: boolean;
-            };
-        };
-        args: Partial<import("./ButtonGroup").ButtonGroupProps>;
-    };
-    /** Size & emphasis variants */
-    Variants: {
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** ButtonGroup with a single button */
-    OneButton: {
-        [x: string]: any;
-    };
-    /** ButtonGroup with many buttons */
-    ManyButtons: {
-        [x: string]: any;
-    };
-};

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

@@ -1,55 +0,0 @@
-import { ColorPalette, Emphasis, Size } from '../../constants';
-import { HasTheme, HasAriaDisabled, AriaAttributes, HasClassName } from '../../types';
-import { BaseClickableProps } from '../RawClickable';
-/**
- * Button size definition.
- */
-export type ButtonSize = Extract<Size, 's' | 'm'>;
-export interface BaseButtonProps extends Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>, HasClassName, HasTheme, HasAriaDisabled, BaseClickableProps {
-    /** Color variant. */
-    color?: ColorPalette;
-    /** Emphasis variant. */
-    emphasis?: Emphasis;
-    /** Whether or not the button has a background color in low emphasis. */
-    hasBackground?: boolean;
-    /** Native anchor href property. It determines whether the Button will be a <button> or an <a>. */
-    href?: string;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the component is selected or not (unsupported in `high` emphasis). */
-    isSelected?: boolean;
-    /** Native button name property. */
-    name?: string;
-    /** Size variant. */
-    size?: ButtonSize;
-    /** Native anchor target property. */
-    target?: '_self' | '_blank' | '_parent' | '_top';
-    /** Native button type. */
-    type?: 'submit' | 'reset' | 'button' | undefined;
-    /** Custom component for the link (can be used to inject router Link). */
-    linkAs?: 'a' | any;
-    /** whether the button is dispalyed in full width or not */
-    fullWidth?: boolean;
-    /** whether the button is currently active or not */
-    isActive?: boolean;
-    /** whether the button is currently focused or not */
-    isFocused?: boolean;
-    /** whether the button is currently focused or not */
-    isHovered?: boolean;
-}
-export interface ButtonRootProps extends BaseButtonProps {
-    variant: 'button' | 'icon';
-}
-export declare const BUTTON_WRAPPER_CLASSNAME = "lumx-button-wrapper";
-export declare const BUTTON_CLASSNAME = "lumx-button";
-/**
- * ButtonRoot component.
- *
- * @param  props Component props.
- * @return JSX Element.
- */
-export declare const ButtonRoot: {
-    (props: ButtonRootProps): import("react").JSX.Element;
-    displayName: string;
-    defaultProps: {};
-};

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

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

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

@@ -1,45 +0,0 @@
-import { BaseButtonProps } from './ButtonRoot';
-import type { LumxClassName } from '../../types';
-export interface IconButtonProps extends BaseButtonProps {
-    /**
-     * Icon (SVG path).
-     * If `image` is also set, `image` will be used instead.
-     */
-    icon?: string;
-    /**
-     * Image (image url).
-     * Has priority over `icon`.
-     */
-    image?: string;
-    /**
-     * Label text (required for a11y purpose).
-     * If you really don't want an aria-label, you can set an empty label (this is not recommended).
-     */
-    label: string;
-    /** text to be displayed on hover */
-    title?: string;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "IconButton";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<IconButtonProps>;
-/**
- * IconButton component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const IconButton: {
-    (props: IconButtonProps): import("react").JSX.Element;
-    displayName: string;
-    className: "lumx-icon-button";
-    defaultProps: Partial<IconButtonProps>;
-};