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

package/js/components/GridColumn/GridColumn.d.ts

@@ -1,48 +0,0 @@
-import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
-import { Size } from '../../constants';
-export type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
-/**
- * Defines the props of the component.
- */
-export interface GridColumnProps extends HasClassName {
-    /** Customize the root element. */
-    as?: any;
-    /** Children elements. */
-    children?: JSXElement;
-    /** Space between columns and rows. */
-    gap?: GridColumnGapSize;
-    /** Ideal number of columns. */
-    maxColumns?: number;
-    /** Minimum width for each item, reduce the number of column if there is not enough space. */
-    itemMinWidth?: number;
-    /** Custom styles. */
-    style?: any;
-    /** reference to the root element */
-    ref?: CommonRef;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "GridColumn";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<GridColumnProps>;
-/**
- * The GridColumn is a layout component that can display children in a grid
- * with custom display properties. It also comes with a responsive design,
- * with a number of column that reduce when there is not enough space for each item.
- *
- * @param props Component props.
- * @return JSX element.
- */
-export declare const GridColumn: {
-    (props: GridColumnProps): import("react").JSX.Element;
-    displayName: string;
-    className: "lumx-grid-column";
-    defaultProps: Partial<GridColumnProps>;
-};

package/js/components/GridColumn/GridColumnStories.d.ts

@@ -1,45 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-export declare function setup({ component: GridColumn, }: SetupStoriesOptions<{
-    decorators?: never;
-}>): {
-    meta: {
-        component: any;
-        render: ({ nbItems, ...props }: any) => import("react").JSX.Element;
-        argTypes: {
-            nbItems: {
-                control: string;
-            };
-            gap: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: (import("./GridColumn").GridColumnGapSize | undefined)[];
-                mapping: Record<string, import("./GridColumn").GridColumnGapSize | undefined> | undefined;
-            };
-            itemMinWidth: {
-                control: string;
-            };
-            maxColumns: {
-                control: string;
-            };
-        };
-        args: {
-            nbItems: number;
-            as?: any;
-            children?: import("react").ReactNode;
-            gap?: import("./GridColumn").GridColumnGapSize | undefined;
-            maxColumns?: number | undefined;
-            itemMinWidth?: number | undefined;
-            style?: any;
-            ref?: import("../../types").CommonRef;
-            className?: string | undefined;
-        };
-    };
-    Default: {};
-    Columns: {
-        args: {
-            maxColumns: number;
-            itemMinWidth: number;
-        };
-    };
-};

package/js/components/GridColumn/GridColumnTests.d.ts

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

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

@@ -1,2 +0,0 @@
-export { GridColumn, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from './GridColumn';
-export type { GridColumnProps, GridColumnGapSize } from './GridColumn';

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

@@ -1,90 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup Heading stories for a specific framework (React or Vue).
- * Framework-specific components (HeadingLevelProvider) are injected via `components`.
- */
-export declare function setup({ component: Heading, components: { HeadingLevelProvider }, decorators: { withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations';
-    components: {
-        HeadingLevelProvider: any;
-    };
-}>): {
-    meta: {
-        component: any;
-        render: ({ children, ...args }: any) => import("react").JSX.Element;
-        argTypes: {
-            as: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: import("../../types").HeadingElement[];
-                mapping: Record<string, import("../../types").HeadingElement> | undefined;
-            };
-            children: {
-                control: string;
-            };
-            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" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button")[];
-                mapping: Record<string, "caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button"> | 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;
-            };
-            whiteSpace: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: string[];
-                mapping: Record<string, string> | undefined;
-            };
-        };
-    };
-    /** Default heading with text */
-    Default: {
-        args: {
-            children: string;
-        };
-    };
-    /** All supported heading elements */
-    AllLevels: {
-        args: {
-            children: string;
-        };
-        argTypes: {
-            as: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** All typography */
-    AllTypography: {
-        args: {
-            children: string;
-        };
-        argTypes: {
-            typography: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** Nest HeadingLevelProvider to increment heading levels */
-    NestedHeadingLevelProvider: {
-        render: () => import("react").JSX.Element;
-    };
-};

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

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

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

@@ -1,21 +0,0 @@
-import { HeadingElement } from '../../types';
-/** The maximum authorized heading level. */
-export declare const MAX_HEADING_LEVEL = 6;
-/**
- * Typography to use by default depending on the heading level.
- */
-export declare const DEFAULT_TYPOGRAPHY_BY_LEVEL: {
-    h1: "display1";
-    h2: "headline";
-    h3: "title";
-    h4: "subtitle2";
-    h5: "subtitle1";
-    h6: "body2";
-};
-export interface HeadingLevelContext {
-    /** The current level */
-    level: number;
-    /** The heading element matching the current level */
-    headingElement: HeadingElement;
-}
-export declare const defaultContext: HeadingLevelContext;

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

@@ -1,44 +0,0 @@
-import { HeadingElement, LumxClassName } from '../../types';
-import { TextProps } from '../Text';
-/**
- * Defines the props of the component.
- */
-export interface HeadingProps extends Partial<TextProps> {
-    /**
-     * Display a specific heading level instead of the one provided by parent context provider.
-     */
-    as?: HeadingElement;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "Heading";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: {};
-/**
- * Get Heading component common props
- *
- * @param props                 Component props.
- * @param contextHeadingElement Heading element from context.
- * @return Common Props
- */
-export declare const getHeadingProps: (props: HeadingProps, contextHeadingElement?: HeadingElement) => {
-    as: HeadingElement;
-    className: string;
-    typography: import("../../constants").Typography;
-    color?: import("../../constants").ColorWithVariants | undefined;
-    colorVariant?: import("../../constants").ColorVariant | undefined;
-    truncate?: boolean | {
-        lines: number;
-    } | undefined;
-    noWrap?: boolean | undefined;
-    whiteSpace?: import("../../constants").WhiteSpace | undefined;
-    children?: import("react").ReactNode;
-    style?: import("react").CSSProperties | undefined;
-};

package/js/components/Heading/utils.d.ts

@@ -1,8 +0,0 @@
-/**
- * Computes the next heading level based on the optional prop level or the parent context level.
- *
- * @param levelProp - The explicit level provided via props (optional).
- * @param parentLevel - The level from the parent context.
- * @returns The calculated heading level, clamped to the maximum allowed level.
- */
-export declare const computeHeadingLevel: (levelProp: number | undefined, parentLevel: number) => number;

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

@@ -1,156 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup Icon stories for a specific framework (React or Vue).
- * Framework-specific components (Text) are injected via `components`.
- */
-export declare function setup({ component: Icon, components: { Text, GridColumn }, decorators: { withCombinations, withWrapper }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations' | 'withWrapper';
-    components: {
-        Text: any;
-        GridColumn: 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;
-                };
-            };
-            hasShape: {
-                control: string;
-            };
-            size: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("s" | "xxs" | "xs" | "m" | "l" | "xl" | "xxl")[];
-                mapping: Record<string, "s" | "xxs" | "xs" | "m" | "l" | "xl" | "xxl"> | 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;
-            };
-        };
-    };
-    /** All combinations of size and shape */
-    SizeAndShape: {
-        args: {
-            icon: string;
-        };
-        argTypes: {
-            hasShape: {
-                control: boolean;
-            };
-            size: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** All combinations of color and color variants */
-    AllColors: {
-        args: {
-            size: "m";
-            icon: string;
-        };
-        argTypes: {
-            hasShape: {
-                control: boolean;
-            };
-            color: {
-                control: boolean;
-            };
-            colorVariant: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** Icon inside a text component (renders as inline instead of block and can adapt to the verticalAlign) */
-    InsideText: {
-        args: {
-            icon: string;
-            size: string;
-        };
-        argTypes: {
-            verticalAlign: {
-                control: string;
-                options: (string | undefined)[];
-            };
-        };
-        render: (args: any) => import("react").JSX.Element;
-    };
-};

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

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

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

@@ -1 +0,0 @@
-export declare const ICON_SIZES: ("s" | "xxs" | "xs" | "m" | "l" | "xl" | "xxl")[];

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

@@ -1,41 +0,0 @@
-import { ColorWithVariants, ColorVariant } from '../../constants';
-import type { LumxClassName, HasTheme, HasClassName, CommonRef } from '../../types';
-import { ICON_SIZES } from './constants';
-export declare const COMPONENT_NAME = "Icon";
-export declare const IconClassName: LumxClassName<typeof COMPONENT_NAME>;
-export type IconSizes = (typeof ICON_SIZES)[number];
-/**
- * Defines the props of the component.
- */
-export interface IconProps extends HasClassName, HasTheme {
-    /** Color variant. */
-    color?: ColorWithVariants;
-    /** Lightened or darkened variant of the selected icon color. */
-    colorVariant?: ColorVariant;
-    /** Whether the icon has a shape. */
-    hasShape?: boolean;
-    /**
-     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
-     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
-     */
-    icon: string;
-    /** Size variant. */
-    size?: IconSizes;
-    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
-    alt?: string;
-    /** Vertical alignment of the icon (only applies for icons nested in Text/Heading). */
-    verticalAlign?: null | 'middle';
-    /** reference to the root element */
-    ref?: CommonRef;
-}
-/**
- * Icon component.
- *
- * @param  props Component props.
- */
-export declare const Icon: {
-    (props: IconProps): import("react").JSX.Element;
-    displayName: string;
-    className: "lumx-icon";
-    defaultProps: Partial<IconProps>;
-};

package/js/components/ImageBlock/ImageCaption.d.ts

@@ -1,36 +0,0 @@
-import { HorizontalAlignment } from '../../constants';
-import { GenericProps, HasPolymorphicAs, HasTheme, JSXElement } from '../../types';
-export type As = 'div' | 'figcaption';
-export type ImageCaptionMetadata = {
-    /** Image title to display in the caption. */
-    title?: string;
-    /** Props to pass to the title. */
-    titleProps?: GenericProps;
-    /** Image description. Can be either a string, ReactNode, or sanitized html object. */
-    description?: JSXElement | {
-        __html: string;
-    };
-    /** Props to pass to the description. */
-    descriptionProps?: GenericProps;
-    /** Tag content. */
-    tags?: JSXElement;
-    /** Caption custom CSS style. */
-    captionStyle?: GenericProps;
-    /** Props to pass to the wrapper FlexBox element. */
-    wrapperProps?: GenericProps;
-    /** FlexBox component injected by the framework wrapper (React or Vue). */
-    FlexBox: any;
-    /** Text component injected by the framework wrapper (React or Vue). */
-    Text: any;
-};
-export type ImageCaptionPropsToOverride = 'FlexBox' | 'Text' | 'wrapperProps';
-export type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme & HasPolymorphicAs<AS> & ImageCaptionMetadata & {
-    /** Base className for sub elements */
-    baseClassName?: string;
-    /** Alignment. */
-    align?: HorizontalAlignment;
-    /** Truncate text on title & description (no line wrapping). */
-    truncate?: boolean;
-};
-/** Internal component used to render image captions */
-export declare const ImageCaption: <AS extends As>(props: ImageCaptionProps<AS>) => import("react").JSX.Element | null;