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

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

@@ -1,70 +0,0 @@
-import type { HasClassName, LumxClassName, HasCloseMode, HasTheme, CommonRef, GenericProps, JSXElement } from '../../types';
-/**
- * Defines the props of the component.
- */
-export interface ExpansionPanelProps extends HasClassName, HasCloseMode, HasTheme {
-    /** Whether the expansion panel has a background. */
-    hasBackground?: boolean;
-    /** Whether the header has a divider. */
-    hasHeaderDivider?: boolean;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
-    /** Label text (overwritten if a `<header>` is provided in the children). */
-    label?: string;
-    /** On open callback. */
-    handleOpen?: (event: any) => void;
-    /** On close callback. */
-    handleClose?: (event: any) => void;
-    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
-    toggleButtonProps: any;
-    /** On toggle open or close callback. */
-    handleToggleOpen?(shouldOpen: boolean, event: any): void;
-    /** Children */
-    children?: JSXElement;
-    /** Ref forwarded to the root `<section>` element. */
-    ref?: CommonRef;
-    /** Ref forwarded to the collapsible wrapper `<div>`. */
-    wrapperRef?: CommonRef;
-    /** Props spread onto the header content `<div>` (e.g. `aria-*`, `data-*`). */
-    headerProps: GenericProps;
-    /** Content rendered inside the header content area. */
-    headerContent?: JSXElement;
-    /** Optional drag handle element rendered at the start of the header. */
-    dragHandle?: JSXElement;
-    /** Content rendered inside the collapsible content area. */
-    content?: JSXElement;
-    /** Optional footer element rendered below the content. */
-    footer?: JSXElement;
-    /** IconButton component injected by the framework wrapper (React or Vue). */
-    IconButton: any;
-    /** Whether the children should remain mounted (visible in the DOM) while the panel is closed. */
-    isChildrenVisible?: boolean;
-}
-export type ExpansionPanelPropsToOverride = 'handleOpen' | 'handleClose' | 'toggleButtonProps' | 'handleToggleOpen' | 'wrapperRef' | 'headerProps' | 'headerContent' | 'dragHandle' | 'content' | 'IconButton' | 'isChildrenVisible' | 'footer';
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "ExpansionPanel";
-/**
- * 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: Partial<ExpansionPanelProps>;
-/**
- * ExpansionPanel component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export declare const ExpansionPanel: (props: ExpansionPanelProps) => import("react").JSX.Element;

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

@@ -1,120 +0,0 @@
-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: Flag, 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

@@ -1,14 +0,0 @@
-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;

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

@@ -1,34 +0,0 @@
-import { ColorPalette } from '../../constants';
-import type { LumxClassName, HasTheme, JSXElement, HasClassName, CommonRef } from '../../types';
-import { TextProps } from '../Text';
-export interface FlagProps extends HasClassName, HasTheme {
-    /** Color of the component. */
-    color?: ColorPalette;
-    /** Icon to use before the label. */
-    icon?: string;
-    /** Text label of the flag. */
-    children: JSXElement;
-    /** Enable text truncate on overflow */
-    truncate?: boolean;
-    /** ref to the root element */
-    ref?: CommonRef;
-    /** Text component to use for rendering the label */
-    Text: (props: TextProps) => any;
-}
-export declare const COMPONENT_NAME = "Flag";
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-export declare const DEFAULT_PROPS: Partial<FlagProps>;
-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;
-};
-/**
- * Flag component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const Flag: (props: FlagProps) => import("react").JSX.Element;

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

@@ -1,116 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup FlexBox stories for a specific framework (React or Vue).
- * Framework-specific components (Button, Text, IconButton) are injected via `components`.
- */
-export declare function setup({ component: FlexBox, components: { Button, Text, IconButton }, decorators: { withWrapper, withCombinations }, argsConverter, }: SetupStoriesOptions<{
-    decorators: 'withCombinations' | 'withWrapper';
-    components: {
-        Button: any;
-        Text: any;
-        IconButton: any;
-    };
-    argsConverter: (args: any) => any;
-}>): {
-    meta: {
-        component: any;
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            style: {
-                width: string;
-                height: string;
-            };
-        };
-        argTypes: {
-            orientation: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("vertical" | "horizontal")[];
-                mapping: Record<string, "vertical" | "horizontal"> | undefined;
-            };
-            fillSpace: {
-                control: string;
-            };
-            wrap: {
-                control: string;
-            };
-            noShrink: {
-                control: string;
-            };
-            hAlign: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("center" | "top" | "bottom" | "space-around" | "space-between" | "space-evenly")[];
-                mapping: Record<string, "center" | "top" | "bottom" | "space-around" | "space-between" | "space-evenly"> | undefined;
-            };
-            vAlign: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("center" | "right" | "left" | "space-around" | "space-between" | "space-evenly")[];
-                mapping: Record<string, "center" | "right" | "left" | "space-around" | "space-between" | "space-evenly"> | undefined;
-            };
-            gap: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("medium" | "big" | "tiny" | "regular" | "huge")[];
-                mapping: Record<string, "medium" | "big" | "tiny" | "regular" | "huge"> | undefined;
-            };
-        };
-    };
-    NoConfig: {
-        decorators: ((story: any, context: any) => any)[];
-    };
-    Horizontal: {
-        args: {
-            orientation: "horizontal";
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    Vertical: {
-        args: {
-            orientation: "vertical";
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    GapSizes: {
-        args: {
-            orientation: "horizontal";
-        };
-        argTypes: {
-            gap: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    Wrap: {
-        args: {
-            orientation: "horizontal";
-            wrap: boolean;
-        };
-        argTypes: {
-            wrap: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    NoShrink: {
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            noShrink: boolean;
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    MarginAuto: {
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            style: undefined;
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

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

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

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

@@ -1,4 +0,0 @@
-export declare const GAP_SIZES: ("medium" | "big" | "tiny" | "regular" | "huge")[];
-export declare const SPACE_ALIGNMENTS: ("space-around" | "space-between" | "space-evenly")[];
-export declare const VERTICAL_ALIGNMENTS: ("center" | "top" | "bottom" | "space-around" | "space-between" | "space-evenly")[];
-export declare const HORIZONTAL_ALIGNMENTS: ("center" | "right" | "left" | "space-around" | "space-between" | "space-evenly")[];

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

@@ -1,54 +0,0 @@
-import { Orientation } from '../../constants';
-import type { LumxClassName, JSXElement, HasClassName, CommonRef } from '../../types';
-import type { FlexHorizontalAlignment, FlexVerticalAlignment, GapSize, MarginAutoAlignment } from './types';
-export type * from './types';
-/**
- * Defines the props of the component.
- */
-export interface FlexBoxProps extends HasClassName {
-    /** Children elements. */
-    children?: JSXElement;
-    /** Whether the "content filling space" is enabled or not. */
-    fillSpace?: boolean;
-    /** Gap space between flexbox items. */
-    gap?: GapSize;
-    /** Flex horizontal alignment. */
-    hAlign?: FlexVerticalAlignment;
-    /** Whether the "auto margin" is enabled all around or not. */
-    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];
-    /** Whether the "content shrink" is disabled or not. */
-    noShrink?: boolean;
-    /** Flex direction. */
-    orientation?: Orientation;
-    /** Flex vertical alignment. */
-    vAlign?: FlexHorizontalAlignment;
-    /** Whether the "flex wrap" is enabled or not. */
-    wrap?: boolean;
-    /** reference to the root element */
-    ref?: CommonRef;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "FlexBox";
-/**
- * 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;
-};
-/**
- * Get FlexBox component props (className computation).
- *
- * @param  props Component props.
- * @return Computed props with className.
- */
-export declare function getFlexBoxProps(props: FlexBoxProps): {
-    className: string;
-    /** Children elements. */
-    children?: JSXElement;
-    /** reference to the root element */
-    ref?: CommonRef;
-};

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

@@ -1,7 +0,0 @@
-import { Alignment, HorizontalAlignment, Size, VerticalAlignment } from '../../constants';
-export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
-export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
-type SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;
-export type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
-export type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
-export {};

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

@@ -1,74 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-export declare function setup({ component: GenericBlock, components: { Icon, Button, Thumbnail }, }: SetupStoriesOptions<{
-    components: {
-        Icon: any;
-        Button: any;
-        Thumbnail: any;
-    };
-}>): {
-    meta: {
-        component: any;
-    };
-    SectionsInProps: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-    SectionsInChildren: {
-        render: (args: any) => import("react").JSX.Element;
-    };
-    Vertical: {
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            orientation: string;
-        };
-    };
-    VerticalAlignCenter: {
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            orientation: string;
-            vAlign: string;
-        };
-    };
-    VerticalOverflow: {
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            orientation: string;
-            style: {
-                width: number;
-            };
-            content: import("react").JSX.Element;
-        };
-    };
-    Horizontal: {
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            orientation: string;
-        };
-    };
-    HorizontalAlignRightBottom: {
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            orientation: string;
-            vAlign: string;
-            hAlign: string;
-        };
-    };
-    HorizontalOverflow: {
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            orientation: string;
-            style: {
-                width: number;
-            };
-            content: import("react").JSX.Element;
-        };
-    };
-    GapSizes: {
-        render: (args: any) => import("react").JSX.Element[];
-    };
-    AsAFigure: {
-        render: () => import("react").JSX.Element;
-    };
-    AsAnArticle: {
-        render: () => import("react").JSX.Element;
-    };
-};

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

@@ -1,13 +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;
-    genericBlock: HTMLElement;
-    figure: HTMLElement | null;
-    content: HTMLElement | null;
-    actions: HTMLElement | null;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

@@ -1,19 +0,0 @@
-import { ValueOf } from '../../types';
-/**
- * Accepted gap sizes for the generic block.
- */
-export declare const GenericBlockGapSize: Pick<{
-    readonly xxs: "xxs";
-    readonly xs: "xs";
-    readonly s: "s";
-    readonly m: "m";
-    readonly l: "l";
-    readonly xl: "xl";
-    readonly xxl: "xxl";
-    readonly tiny: "tiny";
-    readonly regular: "regular";
-    readonly medium: "medium";
-    readonly big: "big";
-    readonly huge: "huge";
-}, "medium" | "big" | "tiny" | "regular" | "huge">;
-export type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;

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

@@ -1,85 +0,0 @@
-import type { CommonRef, JSXElement, LumxClassName } from '../../types';
-import { GenericBlockGapSize } from './constants';
-import { FlexBoxProps } from '../FlexBox';
-export interface GenericBlockProps extends FlexBoxProps {
-    /**
-     * Component to use as visual element.
-     */
-    figure?: JSXElement;
-    /**
-     * Main content.
-     */
-    content?: JSXElement;
-    /**
-     * Actions to set after the main content.
-     */
-    actions?: JSXElement;
-    /**
-     * Orientation of the 3 sections
-     */
-    orientation?: FlexBoxProps['orientation'];
-    /**
-     * Horizontal alignment.
-     */
-    horizontalAlign?: FlexBoxProps['hAlign'];
-    /**
-     * Vertical alignment.
-     */
-    verticalAlign?: FlexBoxProps['vAlign'];
-    /**
-     * The props to forward to the content.
-     * By default, the content will have the same alignment as wrapper.
-     */
-    contentProps?: Omit<FlexBoxProps, 'children'>;
-    /**
-     * props to forward to the actions element.
-     */
-    actionsProps?: Omit<FlexBoxProps, 'children'>;
-    /**
-     * props to forward to the figure element.
-     */
-    figureProps?: Omit<FlexBoxProps, 'children'>;
-    /**
-     * FlexBox component
-     */
-    FlexBox: (props: FlexBoxProps) => any;
-    /**
-     * Gap space between sections.
-     */
-    gap?: GenericBlockGapSize;
-    /**
-     * reference to the root element
-     */
-    ref?: CommonRef;
-}
-export interface GenericBlockSectionProps extends FlexBoxProps {
-    /**
-     * Gap space between items.
-     */
-    gap?: GenericBlockGapSize;
-}
-export type GenericBlockPropsToOverride = 'FlexBox' | 'content';
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "GenericBlock";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<GenericBlockProps>;
-/**
- * The GenericBlock is a layout component made of 3 sections that can be
- * displayed either horizontally of vertically with the same gap between each section.
- *
- * The sections are:
- * - `Figure` => A visual element to display before the main content.
- * - `Content` => The main content displayed
- * - `Actions` => One or more actions to set after the element.
- *
- * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
- */
-export declare const GenericBlock: (props: GenericBlockProps) => import("react").JSX.Element;