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

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

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

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

@@ -1,8 +0,0 @@
-import { SetupOptions } from '../../../testing';
-export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
-    props: any;
-    link: HTMLElement;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

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

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

@@ -1,15 +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;
-    linkPreview: HTMLElement;
-    thumbnail: HTMLElement | null;
-    title: HTMLElement | null;
-    description: HTMLElement | null;
-    link: HTMLElement;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

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

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

@@ -1,17 +0,0 @@
-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: {};
-};

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

@@ -1,11 +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;
-    listDivider: HTMLElement;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

@@ -1,58 +0,0 @@
-import { Size } from '../../constants';
-import type { CommonRef, GenericProps, HasAriaDisabled, HasClassName, JSXElement, LumxClassName } from '../../types';
-/** ListItem size variants. */
-export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
-/**
- * Defines the props of the component.
- */
-export interface ListItemProps extends HasClassName, HasAriaDisabled {
-    /** A component to be rendered after the content. */
-    after?: JSXElement;
-    /** A component to be rendered before the content. */
-    before?: JSXElement;
-    /** Content. */
-    children?: JSXElement;
-    /** Whether the list item should be highlighted or not. */
-    isHighlighted?: boolean;
-    /** Whether the component is selected or not. */
-    isSelected?: boolean;
-    /** Whether link/button is disabled or not. */
-    isDisabled?: boolean;
-    /** Custom component for the link (can be used to inject router Link). */
-    linkAs?: 'a' | any;
-    /** Props that will be passed on to the Link. */
-    linkProps?: GenericProps;
-    /** Reference to the link element. */
-    linkRef?: CommonRef;
-    /** Size variant. */
-    size?: ListItemSize;
-    /** ref to the root <li> element */
-    ref?: CommonRef;
-    /** On click callback. */
-    handleClick?: (event: any) => void;
-}
-export type ListItemPropsToOverride = 'after' | 'before' | 'children' | 'handleClick';
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "ListItem";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<ListItemProps>;
-/**
- * ListItem component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const ListItem: {
-    (props: ListItemProps): import("react").JSX.Element;
-    displayName: string;
-    className: "lumx-list-item";
-    defaultProps: Partial<ListItemProps>;
-};

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

@@ -1,24 +0,0 @@
-import type { HasClassName } from '../../types';
-import { ClickableElement, RawClickableProps } from '../RawClickable';
-/**
- * ListItemAction props.
- */
-export type ListItemActionProps<E extends ClickableElement = 'button'> = RawClickableProps<E> & HasClassName;
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "ListItemAction";
-/**
- * Component classname (used by action area CSS pattern).
- */
-export declare const CLASSNAME = "lumx-action-area__action";
-export declare const DEFAULT_PROPS: Partial<ListItemActionProps>;
-/**
- * ListItemAction component.
- *
- * Renders a button or link with action area classes.
- * When placed as a child of ListItem, it activates the action area pattern:
- * the entire list item becomes visually clickable, while other interactive
- * elements (in `before`/`after` slots) remain independently clickable.
- */
-export declare const ListItemAction: <E extends ClickableElement = "button">(props: ListItemActionProps<E>) => import("react").JSX.Element;