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

package/js/components/TextField/TextField.d.ts

@@ -0,0 +1,84 @@
+import { HasTheme, HasAriaDisabled, HasClassName, JSXElement, CommonRef, GenericProps, HasDisabled } from '../../types';
+import { InputLabelProps } from '../InputLabel';
+/**
+ * Defines the props of the component.
+ */
+export interface TextFieldProps extends HasClassName, HasTheme, HasAriaDisabled, HasDisabled {
+    /** Chip Group to be rendered before the main text input. */
+    chips?: JSXElement;
+    /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
+    clearButtonProps?: GenericProps;
+    /** Error message. */
+    error?: string | JSXElement;
+    /** Whether we force the focus style or not. */
+    forceFocusStyle?: boolean;
+    /** Whether the text field is displayed with error style or not. */
+    hasError?: boolean;
+    /** Additional element to put at the end of the text field. */
+    afterElement?: JSXElement;
+    /** Helper text. */
+    helper?: string | JSXElement;
+    /** Icon (SVG path). */
+    icon?: string;
+    /** Native input id property (generated if not provided to link the label element). */
+    id?: string;
+    /** Generated helper id for accessibility attributes. */
+    helperId?: string;
+    /** Generated error id for accessibility attributes. */
+    errorId?: string;
+    /** Generated label id for accessibility attributes (used to link the clear button to the field label). */
+    labelId?: string;
+    /** Whether the component is required or not. */
+    isRequired?: boolean;
+    /** Whether the text field is displayed with valid style or not. */
+    isValid?: boolean;
+    /** Label text. */
+    label?: string;
+    /** Additional label props. */
+    labelProps?: InputLabelProps;
+    /** Max string length the input accepts (constrains the input and displays a character counter). */
+    maxLength?: number;
+    /** Whether the text field is a textarea or an input. */
+    multiline?: boolean;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Reference to the wrapper. */
+    textFieldRef?: CommonRef;
+    /** Value. */
+    value?: string;
+    /** Whether any part is disabled. */
+    isAnyDisabled?: boolean;
+    /** The input element (input or textarea). */
+    input: JSXElement;
+    /** Whether the input is focused. */
+    isFocus?: boolean;
+    /** IconButton component. */
+    IconButton: (props: Record<string, any>) => any;
+    /** Ref to the component root. */
+    ref?: CommonRef;
+}
+export type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
+/**
+ * Generate unique accessibility IDs for helper and error texts.
+ * Combines them with any existing aria-describedby in priority order (error > helper > existing).
+ *
+ * @param helper Helper text content
+ * @param error Error text content
+ * @param generatedId Unique ID for this text field instance
+ * @param existingAriaDescribedBy Existing aria-describedby value to merge
+ * @return Object containing helperId, errorId, and combined describedById
+ */
+export declare function generateAccessibilityIds(helper: TextFieldProps['helper'], error: TextFieldProps['error'], generatedId: string, existingAriaDescribedBy?: string, label?: TextFieldProps['label']): {
+    helperId?: string;
+    errorId?: string;
+    describedById?: string;
+    labelId?: string;
+};
+/**
+ * TextField component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const TextField: (props: TextFieldProps) => import("react").JSX.Element;

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

@@ -0,0 +1,178 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { AspectRatio } from '../../constants';
+import { ThumbnailObjectFit, ThumbnailVariant } from './types';
+/**
+ * Setup Thumbnail stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ */
+export declare function setup({ component: Thumbnail, decorators: { withNestedProps, withWrapper, withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withNestedProps' | 'withWrapper' | 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            image: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: string[];
+                mapping: Record<string, string> | undefined;
+            };
+            align: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("center" | "right" | "left")[];
+                mapping: Record<string, "center" | "right" | "left"> | undefined;
+            };
+            variant: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("squared" | "rounded")[];
+                mapping: Record<string, "squared" | "rounded"> | undefined;
+            };
+            aspectRatio: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free")[];
+                mapping: Record<string, "vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free"> | undefined;
+            };
+            fallback: {
+                control: boolean;
+            };
+            'focusPoint.x': {
+                control: {
+                    type: string;
+                    max: number;
+                    min: number;
+                    step: number;
+                };
+            };
+            'focusPoint.y': {
+                control: {
+                    type: string;
+                    max: number;
+                    min: number;
+                    step: number;
+                };
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+        args: {
+            align?: import("../../constants").HorizontalAlignment | undefined;
+            alt?: string | undefined;
+            aspectRatio?: AspectRatio | undefined;
+            badge?: import("react").ReactNode;
+            crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+            fallback?: import("react").ReactNode;
+            fillHeight?: boolean | undefined;
+            image?: string | undefined;
+            loadingState?: string | undefined;
+            imgProps?: import("react").ImgHTMLAttributes<HTMLImageElement> | undefined;
+            imgRef?: import("../../types").CommonRef;
+            ref?: import("../../types").CommonRef;
+            isLoading?: boolean | undefined;
+            objectFit?: ThumbnailObjectFit | undefined;
+            size?: import("./types").ThumbnailSize | undefined;
+            loading?: "eager" | "lazy" | undefined;
+            loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement> | undefined;
+            handleClick?: ((event: any) => void) | undefined;
+            handleKeyPress?: ((event: any) => void) | undefined;
+            variant?: ThumbnailVariant | undefined;
+            linkProps?: import("../../types").GenericProps | undefined;
+            focusPointStyle?: import("../../types").GenericProps | undefined;
+            disabledStateProps?: import("../../types").GenericProps | undefined;
+            isAnyDisabled?: boolean | undefined;
+            linkAs?: "a" | any;
+            'aria-label'?: string | undefined;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+        };
+    };
+    /** Simple thumbnail taking the size of the original image */
+    Simple: {
+        args: {
+            image: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Loading state */
+    IsLoading: {
+        args: {
+            image: string;
+            isLoading: boolean;
+        };
+    };
+    WithoutSource: {
+        args: {
+            image: string;
+            size: "xxl";
+            aspectRatio: "square";
+        };
+    };
+    /** Demonstrate the focus point X on a vertical thumbnail containing an horizontal image */
+    FocusPointVertical: {
+        args: {
+            aspectRatio: "vertical";
+            size: "xxl";
+            image: string;
+            'focusPoint.x': number;
+        };
+    };
+    /** Demonstrate the focus point Y on a horizontal thumbnail containing an vertical image */
+    FocusPointHorizontal: {
+        args: {
+            aspectRatio: "horizontal";
+            size: "xxl";
+            image: string;
+            'focusPoint.y': number;
+        };
+    };
+    /** Setting `onClick` to turn the thumbnail into a button */
+    AsButton: {
+        args: {
+            image: string;
+        };
+        argTypes: {
+            onClick: {
+                action: boolean;
+            };
+        };
+    };
+    /** Setting `linkProps.href` to turn the thumbnail into a link */
+    AsLink: {
+        args: {
+            image: string;
+            linkProps: {
+                href: string;
+            };
+        };
+    };
+    /** Combinations of fillHeight and ratios */
+    FillHeightAndRatio: {
+        args: {
+            image: string;
+            fillHeight: boolean;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Simple thumbnail with svg image */
+    WithSvgImages: {
+        args: {
+            image: string;
+            size: "xxl";
+            fillHeight: boolean;
+            'focusPoint.x': number;
+        };
+    };
+    /** Thumbnail letter-boxing */
+    ObjectFit: {
+        args: {
+            size: "xl";
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,29 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Toolbar stories for a specific framework (React or Vue).
+ * Framework-specific components (Icon) are injected via `components`.
+ */
+export declare function setup({ component: Toolbar, components: { Icon }, render, }: SetupStoriesOptions<{
+    decorators?: never;
+    components: {
+        Icon: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        args: Partial<import(".").ToolbarProps>;
+    };
+    Default: {
+        render: () => import("react").JSX.Element;
+    };
+    WithBefore: {
+        render: () => import("react").JSX.Element;
+    };
+    WithAfter: {
+        render: () => import("react").JSX.Element;
+    };
+    WithAll: {
+        render: () => import("react").JSX.Element;
+    };
+};

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

@@ -0,0 +1,33 @@
+import type { JSXElement, LumxClassName, HasClassName, CommonRef } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface ToolbarProps extends HasClassName {
+    /** After content (placed after the label). */
+    after?: JSXElement;
+    /** Before content (placed before the label). */
+    before?: JSXElement;
+    /** Label content. */
+    label?: JSXElement;
+    /** Component ref. */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const TOOLBAR_NAME = "Toolbar";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof TOOLBAR_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ToolbarProps>;
+/**
+ * Toolbar component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Toolbar: (props: ToolbarProps) => import("react").JSX.Element;

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

@@ -0,0 +1,61 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Tooltip stories for a specific framework (React or Vue).
+ * Framework-specific components (Button) and decorators are injected via options.
+ */
+export declare function setup({ component: Tooltip, components: { Button }, decorators: { withChromaticForceScreenSize }, }: SetupStoriesOptions<{
+    components: {
+        Button: any;
+    };
+    decorators: 'withChromaticForceScreenSize';
+}>): {
+    meta: {
+        component: any;
+        argTypes: {
+            placement: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: string[];
+                mapping: Record<string, string> | undefined;
+            };
+            children: {
+                control: boolean;
+            };
+            closeMode: {
+                control: {
+                    type: "inline-radio";
+                };
+                options: string[];
+            };
+            ariaLinkMode: {
+                control: {
+                    type: "inline-radio";
+                };
+                options: readonly ["aria-describedby", "aria-labelledby"];
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    OnAButton: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    OnADisabledButton: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    ForceOpen: {
+        render: (args: any) => import("react").JSX.Element;
+        args: {
+            forceOpen: boolean;
+        };
+    };
+    CloseModeHide: {
+        render: (args: any) => import("react").JSX.Element;
+        args: {
+            closeMode: string;
+        };
+    };
+    MultilineTooltip: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+};

package/js/components/Tooltip/TestStories.d.ts

@@ -0,0 +1,72 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Tooltip test stories (with play functions) for a specific framework (React or Vue).
+ * Framework-specific components (Button) are injected via options.
+ */
+export declare function setup({ component: Tooltip, components: { Button }, }: SetupStoriesOptions<{
+    components: {
+        Button: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        tags: string[];
+        parameters: {
+            chromatic: {
+                disableSnapshot: boolean;
+            };
+        };
+    };
+    TestActivateOnHover: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        args: {
+            label: string;
+        };
+        play({ canvas, userEvent }: any): Promise<void>;
+    };
+    TestHoverAnchorThenTooltip: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        args: {
+            label: string;
+        };
+        play({ canvas, userEvent }: any): Promise<void>;
+    };
+    TestFocusVisibleAndEscape: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        args: {
+            label: string;
+        };
+        play({ canvas, userEvent }: any): Promise<void>;
+    };
+    TestNoActivateOnClickFocus: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        args: {
+            label: string;
+        };
+        play({ canvas, userEvent }: any): Promise<void>;
+    };
+    TestCloseModeHide: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        args: {
+            label: string;
+            closeMode: string;
+        };
+        play({ canvas, userEvent }: any): Promise<void>;
+    };
+    TestAriaDescribedByOnHover: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        play({ canvas, userEvent }: any): Promise<void>;
+    };
+    TestAriaDescribedByOnWrapperHover: {
+        render(props: any): import("react").JSX.Element;
+        play({ canvasElement, userEvent }: any): Promise<void>;
+    };
+    TestAriaLabelledByOnHover: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        play({ canvas, userEvent }: any): Promise<void>;
+    };
+    TestAriaLabelledByOnWrapperHover: {
+        render(props: any): import("react").JSX.Element;
+        play({ canvasElement, userEvent }: any): Promise<void>;
+    };
+};

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

@@ -0,0 +1,65 @@
+import type { CommonRef, HasClassName, HasCloseMode, LumxClassName } from '../../types';
+import { ARIA_LINK_MODES } from './constants';
+/** Position of the tooltip relative to the anchor element. */
+export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Framework-agnostic tooltip props (shared between React and Vue wrappers).
+ */
+export interface TooltipProps extends HasCloseMode {
+    /** Delay (in ms) before closing the tooltip. */
+    delay?: number;
+    /** Whether the tooltip is displayed even without the mouse hovering the anchor. */
+    forceOpen?: boolean;
+    /** Label text. */
+    label?: string | null | false;
+    /** Placement of the tooltip relative to the anchor. */
+    placement?: TooltipPlacement;
+    /** Choose how the tooltip text should link to the anchor */
+    ariaLinkMode?: (typeof ARIA_LINK_MODES)[number];
+    /** Z-index for the tooltip */
+    zIndex?: number;
+}
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<TooltipProps>;
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Tooltip";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Props for the TooltipPopup rendering component.
+ */
+export interface TooltipPopupProps extends HasClassName {
+    /** Unique ID for the tooltip (used for ARIA linking) */
+    id: string;
+    /** Label text to display in the tooltip */
+    label: string;
+    /** Resolved placement position from floating-ui */
+    position: string;
+    /** Whether the tooltip is visually hidden (closeMode="hide") */
+    isHidden: boolean;
+    /** Positioning styles from floating-ui */
+    style?: any;
+    /** Z-index for the tooltip */
+    zIndex?: number;
+    /** Reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Tooltip popup rendering component.
+ * Pure JSX template for the tooltip popup element (arrow + inner text + BEM classes).
+ *
+ * @param props Component props.
+ * @return JSX element.
+ */
+export declare const TooltipPopup: {
+    (props: TooltipPopupProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-tooltip";
+};
+export { ARIA_LINK_MODES, ARROW_SIZE, TOOLTIP_ZINDEX } from './constants';

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

@@ -0,0 +1,116 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component: Uploader, components: { GridColumn }, decorators: { withCombinations, withWrapper }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations' | 'withWrapper';
+    components: {
+        GridColumn: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            onClick: {
+                action: boolean;
+            };
+            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;
+                };
+            };
+            aspectRatio: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free")[];
+                mapping: Record<string, "vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free"> | undefined;
+            };
+        };
+        args: Partial<import(".").UploaderProps>;
+    };
+    WithLabel: {
+        args: {
+            label: string;
+        };
+    };
+    WithLabelAndIcon: {
+        args: {
+            label: string;
+            icon: string;
+        };
+    };
+    Variants: {
+        args: {
+            label: string;
+            icon: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    RatioAndSize: {
+        args: {
+            label: string;
+            icon: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};