@lumx/core 4.14.0-next.0 → 4.14.0-next.2

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

@@ -0,0 +1,97 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Core stories for the Dialog component.
+ *
+ * Dialog is interactive (open/close state, focus trap, etc.) and requires
+ * framework-specific rendering for refs and state management.
+ * A `render` function is provided per framework to handle this.
+ */
+export declare function setup({ component: Dialog, render, decorators: { withChromaticForceScreenSize }, }: SetupStoriesOptions<{
+    decorators: 'withChromaticForceScreenSize';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        parameters: {
+            chromatic: {
+                pauseAnimationAtEnd: boolean;
+                delay: number;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+        args: Partial<import(".").DialogProps>;
+        argTypes: {
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("big" | "tiny" | "regular" | "huge")[];
+                mapping: Record<string, "big" | "tiny" | "regular" | "huge"> | undefined;
+            };
+            onVisibilityChange: {
+                action: boolean;
+            };
+            children: {
+                control: boolean;
+            };
+            closeMode: {
+                control: {
+                    type: "inline-radio";
+                };
+                options: string[];
+            };
+        };
+    };
+    Default: {
+        args: {
+            children: string;
+        };
+    };
+    Loading: {
+        args: {
+            isLoading: boolean;
+            children: string;
+        };
+    };
+    WithHeaderFooter: {
+        args: {
+            header: string;
+            footer: string;
+            children: string;
+        };
+    };
+    ForceDivider: {
+        args: {
+            forceFooterDivider: boolean;
+            forceHeaderDivider: boolean;
+            header: string;
+            footer: string;
+            children: string;
+        };
+    };
+    LongContent: {
+        args: {
+            children: string;
+            header: string;
+            footer: string;
+        };
+    };
+    PreventAutoClose: {
+        args: {
+            preventAutoClose: boolean;
+            children: string;
+        };
+    };
+    PreventCloseOnEscape: {
+        args: {
+            preventCloseOnEscape: boolean;
+            children: string;
+        };
+    };
+    PreventCloseOnClick: {
+        args: {
+            preventCloseOnClick: boolean;
+            children: string;
+        };
+    };
+};

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

@@ -0,0 +1,99 @@
+import type { CommonRef, HasClassName, JSXElement, LumxClassName, GenericProps } from '../../types';
+import { Size } from '../../constants';
+export interface BaseDialogProps {
+    /** Footer content. */
+    footer?: JSXElement;
+    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
+    forceFooterDivider?: boolean;
+    /** Header content. */
+    header?: JSXElement;
+    /** Whether the divider between the dialog content and the header is always displayed (instead of showing it on scroll). */
+    forceHeaderDivider?: boolean;
+    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */
+    isLoading?: boolean;
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+}
+/**
+ * Defines the props of the component.
+ */
+export interface DialogProps extends HasClassName, BaseDialogProps {
+    /** Reference to the root element. */
+    ref?: CommonRef;
+    /** Whether the component is still visible (e.g. during close animation). */
+    isVisible?: boolean;
+    /** Reference to the dialog content element. */
+    contentRef?: CommonRef;
+    /** Size variant. */
+    size?: DialogSizes;
+    /** Z-axis position. */
+    zIndex?: number;
+    /** Additional props for the dialog container element. */
+    dialogProps?: GenericProps;
+    /** On close callback. */
+    handleClose?(): void;
+    /** Whether to prevent closing on click away. */
+    shouldPreventCloseOnClickAway?: boolean;
+    /** Refs used for click-away detection. */
+    clickAwayRefs?: any;
+    /** Ref for the root wrapper element. */
+    rootRef?: CommonRef;
+    /** Ref for the inner section element. */
+    wrapperRef?: CommonRef;
+    /** Whether the header sentinel is out of view (controls header divider). */
+    hasTopIntersection: boolean | null;
+    /** Whether the footer sentinel is out of view (controls footer divider). */
+    hasBottomIntersection: boolean | null;
+    /** Props forwarded from a child <header> element. */
+    headerChildProps?: GenericProps;
+    /** Content extracted from a child <header> element. */
+    headerChildContent?: JSXElement;
+    /** Props forwarded from a child <footer> element. */
+    footerChildProps?: GenericProps;
+    /** Content extracted from a child <footer> element. */
+    footerChildContent?: JSXElement;
+    /** Dialog body content. */
+    content?: JSXElement;
+    /** Ref setter for the top scroll sentinel element. */
+    setSentinelTop?: any;
+    /** Ref setter for the bottom scroll sentinel element. */
+    setSentinelBottom?: any;
+    /** Portal component for rendering outside the DOM hierarchy. */
+    Portal: any;
+    /** HeadingLevelProvider component. */
+    HeadingLevelProvider: any;
+    /** ThemeProvider component. */
+    ThemeProvider: any;
+    /** ClickAwayProvider component. */
+    ClickAwayProvider: any;
+    /** ProgressCircular component */
+    ProgressCircular: any;
+}
+export type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Dialog";
+/**
+ * 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<DialogProps>;
+/**
+ * Dialog component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Dialog: (props: DialogProps) => 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: Divider, }: SetupStoriesOptions<{
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        args: {
+            ref?: import("../../types").CommonRef;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+        };
+    };
+    /** Default divider */
+    Default: {};
+};

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

@@ -0,0 +1,18 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component: DragHandle, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        args: {
+            ref?: import("../../types").CommonRef;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+        };
+    };
+    Default: {};
+    AllThemes: {
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,67 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup ExpansionPanel stories for a specific framework (React or Vue).
+ * Framework-specific components (Text, StatefulExpansionPanel, etc.) are injected via `components`.
+ * StatefulExpansionPanel is a framework-specific wrapper that manages isOpen state per instance,
+ * enabling each panel to toggle independently.
+ */
+export declare function setup({ component: ExpansionPanel, components: { Text, StatefulExpansionPanel }, decorators: { withNestedProps }, }: SetupStoriesOptions<{
+    decorators: 'withNestedProps';
+    components: {
+        Text: any;
+        StatefulExpansionPanel: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        args: {
+            'toggleButtonProps.label': string;
+            label: string;
+            hasBackground?: boolean | undefined;
+            hasHeaderDivider?: boolean | undefined;
+            isOpen?: boolean | undefined;
+            handleOpen?: ((event: any) => void) | undefined;
+            handleClose?: ((event: any) => void) | undefined;
+            toggleButtonProps?: any;
+            handleToggleOpen?: ((shouldOpen: boolean, event: any) => void) | undefined;
+            children?: import("react").ReactNode;
+            ref?: import("../../types").CommonRef;
+            wrapperRef?: import("../../types").CommonRef;
+            headerProps?: import("../../types").GenericProps | undefined;
+            headerContent?: import("react").ReactNode;
+            dragHandle?: import("react").ReactNode;
+            content?: import("react").ReactNode;
+            footer?: import("react").ReactNode;
+            IconButton?: any;
+            isChildrenVisible?: boolean | undefined;
+            className?: string | undefined;
+            closeMode?: "hide" | "unmount" | undefined;
+            theme?: import("../../constants").Theme | undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Default: {};
+    HasBackground: {
+        args: {
+            hasBackground: boolean;
+        };
+    };
+    HasHeaderDivider: {
+        args: {
+            isOpen: boolean;
+            hasBackground: boolean;
+            hasHeaderDivider: boolean;
+        };
+    };
+    Nested: {
+        args: {};
+        render: ({ children, isOpen, ...args }: any) => import("react").JSX.Element;
+    };
+    HideChildren: {
+        args: {
+            hasBackground: boolean;
+            closeMode: string;
+        };
+    };
+};

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: 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/FlexBox/Stories.d.ts

@@ -0,0 +1,116 @@
+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/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const GAP_SIZES: ("big" | "tiny" | "regular" | "medium" | "huge")[];
+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" | "bottom" | "space-around" | "space-between" | "space-evenly" | "top")[];
-export declare const HORIZONTAL_ALIGNMENTS: ("center" | "left" | "right" | "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/GenericBlock/Stories.d.ts

@@ -0,0 +1,74 @@
+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/constants.d.ts

@@ -15,5 +15,5 @@ export declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "big" | "tiny" | "regular" | "medium" | "huge">;
+}, "medium" | "big" | "tiny" | "regular" | "huge">;
 export type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;