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

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

@@ -0,0 +1,35 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup InputHelper 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: InputHelper, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    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;
+            };
+        };
+        args: any;
+    };
+    /** Default input helper */
+    Default: {};
+    /** All `kind` variants */
+    AllKinds: {
+        argTypes: {
+            kind: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,34 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup InputLabel stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific render functions or args can be injected via `overrides`.
+ */
+export declare function setup({ component: InputLabel }: SetupStoriesOptions): {
+    meta: {
+        component: any;
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        args: {
+            children: string;
+        };
+        argTypes: {
+            isRequired: {
+                control: string;
+            };
+        };
+    };
+    /** Default input label */
+    Default: {};
+    /** Required input label */
+    IsRequired: {
+        args: {
+            isRequired: boolean;
+        };
+    };
+    /** Default input label with custom typography */
+    WithCustomTypography: {
+        args: {
+            typography: "subtitle1";
+        };
+    };
+};

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

@@ -0,0 +1,40 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Core stories for the Lightbox component.
+ *
+ * Lightbox 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: Lightbox, render, components: { ImageBlock }, }: SetupStoriesOptions<{
+    components: {
+        ImageBlock: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        play: ({ canvas }: any) => Promise<void>;
+        argTypes: {
+            children: {
+                control: boolean;
+            };
+        };
+    };
+    Image: {
+        render: ({ children, ...args }: any) => any;
+        args: {
+            'aria-label': string;
+        };
+    };
+    WithCloseButton: {
+        render: ({ children, ...args }: any) => any;
+        args: {
+            closeButtonProps: {
+                label: string;
+            };
+            'aria-label': string;
+        };
+    };
+    play: ({ canvas }: any) => Promise<void>;
+};

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

@@ -0,0 +1,68 @@
+import type { AriaAttributes, CommonRef, HasClassName, LumxClassName, HasTheme, JSXElement } from '../../types';
+export interface BaseLightboxProps extends HasClassName, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+    /** Whether to keep the dialog open on clickaway or escape press. */
+    preventAutoClose?: boolean;
+    /** Z-axis position. */
+    zIndex?: number;
+}
+/**
+ * Defines the props of the component.
+ */
+export interface LightboxProps extends BaseLightboxProps {
+    /**
+     * @deprecated Use `aria-label` instead.
+     */
+    ariaLabel?: string;
+    /**
+     * @deprecated Use `aria-labelledby` instead.
+     */
+    ariaLabelledBy?: string;
+    /** Props to pass to the close button (minus those already set by the Lightbox props). */
+    closeButtonProps?: any;
+    /** Whether the component is still visible (e.g. during the close transition). */
+    isVisible?: boolean;
+    /** Reference to the element that triggered modal opening to set focus on. */
+    parentElement?: CommonRef;
+    /** Reference to the element that should get the focus when the lightbox opens. By default, the close button or the lightbox itself will take focus. */
+    focusElement?: CommonRef;
+    /** On close callback. */
+    handleClose?(): void;
+    /** Children */
+    children?: JSXElement;
+    /** Reference to the lightbox root element. */
+    ref?: CommonRef;
+    /** Reference to the wrapper div containing the children. */
+    childrenRef?: CommonRef;
+    /** Refs used for click-away detection. */
+    clickAwayRefs?: any;
+    /** Reference to the close button element. */
+    closeButtonRef?: CommonRef;
+    /** Portal component for rendering the lightbox outside the DOM hierarchy. */
+    Portal: any;
+    /** HeadingLevelProvider component injected by the framework wrapper. */
+    HeadingLevelProvider: any;
+    /** ThemeProvider component injected by the framework wrapper. */
+    ThemeProvider: any;
+    /** ClickAwayProvider component injected by the framework wrapper. */
+    ClickAwayProvider: any;
+    /** IconButton component injected by the framework wrapper. */
+    IconButton: any;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Lightbox";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Lightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Lightbox: (props: LightboxProps) => import("react").JSX.Element | null;

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

@@ -0,0 +1,282 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { ColorVariant, Typography } from '@lumx/core/js/constants';
+/**
+ * Setup Link stories for a specific framework (React or Vue).
+ * Framework-specific components (Link, Text, Icon, etc.) are injected via `components`.
+ */
+export declare function setup({ component: Link, components: { Text, Icon, CustomLink, FlexBox }, decorators: { withCombinations, withThemedBackground, withWrapper }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations' | 'withThemedBackground' | 'withWrapper';
+    components: {
+        Text: any;
+        Icon: any;
+        CustomLink: any;
+        FlexBox: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        argTypes: {
+            onClick: {
+                action: boolean;
+            };
+            typography: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6")[];
+                mapping: Record<string, "caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6"> | undefined;
+            };
+            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;
+            };
+            colorVariant: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N")[];
+                mapping: Record<string, "D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N"> | 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;
+                };
+            };
+        };
+        args: {
+            children: string;
+            color?: import("@lumx/core/js/constants").ColorWithVariants | undefined;
+            colorVariant?: ColorVariant | undefined;
+            href?: string | undefined;
+            isDisabled?: boolean | undefined;
+            linkAs?: string | any;
+            handleClick?: ((event: any) => void) | undefined;
+            target?: string | undefined;
+            typography?: Typography | undefined;
+            ref?: import("../../types").CommonRef;
+            className?: string | undefined;
+            'aria-disabled'?: import("../../types/Booleanish").Booleanish | undefined;
+            disabled?: boolean | undefined;
+        };
+    };
+    Default: {
+        args: {
+            href: string;
+            target: string;
+        };
+    };
+    AsButton: {
+        args: {
+            children: string;
+        };
+    };
+    WithTypography: {
+        args: {
+            href: string;
+            typography: string;
+        };
+    };
+    WithColor: {
+        args: {
+            href: string;
+            color: "primary";
+            colorVariant: "D1";
+        };
+    };
+    Disabled: {
+        argTypes: {
+            isDisabled: {
+                control: boolean;
+            };
+            'aria-disabled': {
+                control: boolean;
+            };
+        };
+        args: {
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    LinkAs: {
+        args: {
+            linkAs: any;
+            children: string;
+        };
+    };
+    WithCustomizableTypography: {
+        args: {
+            typography: "custom-title1";
+            children: string;
+        };
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+    };
+    AllStates: {
+        argTypes: {
+            isDisabled: {
+                control: boolean;
+            };
+            onClick: {
+                action: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    AllTypography: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        argTypes: {
+            typography: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    AllColors: {
+        args: {
+            children: string;
+        };
+        argTypes: {
+            color: {
+                control: boolean;
+            };
+            colorVariant: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    ParentTypographyAndColor: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,47 @@
+import type { CommonRef, HasDisabled, JSXElement, LumxClassName } from '../../types';
+import { HasAriaDisabled, HasClassName } from '../../types';
+import { ColorVariant, ColorWithVariants, Typography } from '../../constants';
+/**
+ * Defines the props of the component.
+ */
+export interface LinkProps extends HasClassName, HasAriaDisabled, HasDisabled {
+    /** Children content */
+    children?: JSXElement;
+    /** Color variant. */
+    color?: ColorWithVariants;
+    /** Lightened or darkened variant of the selected icon color. */
+    colorVariant?: ColorVariant;
+    /** Link href. */
+    href?: string;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Custom element/component for the link. */
+    linkAs?: string | any;
+    /** Click handler (framework wrappers convert onClick to handleClick). */
+    handleClick?: (event: any) => void;
+    /** Link target. */
+    target?: string;
+    /** Typography variant. */
+    typography?: Typography;
+    /** Element ref. */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Link";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<LinkProps>;
+/**
+ * Link component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Link: (props: LinkProps) => import("react").JSX.Element;

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

@@ -0,0 +1,61 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup LinkPreview stories for a specific framework (React or Vue).
+ */
+export declare function setup({ component: LinkPreview, decorators: { withNestedProps, withWrapper }, }: SetupStoriesOptions<{
+    decorators: 'withNestedProps' | 'withWrapper';
+}>): {
+    meta: {
+        component: any;
+        decorators: ((story: any, context: any) => any)[];
+        args: {
+            title: string;
+            description: string;
+            link: string;
+            size: "regular";
+            titleHeading: "h2";
+        };
+        argTypes: {
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("big" | "regular")[];
+                mapping: Record<string, "big" | "regular"> | undefined;
+            };
+            titleHeading: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: import("../../types").HeadingElement[];
+                mapping: Record<string, import("../../types").HeadingElement> | undefined;
+                if: {
+                    arg: string;
+                };
+            };
+        };
+    };
+    Default: {};
+    TitleAndDescription: {
+        args: {
+            title: string;
+            description: string;
+        };
+    };
+    AllFields: {
+        args: {
+            'thumbnailProps.image': string;
+            title: string;
+            description: string;
+        };
+    };
+    Big: {
+        decorators: ((story: any, context: any) => any)[];
+        args: {
+            size: "big";
+            'thumbnailProps.image': string;
+            title: string;
+            description: string;
+        };
+    };
+};

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

@@ -0,0 +1,53 @@
+import { Size } from '../../constants';
+import type { CommonRef, HasClassName, LumxClassName, GenericProps, HasTheme } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface LinkPreviewProps extends HasClassName, HasTheme {
+    /** Description. */
+    description?: string;
+    /** Link URL. */
+    link: string;
+    /** Custom component for the link (can be used to inject a router Link). */
+    linkAs?: 'a' | any;
+    /** Props to pass to the link (minus those already set by the LinkPreview props). */
+    linkProps?: GenericProps;
+    /** Size variant. */
+    size?: Extract<Size, 'regular' | 'big'>;
+    /** Thumbnail for the link preview. */
+    thumbnailProps?: GenericProps;
+    /** Title. */
+    title?: string;
+    /** Ref forwarded to the root article element. */
+    ref?: CommonRef;
+    /** Heading element used to wrap the title. */
+    TitleHeading: any;
+    /** Link component injected by the framework wrapper. */
+    Link: any;
+    /** Thumbnail component injected by the framework wrapper. */
+    Thumbnail: any;
+}
+export type LinkPreviewPropsToOverride = 'linkProps' | 'TitleHeading' | 'Link' | 'Thumbnail' | 'thumbnailProps';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "LinkPreview";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: {
+    readonly size: "regular";
+    readonly titleHeading: "h2";
+};
+/**
+ * LinkPreview component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const LinkPreview: (props: LinkPreviewProps) => import("react").JSX.Element;

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

@@ -0,0 +1,33 @@
+import type { CommonRef, HasClassName, LumxClassName } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface ListDividerProps extends HasClassName {
+    /** ref to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "ListDivider";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ListDividerProps>;
+/**
+ * ListDivider component.
+ * Purely decorative, consider a `ListSection` with label for a better list structure.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const ListDivider: {
+    (props: ListDividerProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-list-divider";
+    defaultProps: Partial<ListDividerProps>;
+};

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

@@ -0,0 +1,17 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup ListDivider stories for a specific framework (React or Vue).
+ * Framework-specific components are injected via `components`.
+ */
+export declare function setup({ component: ListDivider, components: { List }, decorators: { withWrapper }, }: SetupStoriesOptions<{
+    decorators: 'withWrapper';
+    components: {
+        List: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Default: {};
+};