@lumx/core 4.3.2-alpha.11 → 4.3.2-alpha.13

package/js/components/InputHelper/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const INPUT_HELPER_CONFIGURATION: Record<string, {
+    color: string;
+}>;

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

@@ -0,0 +1,26 @@
+import { Kind } from '../../constants';
+import type { LumxClassName, HasTheme, JSXElement, HasClassName, CommonRef } from '../../types';
+export declare const COMPONENT_NAME = "InputHelper";
+export declare const InputHelperClassName: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Defines the props of the component.
+ */
+export interface InputHelperProps extends HasClassName, HasTheme {
+    /** Helper content. */
+    children: JSXElement;
+    /** Helper variant. */
+    kind?: Kind;
+    /** ref to the root element `p` */
+    ref?: CommonRef;
+    /** id for the input helper */
+    id?: string;
+}
+/**
+ * InputHelper component.
+ */
+export declare function InputHelper(props: InputHelperProps): import("react").JSX.Element;
+export declare namespace InputHelper {
+    var displayName: string;
+    var className: "lumx-input-helper";
+    var defaultProps: Partial<InputHelperProps>;
+}

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

@@ -0,0 +1,34 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup InputLabel 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 }: SetupStoriesOptions): {
+    meta: {
+        component: any;
+        render: any;
+        args: {
+            children: string;
+        };
+        argTypes: {
+            isRequired: {
+                control: string;
+            };
+        };
+    };
+    /** Default input label */
+    Default: {};
+    /** Required input label */
+    IsRequired: {
+        args: {
+            isRequired: boolean;
+        };
+    };
+    /** Default input label with custom typography */
+    WithCustomTypography: {
+        args: {
+            typography: "subtitle1";
+        };
+    };
+};

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

@@ -0,0 +1,12 @@
+import { SetupOptions } from '../../../testing';
+import { InputLabelProps } from '.';
+type SetupProps = Partial<InputLabelProps>;
+/**
+ * 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<InputLabelProps>) => {
+    label: HTMLElement;
+    props: InputLabelProps;
+};
+declare const _default: (renderOptions: SetupOptions<InputLabelProps>) => void;
+export default _default;

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

@@ -0,0 +1,25 @@
+import { LumxClassName, HasTheme, JSXElement, HasClassName, CommonRef } from '../../types';
+import { Typography } from '../../constants';
+export declare const COMPONENT_NAME = "InputLabel";
+export declare const InputLabelClassName: LumxClassName<typeof COMPONENT_NAME>;
+export interface InputLabelProps extends HasClassName, HasTheme {
+    /** Typography variant. */
+    typography?: Typography;
+    /** Label content. */
+    children: JSXElement;
+    /** Native htmlFor property. */
+    htmlFor: string;
+    /** Whether the component is required or not. */
+    isRequired?: boolean;
+    /** ref to the root element */
+    ref?: CommonRef;
+}
+/**
+ * InputLabel component.
+ */
+export declare function InputLabel(props: InputLabelProps): import("react").JSX.Element;
+export declare namespace InputLabel {
+    var displayName: string;
+    var className: "lumx-input-label";
+    var defaultProps: Partial<InputLabelProps>;
+}

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

@@ -0,0 +1,93 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { ColorVariant } from '@lumx/core/js/constants';
+/**
+ * Setup Link 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 }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            onClick: {
+                action: boolean;
+            };
+            typography: {
+                control: string;
+            };
+        };
+        args: {
+            label: string;
+            color?: import("@lumx/core/js/constants").ColorWithVariants | undefined;
+            colorVariant?: ColorVariant | undefined;
+            href?: string | undefined;
+            leftIcon?: string | undefined;
+            as?: string | any;
+            rightIcon?: string | undefined;
+            target?: string | undefined;
+            typography?: string | undefined;
+            onClick?: ((event: any) => void) | undefined;
+            ref?: import("../../types").CommonRef;
+            theme?: import("@lumx/core/js/constants").Theme | undefined;
+            className?: string | undefined;
+            'aria-disabled'?: import("../../types/Booleanish").Booleanish | undefined;
+            isDisabled?: boolean | undefined;
+            disabled?: boolean | undefined;
+        };
+    };
+    /** Default link */
+    Default: {
+        args: {
+            href: string;
+            target: string;
+        };
+    };
+    /** Link as button */
+    AsButton: {
+        args: {
+            label: string;
+        };
+    };
+    /** With typography */
+    WithTypography: {
+        args: {
+            href: string;
+            typography: string;
+        };
+    };
+    /** With color */
+    WithColor: {
+        args: {
+            href: string;
+            color: "primary";
+            colorVariant: "D1";
+        };
+    };
+    /** Disabled states */
+    Disabled: {
+        argTypes: {
+            isDisabled: {
+                control: boolean;
+            };
+            'aria-disabled': {
+                control: boolean;
+            };
+        };
+        args: {
+            label: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All states */
+    AllStates: {
+        argTypes: {
+            isDisabled: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,15 @@
+import { SetupOptions } from '../../../testing';
+import { LinkProps } from '.';
+type SetupProps = Partial<LinkProps>;
+/**
+ * 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<LinkProps>) => {
+    link: HTMLElement;
+    rightIcon: HTMLElement | null;
+    leftIcon: HTMLElement | null;
+    content: HTMLElement | null;
+    props: LinkProps;
+};
+declare const _default: (renderOptions: SetupOptions<LinkProps>) => void;
+export default _default;

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

@@ -0,0 +1,54 @@
+import { ColorVariant, ColorWithVariants } from '@lumx/core/js/constants';
+import type { JSXElement, LumxClassName, HasTheme, HasClassName, CommonRef, HasAriaDisabled, HasDisabled } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface LinkProps extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled {
+    /** Link label content. */
+    label?: JSXElement;
+    /** Color variant. */
+    color?: ColorWithVariants;
+    /** Lightened or darkened variant of the selected icon color. */
+    colorVariant?: ColorVariant;
+    /** Link href. */
+    href?: string;
+    /**
+     * Left icon (SVG path).
+     * @deprecated Instead, simply nest `<Icon />` in the label
+     */
+    leftIcon?: string;
+    /** Element type or custom component for the link. */
+    as?: string | any;
+    /**
+     * Right icon (SVG path).
+     * @deprecated Instead, simply nest `<Icon />` in the label
+     */
+    rightIcon?: string;
+    /** Link target. */
+    target?: string;
+    /** Typography variant. */
+    typography?: string;
+    /** Click handler. */
+    onClick?: (event: any) => void;
+    /** Reference to the root element. */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Link";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<LinkProps>;
+/**
+ * Link component (Core UI).
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Link: (props: LinkProps) => import("react").JSX.Element;

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

@@ -0,0 +1,119 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Message 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, }: SetupStoriesOptions<{
+    overrides: 'ClosableMessage';
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            kind: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("info" | "success" | "warning" | "error")[];
+                mapping: Record<string, "info" | "success" | "warning" | "error"> | undefined;
+            };
+            hasBackground: {
+                control: string;
+            };
+            icon: {
+                control: {
+                    type: string;
+                };
+                options: {
+                    undefined: undefined;
+                    mdiAbTesting: string;
+                    mdiAbjadArabic: string;
+                    mdiAccount: string;
+                    mdiAccountBox: string;
+                    mdiAlert: string;
+                    mdiAlertCircle: string;
+                    mdiArrowDown: string;
+                    mdiArrowUp: string;
+                    mdiAtom: string;
+                    mdiBee: string;
+                    mdiBell: string;
+                    mdiBullhornOutline: string;
+                    mdiCheck: string;
+                    mdiCheckCircle: string;
+                    mdiChevronDown: string;
+                    mdiChevronLeft: string;
+                    mdiChevronRight: string;
+                    mdiChevronUp: string;
+                    mdiClose: string;
+                    mdiCloseCircle: string;
+                    mdiDelete: string;
+                    mdiDotsHorizontal: string;
+                    mdiDragVertical: string;
+                    mdiEarth: string;
+                    mdiEmail: string;
+                    mdiEye: string;
+                    mdiFileEdit: string;
+                    mdiFlag: string;
+                    mdiFolder: string;
+                    mdiFolderGoogleDrive: string;
+                    mdiFoodApple: string;
+                    mdiGoogleCirclesExtended: string;
+                    mdiHeart: string;
+                    mdiHome: string;
+                    mdiImageBroken: string;
+                    mdiInformation: string;
+                    mdiLink: string;
+                    mdiMagnifyMinusOutline: string;
+                    mdiMagnifyPlusOutline: string;
+                    mdiMenuDown: string;
+                    mdiMessageTextOutline: string;
+                    mdiMinus: string;
+                    mdiOpenInNew: string;
+                    mdiPauseCircleOutline: string;
+                    mdiPencil: string;
+                    mdiPlay: string;
+                    mdiPlayCircleOutline: string;
+                    mdiPlus: string;
+                    mdiRadioboxBlank: string;
+                    mdiRadioboxMarked: string;
+                    mdiReply: string;
+                    mdiSend: string;
+                    mdiStar: string;
+                    mdiTextBox: string;
+                    mdiTextBoxPlus: string;
+                    mdiTram: string;
+                    mdiTranslate: string;
+                    mdiViewList: string;
+                };
+            };
+        };
+        args: {
+            children: string;
+        };
+    };
+    /** Default message */
+    Default: {};
+    /** All `kind` variants */
+    AllKinds: {
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All `kind` variants with `hasBackground` */
+    AllKindsWithBackground: {
+        args: {
+            hasBackground: boolean;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** With custom icon */
+    CustomIcon: {
+        args: {
+            icon: string;
+        };
+    };
+    /** With close button (has background and kind info) */
+    ClosableMessage: {
+        args: any;
+    };
+};

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

@@ -0,0 +1,14 @@
+import { SetupOptions } from '../../../testing';
+import { MessageProps } from '.';
+type SetupProps = Partial<MessageProps>;
+/**
+ * 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<MessageProps>) => {
+    message: HTMLElement;
+    icon: HTMLElement | null;
+    closeButton: HTMLElement | null;
+    props: MessageProps;
+};
+declare const _default: (renderOptions: SetupOptions<MessageProps>) => void;
+export default _default;

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

@@ -0,0 +1,75 @@
+import { Kind } from '../../constants';
+import type { JSXElement, LumxClassName, HasClassName, CommonRef } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface MessageProps extends HasClassName {
+    /** Content. */
+    children?: JSXElement;
+    /** Whether the message has a background or not. */
+    hasBackground?: boolean;
+    /** Message variant. */
+    kind?: Kind;
+    /** Message custom icon SVG path. */
+    icon?: string;
+    /** Reference to the message container element. */
+    ref?: CommonRef;
+    /**
+     * Displays a close button.
+     *
+     * NB: only available if `kind === 'info' && hasBackground === true`
+     */
+    closeButtonProps?: {
+        /** The callback called when the button is clicked */
+        onClick: () => void;
+        /** The label of the close button. */
+        label: string;
+    };
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Message";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const block: {
+    (additionalClasses: string[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+}, element: {
+    (elem: string, additionalClasses: string[]): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+};
+/**
+ * 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;
+    };
+};
+/**
+ * Message component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Message: {
+    (props: MessageProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-message";
+};

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

@@ -0,0 +1,77 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup RadioButton 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 }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            onChange: {
+                action: boolean;
+            };
+            name: {
+                control: boolean;
+            };
+            value: {
+                control: boolean;
+            };
+        };
+        args: {
+            isChecked: boolean;
+            name: string;
+            value: string;
+            helper?: string | undefined;
+            id?: string | undefined;
+            label?: import("react").ReactNode;
+            inputProps?: Record<string, any> | undefined;
+            inputRef?: import("../../types").CommonRef;
+            inputId?: string | undefined;
+            onChange?: ((value?: string, name?: string, event?: any) => void) | undefined;
+            ref?: import("../../types").CommonRef;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+            'aria-disabled'?: import("../../types/Booleanish").Booleanish | undefined;
+            isDisabled?: boolean | undefined;
+            disabled?: boolean | undefined;
+            checked?: boolean | undefined;
+        };
+    };
+    /** Default radio button */
+    Default: {};
+    /** With label and helper */
+    LabelAndHelper: {
+        argTypes: {
+            label: {
+                control: string;
+            };
+            helper: {
+                control: string;
+            };
+        };
+        args: {
+            label: string;
+            helper: string;
+        };
+    };
+    /** Disabled */
+    Disabled: {
+        argTypes: {
+            isDisabled: {
+                control: boolean;
+            };
+            'aria-disabled': {
+                control: boolean;
+            };
+        };
+        args: {
+            label: string;
+            helper: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,15 @@
+import { SetupOptions } from '../../../testing';
+import { RadioButtonProps } from '.';
+type SetupProps = Partial<RadioButtonProps>;
+/**
+ * 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<RadioButtonProps>) => {
+    radioButton: HTMLElement;
+    helper: HTMLElement | null;
+    label: HTMLElement | null;
+    input: HTMLElement;
+    props: RadioButtonProps;
+};
+declare const _default: (renderOptions: SetupOptions<RadioButtonProps>) => void;
+export default _default;

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

@@ -0,0 +1,45 @@
+import type { JSXElement, LumxClassName, HasTheme, HasAriaDisabled, HasDisabled, HasClassName, HasChecked, CommonRef } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface RadioButtonProps extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked {
+    /** Helper text. */
+    helper?: string;
+    /** Native input id property. */
+    id?: string;
+    /** Label content. */
+    label?: JSXElement;
+    /** Native input name property. */
+    name?: string;
+    /** Native input value property. */
+    value?: string;
+    /** optional props for input */
+    inputProps?: Record<string, any>;
+    /** Native input ref. */
+    inputRef?: CommonRef;
+    /** Native input id. */
+    inputId: string;
+    /** On change callback. */
+    onChange?(value?: string, name?: string, event?: any): void;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "RadioButton";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<RadioButtonProps>;
+/**
+ * RadioButton component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const RadioButton: (props: RadioButtonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { RawClickableProps } from '.';
+import { SetupOptions } from '../../../testing';
+type SetupProps = Partial<RawClickableProps<any>>;
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: SetupProps | undefined, { render, screen, ...options }: SetupOptions<RawClickableProps<any>>) => {
+    element: HTMLElement;
+    props: Omit<any, "ref"> & {
+        as?: any;
+    } & Record<string, unknown> & import(".").BaseClickableProps;
+};
+declare const _default: (renderOptions: SetupOptions<RawClickableProps<any>>) => void;
+export default _default;

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

@@ -0,0 +1,13 @@
+import { CommonRef, HasPolymorphicAs, HasRequiredLinkHref, HasDisabled, JSXElement, ElementType, HasAriaDisabled } from '../../types';
+export type ClickableElement = 'a' | 'button' | ElementType;
+export interface BaseClickableProps extends HasDisabled, HasAriaDisabled {
+    children?: JSXElement;
+    onClick?: (event?: any) => void;
+    ref?: CommonRef;
+}
+export type RawClickableProps<E extends ClickableElement> = HasPolymorphicAs<E> & HasRequiredLinkHref<E> & BaseClickableProps;
+/**
+ * Render clickable element (link, button or custom element)
+ * (also does some basic disabled state handling)
+ */
+export declare const RawClickable: <E extends ClickableElement>(props: RawClickableProps<E>) => import("react").JSX.Element;

package/js/components/Skeleton/SkeletonCircle.d.ts

@@ -0,0 +1,32 @@
+import type { LumxClassName, HasTheme, HasClassName, CommonRef } from '../../types';
+import type { GlobalSize, ColorPalette } from '../../constants';
+/**
+ * Defines the props of the component.
+ */
+export interface SkeletonCircleProps extends HasTheme, HasClassName {
+    /** Size variant. */
+    size: GlobalSize;
+    /** The color of the skeleton. */
+    color?: ColorPalette;
+    /** Reference to the root element. */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "SkeletonCircle";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<SkeletonCircleProps>;
+/**
+ * SkeletonCircle component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const SkeletonCircle: (props: SkeletonCircleProps) => import("react").JSX.Element;