@lumx/core 4.13.0 → 4.14.0-alpha.1

package/js/components/List/ListItemStories.d.ts

@@ -0,0 +1,53 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { type ListItemSize } from './ListItem';
+/**
+ * Setup ListItem stories for a specific framework (React or Vue).
+ * Framework-specific components are injected via `components`.
+ */
+export declare function setup({ component, render: ListItem, components: { List, ListItemAction, Button, IconButton, Text, FlexBox, Thumbnail }, decorators: { withWrapper, withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withWrapper' | 'withCombinations';
+    components: {
+        List: any;
+        ListItemAction: any;
+        Button: any;
+        IconButton: any;
+        Text: any;
+        FlexBox: any;
+        Thumbnail: any;
+    };
+}>): {
+    meta: {
+        args: Partial<import("./ListItem").ListItemProps>;
+        argTypes: {
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ListItemSize[];
+                mapping: Record<string, ListItemSize> | undefined;
+            };
+        };
+        render?: any;
+        component: any;
+    };
+    Default: {
+        args: {
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    AllStates: {
+        args: {
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    ActionArea: {
+        argTypes: {
+            onClick: {
+                action: boolean;
+            };
+        };
+        render({ onClick, size }: any): import("react").JSX.Element;
+    };
+};

package/js/components/List/ListSection.d.ts

@@ -0,0 +1,45 @@
+import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
+import { TextProps } from '../Text';
+/**
+ * Defines the props of the component.
+ */
+export interface ListSectionProps extends HasClassName {
+    /** Section label displayed as the group title. Accepts a plain string or custom JSX content. */
+    label?: string | JSXElement;
+    /** Section icon */
+    icon?: string;
+    /** List items (should be ListItem, ListDivider, etc.). */
+    children: JSXElement;
+    /** Items wrapper forwarded props */
+    itemsWrapperProps?: Record<string, any>;
+    /** ID for the label element (used for aria-labelledby). */
+    id: string;
+    /** ref to the root element */
+    ref?: CommonRef;
+    /** Text component to use for rendering the label */
+    Text: (props: TextProps & Record<string, any>) => any;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "ListSection";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ListSectionProps>;
+/**
+ * ListSection component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const ListSection: {
+    (props: ListSectionProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-list-section";
+    defaultProps: Partial<ListSectionProps>;
+};

package/js/components/List/ListSectionStories.d.ts

@@ -0,0 +1,125 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup ListSection stories for a specific framework (React or Vue).
+ * Framework-specific components are injected via `components`.
+ */
+export declare function setup({ component: ListSection, components: { List, ListItem, ListDivider, FlexBox }, decorators: { withWrapper }, }: SetupStoriesOptions<{
+    decorators: 'withWrapper';
+    components: {
+        List: any;
+        ListItem: any;
+        ListDivider: any;
+        FlexBox: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        argTypes: {
+            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;
+                };
+            };
+            'list.itemPadding': {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("big" | "huge" | undefined)[];
+                mapping: Record<string, "big" | "huge" | undefined> | undefined;
+            };
+            'listItem.size': {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("big" | "tiny" | "regular" | undefined)[];
+                mapping: Record<string, "big" | "tiny" | "regular" | undefined> | undefined;
+            };
+        };
+    };
+    Default: {
+        args: {
+            label: string;
+        };
+        render({ "list.itemPadding": itemPadding, "listItem.size": itemSize, ...args }: any): import("react").JSX.Element;
+    };
+    AutoDividerEdgeCases: {
+        render({ "list.itemPadding": itemPadding, "listItem.size": itemSize }: any): import("react").JSX.Element;
+    };
+    LabelVariants: {
+        render({ "list.itemPadding": itemPadding, "listItem.size": itemSize }: any): import("react").JSX.Element;
+        decorators: ((story: any, context: any) => any)[];
+    };
+    ClickableItems: {
+        argTypes: {
+            onClick: {
+                action: boolean;
+            };
+        };
+        args: {
+            'list.itemPadding': "big";
+            'listItem.size': "tiny";
+        };
+        render({ onClick, "list.itemPadding": itemPadding, "listItem.size": itemSize }: any): import("react").JSX.Element;
+    };
+};

package/js/components/List/ListStories.d.ts

@@ -0,0 +1,34 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup List stories for a specific framework (React or Vue).
+ * Framework-specific components are injected via `components`.
+ */
+export declare function setup({ component: List, components: { ListItem }, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+    components: {
+        ListItem: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            itemPadding: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("big" | "huge" | undefined)[];
+                mapping: Record<string, "big" | "huge" | undefined> | undefined;
+            };
+        };
+    };
+    Default: {};
+    ItemPadding: {
+        argTypes: {
+            itemPadding: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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 components are injected via `components`.
+ */
+export declare function setup({ component: Message, decorators: { withCombinations }, overrides, }: SetupStoriesOptions<{
+    overrides: 'ClosableMessage';
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        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/Mosaic/Stories.d.ts

@@ -0,0 +1,102 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Mosaic stories for a specific framework (React or Vue).
+ * Framework-specific decorators are injected via `decorators`.
+ * Per-story overrides (e.g. framework-specific argTypes) are injected via `overrides`.
+ */
+export declare function setup({ component: Mosaic, decorators: { withWrapper }, overrides, }: SetupStoriesOptions<{
+    decorators: 'withWrapper';
+    overrides: 'OneThumbnailClickable' | 'TwoThumbnailClickable' | 'ThreeThumbnailClickable' | 'FourThumbnailClickable' | 'FiveThumbnailClickable' | 'SixThumbnailClickable';
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        args: Partial<import(".").MosaicProps>;
+        argTypes: {};
+        decorators: ((story: any, context: any) => any)[];
+    };
+    OneThumbnail: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+    OneThumbnailClickable: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+    TwoThumbnail: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+    TwoThumbnailClickable: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+    ThreeThumbnail: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+    ThreeThumbnailClickable: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+    FourThumbnail: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+    FourThumbnailClickable: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+    FiveThumbnail: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+    FiveThumbnailClickable: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+    SixThumbnail: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+    SixThumbnailClickable: {
+        args: {
+            thumbnails: {
+                image: string;
+            }[];
+        };
+    };
+};

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

@@ -0,0 +1,40 @@
+import type { CommonRef, HasClassName, LumxClassName, HasTheme } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface MosaicProps extends HasClassName, HasTheme {
+    /** Thumbnails. */
+    thumbnails: any[];
+    /** On image click callback. */
+    handleClick?(index: number): void;
+    Thumbnail: any;
+    ref?: CommonRef;
+}
+export type MosaicPropsToOverride = 'Thumbnail' | 'thumbnails';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Mosaic";
+/**
+ * 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<MosaicProps>;
+/**
+ * Mosaic component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Mosaic: (props: MosaicProps) => import("react").JSX.Element;

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

@@ -0,0 +1,139 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { Placement, type Elevation, FitAnchorWidth } from './constants';
+/**
+ * Core stories for the Popover component.
+ *
+ * A default `render` function is provided per framework to handle anchor ref creation
+ * and framework-specific JSX. Story variations are expressed as `args` and shared here.
+ *
+ * The render function receives all args, including story display args:
+ * - `anchorText`: Label for the anchor button (default: 'Anchor')
+ * - `anchorClassName`: CSS class for the anchor button (default: 'lumx-spacing-margin-big')
+ * - `popoverClassName`: Extra CSS class for the popover (default: undefined)
+ * - `textColor`: Text color prop for popover content (default: undefined)
+ * - `fitAnchorWidth`: When set, popover content renders as plain text instead of wrapped in Text
+ */
+export declare function setup({ component: Popover, render, decorators: { withCombinations, withChromaticForceScreenSize }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations' | 'withChromaticForceScreenSize';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        args: {
+            isOpen: boolean;
+            anchorText: string;
+            anchorClassName: string;
+            anchorRef?: import("../../types").CommonRef;
+            as?: string | undefined;
+            boundaryRef?: import("../../types").CommonRef;
+            closeOnClickAway?: boolean | undefined;
+            closeOnEscape?: boolean | undefined;
+            elevation?: Elevation | undefined;
+            fitToAnchorWidth?: (FitAnchorWidth | boolean) | undefined;
+            fitWithinViewportHeight?: boolean | undefined;
+            focusElement?: import("../../types").CommonRef;
+            focusAnchorOnClose?: boolean | undefined;
+            hasArrow?: boolean | undefined;
+            offset?: import("./constants").Offset | undefined;
+            parentElement?: import("../../types").CommonRef;
+            placement?: Placement | undefined;
+            usePortal?: boolean | undefined;
+            focusTrapZoneElement?: import("../../types").CommonRef;
+            zIndex?: number | undefined;
+            withFocusTrap?: boolean | undefined;
+            handleClose?: (() => void) | undefined;
+            className?: string | undefined;
+            theme?: import("../../constants").Theme | undefined;
+            closeMode?: "hide" | "unmount" | undefined;
+        };
+        argTypes: {
+            closeMode: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: string[];
+                mapping: Record<string, string> | undefined;
+            };
+            isOpen: {
+                control: string;
+            };
+            hasArrow: {
+                control: string;
+            };
+            placement: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("top" | "right" | "bottom" | "left" | "auto" | "bottom-end" | "auto-end" | "auto-start" | "top-end" | "top-start" | "right-end" | "right-start" | "bottom-start" | "left-end" | "left-start")[];
+                mapping: Record<string, "top" | "right" | "bottom" | "left" | "auto" | "bottom-end" | "auto-end" | "auto-start" | "top-end" | "top-start" | "right-end" | "right-start" | "bottom-start" | "left-end" | "left-start"> | undefined;
+            };
+            elevation: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: Elevation[];
+                mapping: Record<string, Elevation> | undefined;
+            };
+            ref: {
+                control: boolean;
+            };
+            parentElement: {
+                control: boolean;
+            };
+            focusElement: {
+                control: boolean;
+            };
+            anchorRef: {
+                control: boolean;
+            };
+            boundaryRef: {
+                control: boolean;
+            };
+            children: {
+                control: boolean;
+            };
+            anchorText: {
+                control: boolean;
+            };
+            anchorClassName: {
+                control: boolean;
+            };
+            popoverClassName: {
+                control: boolean;
+            };
+            textColor: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Simple: {};
+    DarkTheme: {
+        args: {
+            theme: string;
+            hasArrow: boolean;
+            textColor: string;
+        };
+    };
+    WithoutPortal: {
+        args: {
+            usePortal: boolean;
+        };
+    };
+    Placements: {
+        argTypes: {
+            placement: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    FitToAnchorWidth: {
+        args: {
+            anchorClassName: string;
+            popoverClassName: string;
+            placement: "bottom";
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};