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

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

@@ -0,0 +1,302 @@
+import { Emphasis, Theme } from '@lumx/core/js/constants';
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { ButtonSize } from './ButtonRoot';
+export declare const excludeCombination: ({ isSelected, emphasis, hasBackground }: any) => boolean;
+/**
+ * Setup Button 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, withThemedBackground }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations' | 'withThemedBackground';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            isSelected: {
+                control: string;
+                if: {
+                    arg: string;
+                    eq: string;
+                };
+            };
+            isDisabled: {
+                control: string;
+            };
+            hasBackground: {
+                control: string;
+                if: {
+                    arg: string;
+                    eq: string;
+                };
+            };
+            emphasis: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("medium" | "low" | "high")[];
+                mapping: Record<string, "medium" | "low" | "high"> | undefined;
+            };
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ButtonSize[];
+                mapping: Record<string, ButtonSize> | undefined;
+            };
+            rightIcon: {
+                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;
+                };
+            };
+            leftIcon: {
+                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;
+                };
+            };
+            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;
+            };
+            ref: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            onClick: {
+                action: boolean;
+                table: {
+                    disable: boolean;
+                };
+            };
+            linkAs: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            className: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            target: {
+                if: {
+                    arg: string;
+                    exists: boolean;
+                };
+                control: {
+                    type: string;
+                };
+            };
+            type: {
+                if: {
+                    arg: string;
+                    exists: boolean;
+                };
+                control: {
+                    type: string;
+                };
+            };
+        };
+        args: {
+            children: string;
+            leftIcon?: string | undefined;
+            rightIcon?: string | undefined;
+            fullWidth?: boolean | undefined;
+            color?: import("@lumx/core/js/constants").ColorPalette | undefined;
+            emphasis?: Emphasis | undefined;
+            hasBackground?: boolean | undefined;
+            href?: string | undefined;
+            isDisabled?: boolean | undefined;
+            isSelected?: boolean | undefined;
+            name?: string | undefined;
+            size?: ButtonSize | undefined;
+            target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+            type?: "submit" | "reset" | "button" | undefined | undefined;
+            linkAs?: "a" | any;
+            isActive?: boolean | undefined;
+            isFocused?: boolean | undefined;
+            isHovered?: boolean | undefined;
+            'aria-expanded'?: boolean | "true" | "false" | undefined;
+            'aria-haspopup'?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+            'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined;
+            'aria-label'?: string | undefined;
+            className?: string | undefined;
+            theme?: Theme | undefined;
+            'aria-disabled'?: import("../../types/Booleanish").Booleanish | undefined;
+            handleClick?: ((event?: any) => void) | undefined;
+            handleKeyPress?: ((event?: any) => void) | undefined;
+            ref?: import("../../types").CommonRef;
+            disabled?: boolean | undefined;
+        };
+    };
+    /** Default button */
+    Base: {
+        args: {
+            children: string;
+        };
+    };
+    /** All combinations of size and emphasis */
+    SizeAndEmphasis: {
+        args: {
+            children: string;
+        };
+        argTypes: {
+            [k: string]: {
+                table: {
+                    disable: boolean;
+                };
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Setting a href to transform the button into a link. */
+    LinkButton: {
+        args: {
+            href: string;
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Check button style variations (color, states, emphasis, etc.) */
+    StateVariations: {
+        args: {
+            children: string;
+            rightIcon: string;
+        };
+        argTypes: {
+            [k: string]: {
+                table: {
+                    disable: boolean;
+                };
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,15 @@
+import { SetupOptions } from '../../../testing';
+import { ButtonProps } from './Button';
+type SetupProps = Partial<ButtonProps>;
+/**
+ * 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<ButtonProps>) => {
+    props: any;
+    button: HTMLElement;
+    buttonWrapper: HTMLElement | null;
+    icons: HTMLElement[];
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<ButtonProps>) => void;
+export default _default;

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

@@ -0,0 +1,88 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Checkbox 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;
+            handleChange?: ((isChecked: boolean, 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 checkbox */
+    Default: {};
+    /** With label and helper */
+    LabelAndHelper: {
+        argTypes: {
+            label: {
+                control: string;
+            };
+            helper: {
+                control: string;
+            };
+        };
+        args: {
+            label: string;
+            helper: string;
+        };
+    };
+    /** With intermediate state */
+    IntermediateState: {
+        argTypes: {
+            isChecked: {
+                control: boolean;
+            };
+        };
+        args: {
+            isChecked: 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/Checkbox/Tests.d.ts

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

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

@@ -0,0 +1,49 @@
+import type { JSXElement, LumxClassName, HasTheme, HasAriaDisabled, HasDisabled, HasClassName, HasChecked, CommonRef } from '../../types';
+/**
+ * Intermediate state of checkbox.
+ */
+export declare const INTERMEDIATE_STATE = "intermediate";
+/**
+ * Defines the props of the component.
+ */
+export interface CheckboxProps extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked<boolean | 'intermediate'> {
+    /** Helper text. */
+    helper?: string;
+    /** Native input id property. */
+    id?: string;
+    /** Label text. */
+    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. */
+    handleChange?(isChecked: boolean, value?: string, name?: string, event?: any): void;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Checkbox";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<CheckboxProps>;
+/**
+ * Checkbox component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Checkbox: (props: CheckboxProps) => import("react").JSX.Element;

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

@@ -0,0 +1,21 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Divider 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<{
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        args: {
+            ref?: import("../../types").CommonRef;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+        };
+    };
+    /** Default divider */
+    Default: {};
+};

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

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

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

@@ -0,0 +1,27 @@
+import type { LumxClassName, HasTheme, HasClassName, CommonRef } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface DividerProps extends HasTheme, HasClassName {
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Divider";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<DividerProps>;
+/**
+ * Divider component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Divider: (props: DividerProps) => import("react").JSX.Element;

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

@@ -0,0 +1,120 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Flag 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, withResizableBox }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations' | 'withResizableBox';
+}>): {
+    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;
+            };
+            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: {
+            label: string;
+        };
+    };
+    /** Default flag with label */
+    Default: {};
+    /** With icon */
+    WithIcon: {
+        args: {
+            icon: string;
+        };
+    };
+    /** All `color` variants */
+    AllColors: {
+        args: {
+            icon: string;
+        };
+        argTypes: {
+            color: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Truncate text option */
+    Truncate: {
+        args: {
+            label: string;
+            truncate: boolean;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

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