@lumx/core 4.13.0 → 4.14.0-alpha.1

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

@@ -0,0 +1,115 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { Kind } from '../../constants';
+/**
+ * Setup AlertDialog stories for a specific framework (React or Vue).
+ * Framework-specific components and render function are injected via `components` and `render`.
+ */
+export declare function setup({ component: AlertDialog, render, components: { Link }, decorators: { withChromaticForceScreenSize, withNestedProps }, }: SetupStoriesOptions<{
+    components: {
+        Link: any;
+    };
+    decorators: 'withChromaticForceScreenSize' | 'withNestedProps';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        args: {
+            'confirmProps.label': string;
+            confirmProps?: any;
+            cancelProps?: any;
+            dialogProps?: any;
+            ref?: import("../../types").CommonRef;
+            cancelButtonRef?: import("../../types").CommonRef;
+            confirmationButtonRef?: import("../../types").CommonRef;
+            DescriptionElement?: any;
+            Dialog?: any;
+            Toolbar?: any;
+            Button?: any;
+            Icon?: any;
+            id?: string | undefined;
+            focusElement?: any;
+            className?: string | undefined;
+            kind?: Kind | undefined;
+            title?: string | undefined;
+            children?: import("react").ReactNode;
+            size?: import("../Dialog").DialogSizes | undefined;
+        };
+        argTypes: {
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("big" | "tiny" | "regular" | "huge")[];
+                mapping: Record<string, "big" | "tiny" | "regular" | "huge"> | undefined;
+            };
+            kind: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("info" | "success" | "warning" | "error")[];
+                mapping: Record<string, "info" | "success" | "warning" | "error"> | undefined;
+            };
+            'confirmProps.onClick': {
+                action: boolean;
+            };
+        };
+        parameters: {
+            chromatic: {
+                pauseAnimationAtEnd: boolean;
+                delay: number;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    DefaultKind: {
+        args: {
+            title: string;
+            children: string;
+        };
+    };
+    Warning: {
+        args: {
+            kind: "warning";
+            title: string;
+            children: string;
+        };
+    };
+    Success: {
+        args: {
+            kind: "success";
+            title: string;
+            children: string;
+        };
+    };
+    Error: {
+        args: {
+            kind: "error";
+            title: string;
+            children: string;
+        };
+    };
+    WithCancel: {
+        argTypes: {
+            'cancelProps.onClick': {
+                action: boolean;
+            };
+        };
+        args: {
+            title: string;
+            'cancelProps.label': string;
+            children: string;
+        };
+    };
+    RichDescription: {
+        argTypes: {
+            children: {
+                control: boolean;
+            };
+        };
+        args: {
+            title: string;
+            children: string;
+        };
+        render: ({ children, ...args }: any) => any;
+    };
+};

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

@@ -0,0 +1,91 @@
+import { Kind } from '../../constants';
+import type { LumxClassName, JSXElement, HasClassName, CommonRef } from '../../types';
+import { DialogProps } from '../Dialog';
+export interface BaseAlertDialogProps {
+    /** Message variant. */
+    kind?: Kind;
+    /** Dialog title. */
+    title?: string;
+    /**
+     * Children
+     */
+    children?: JSXElement;
+}
+export interface AlertDialogProps extends HasClassName, BaseAlertDialogProps, Pick<DialogProps, 'size'> {
+    /** Props forwarded to the confirm button */
+    confirmProps: any;
+    /**
+     * Props forwarded to the cancel button.
+     * Will not render a cancel button if undefined.
+     */
+    cancelProps?: any;
+    /** Props forwarded to the dialog wrapper element. */
+    dialogProps?: any;
+    /** Ref forwarded to the dialog root element. */
+    ref?: CommonRef;
+    /** Ref forwarded to the cancel button element. */
+    cancelButtonRef?: CommonRef;
+    /** Ref forwarded to the confirm button element. */
+    confirmationButtonRef?: CommonRef;
+    /** Element used to wrap the description (children). */
+    DescriptionElement: any;
+    /** Dialog component injected by the framework wrapper. */
+    Dialog: any;
+    /** Toolbar component injected by the framework wrapper. */
+    Toolbar: any;
+    /** Button component injected by the framework wrapper. */
+    Button: any;
+    /** Icon component injected by the framework wrapper. */
+    Icon: any;
+    /** Unique identifier for the dialog (used for aria-labelledby / aria-describedby). */
+    id: string;
+    /**
+     * Pre-computed focus element.
+     * Allows framework wrappers to pass the actual DOM element directly when ref-on-component
+     * does not yield a DOM node (e.g. Vue). Falls back to cancelButtonRef / confirmationButtonRef.
+     */
+    focusElement?: any;
+}
+/**
+ * Associative map from message kind to color and icon.
+ */
+export declare const CONFIG: {
+    error: {
+        color: "red";
+        icon: string;
+    };
+    info: {
+        color: "blue";
+        icon: string;
+    };
+    success: {
+        color: "green";
+        icon: string;
+    };
+    warning: {
+        color: "yellow";
+        icon: string;
+    };
+};
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "AlertDialog";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<AlertDialogProps>;
+/**
+ * AlertDialog component.
+ *
+ * An alert dialog is a modal dialog that interrupts the user's workflow to
+ * communicate an important message and acquire a response.
+ *
+ * It should not have a complex content.
+ * Children of this component should only be strings, paragraphs or links.
+ */
+export declare const AlertDialog: (props: AlertDialogProps) => import("react").JSX.Element;

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

@@ -0,0 +1,52 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { type AvatarSize } from '.';
+export declare function setup({ component: Avatar, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        argTypes: {
+            image: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: string[];
+                mapping: Record<string, string> | undefined;
+            };
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: AvatarSize[];
+                mapping: Record<string, AvatarSize> | undefined;
+            };
+        };
+        args: {
+            image: string;
+            alt: string;
+        };
+    };
+    Default: {};
+    AvatarButton: {
+        argTypes: {
+            onClick: {
+                action: boolean;
+            };
+        };
+    };
+    AvatarLink: {
+        args: {
+            href: string;
+            target: string;
+            linkAs: string;
+        };
+    };
+    AllSizes: {
+        argTypes: {
+            size: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,50 @@
+import type { HasClassName, JSXElement, LumxClassName, HasTheme, CommonRef } from '../../types';
+import { Size } from '../../constants';
+/**
+ * Avatar sizes.
+ */
+export type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Defines the props of the component.
+ */
+export interface AvatarProps extends HasTheme, HasClassName {
+    /** Action toolbar content. */
+    actions?: JSXElement;
+    /** Badge. */
+    badge?: JSXElement;
+    /** Image URL. */
+    image: JSXElement;
+    /** Size variant. */
+    size?: AvatarSize;
+    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Avatar";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const block: {
+    (additionalClasses: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+    (modifiers?: import("../../utils/classNames/bem/types").Modifier, additionalClasses?: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+}, element: {
+    (elem: string, additionalClasses: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/types").Modifier, additionalClasses?: import("../../utils/classNames/bem/types").AdditionalClasses): string;
+};
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: {
+    readonly size: "m";
+};
+/**
+ * Avatar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Avatar: (props: AvatarProps) => import("react").JSX.Element;

package/js/components/Badge/BadgeWrapper.d.ts

@@ -0,0 +1,13 @@
+import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
+export interface BadgeWrapperProps extends HasClassName {
+    /** Badge element to display */
+    badge?: JSXElement;
+    /** Content to wrap with badge */
+    children?: JSXElement;
+    /** Ref forwarding */
+    ref?: CommonRef;
+}
+export declare const COMPONENT_NAME = "BadgeWrapper";
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const DEFAULT_PROPS: Partial<BadgeWrapperProps>;
+export declare const BadgeWrapper: (props: BadgeWrapperProps) => import("react").JSX.Element;

package/js/components/Badge/BadgeWrapperStories.d.ts

@@ -0,0 +1,29 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup BadgeWrapper stories for a specific framework (React or Vue).
+ * Framework-specific components (Badge, Icon, Button) are injected via `components`.
+ */
+export declare function setup({ component: BadgeWrapper, components: { Badge, Icon, Button }, }: SetupStoriesOptions<{
+    components: {
+        Badge: any;
+        Icon: any;
+        Button: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            children: {
+                control: boolean;
+            };
+        };
+        args: Partial<import("./BadgeWrapper").BadgeWrapperProps>;
+    };
+    WithIcon: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    WithButton: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+};

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

@@ -0,0 +1,46 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Badge stories for a specific framework (React or Vue).
+ * Framework-specific components (Icon, Thumbnail, etc.) are injected via `components`.
+ */
+export declare function setup({ component: Badge, components: { Icon, Thumbnail, FlexBox }, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+    components: {
+        Icon: any;
+        Thumbnail: any;
+        FlexBox: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            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;
+            };
+        };
+        args: Partial<import(".").BadgeProps>;
+    };
+    WithText: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    WithIcon: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    WithThumbnail: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    AllColors: {
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            color: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,37 @@
+import { ColorPalette } from '../../constants';
+import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface BadgeProps extends HasClassName {
+    /** Badge content. */
+    children?: JSXElement;
+    /** Color variant. */
+    color?: ColorPalette;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Badge";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<BadgeProps>;
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Badge: {
+    (props: BadgeProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-badge";
+    defaultProps: Partial<BadgeProps>;
+};

package/js/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,36 @@
+import type { LumxClassName, HasClassName, JSXElement, CommonRef } from '../../types';
+/**
+ * Defines the props of the component
+ */
+export interface ButtonGroupProps extends HasClassName {
+    /**
+     * Children
+     */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "ButtonGroup";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ButtonGroupProps>;
+/**
+ * ButtonGroup component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const ButtonGroup: {
+    (props: ButtonGroupProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-button-group";
+    defaultProps: Partial<ButtonGroupProps>;
+};

package/js/components/Button/ButtonGroupStories.d.ts

@@ -0,0 +1,33 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup ButtonGroup stories for a specific framework (React or Vue).
+ * Framework-specific components (Button, IconButton) are injected via `components`.
+ */
+export declare function setup({ component: ButtonGroup, components: { Button, IconButton }, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+    components: {
+        Button: any;
+        IconButton: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            children: {
+                control: boolean;
+            };
+        };
+        args: any;
+    };
+    Variants: {
+        render: ({ size, emphasis, theme }: any) => import("react").JSX.Element;
+        decorators: ((story: any, context: any) => any)[];
+    };
+    OneButton: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    ManyButtons: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+};