@lumx/core 4.13.0 → 4.14.0-alpha.1

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

@@ -0,0 +1,210 @@
+import { Emphasis } from '@lumx/core/js/constants';
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { ButtonSize } from './ButtonRoot';
+/**
+ * Setup IconButton stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific components are injected via `components`.
+ */
+export declare function setup({ component: IconButton, decorators: { withCombinations, withThemedBackground }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations' | 'withThemedBackground';
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            isSelected: {
+                control: string;
+            };
+            isDisabled: {
+                control: string;
+            };
+            hasBackground: {
+                control: string;
+            };
+            emphasis: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("medium" | "low" | "high")[];
+                mapping: Record<string, "medium" | "low" | "high"> | undefined;
+            };
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ButtonSize[];
+                mapping: Record<string, ButtonSize> | undefined;
+            };
+            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;
+                };
+            };
+            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;
+            };
+            ref: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            onClick: {
+                action: boolean;
+                table: {
+                    disable: boolean;
+                };
+            };
+            linkAs: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            className: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            target: {
+                if: {
+                    arg: string;
+                    exists: boolean;
+                };
+                control: {
+                    type: string;
+                };
+            };
+            type: {
+                if: {
+                    arg: string;
+                    exists: boolean;
+                };
+                control: {
+                    type: string;
+                };
+            };
+        };
+        args: {
+            label: string;
+            icon: string;
+            image?: string | undefined;
+            title?: string | undefined;
+            color?: import("@lumx/core/js/constants").ColorPalette | undefined;
+            emphasis?: Emphasis | undefined;
+            hasBackground?: boolean | undefined;
+            href?: string | undefined;
+            isDisabled?: boolean | undefined;
+            isSelected?: boolean | undefined;
+            name?: string | undefined;
+            size?: ButtonSize | undefined;
+            target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+            type?: "submit" | "reset" | "button" | undefined | undefined;
+            linkAs?: "a" | any;
+            fullWidth?: boolean | undefined;
+            isActive?: boolean | undefined;
+            isFocused?: boolean | undefined;
+            isHovered?: boolean | undefined;
+            'aria-expanded'?: boolean | "true" | "false" | undefined;
+            'aria-haspopup'?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+            'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined;
+            'aria-label'?: string | undefined;
+            className?: string | undefined;
+            theme?: import("@lumx/core/js/constants").Theme | undefined;
+            'aria-disabled'?: import("../../types/Booleanish").Booleanish | undefined;
+            children?: import("react").ReactNode;
+            handleClick?: ((event?: any) => void) | undefined;
+            handleKeyPress?: ((event?: any) => void) | undefined;
+            ref?: import("../../types").CommonRef;
+            disabled?: boolean | undefined;
+        };
+    };
+    Default: {};
+    WithImage: {
+        argTypes: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: string[];
+            mapping: Record<string, string> | undefined;
+        };
+        args: {
+            image: string;
+        };
+    };
+    IconStateVariations: {
+        args: {};
+        argTypes: {
+            [k: string]: {
+                table: {
+                    disable: boolean;
+                };
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,302 @@
+import { Emphasis, Theme } from '@lumx/core/js/constants';
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { ButtonSize } from './ButtonRoot';
+export declare const excludeCombination: ({ isSelected, emphasis, hasBackground }: any) => boolean;
+/**
+ * Setup Button stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific components are injected via `components`.
+ */
+export declare function setup({ component: Button, decorators: { withCombinations, withThemedBackground }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations' | 'withThemedBackground';
+}>): {
+    meta: {
+        component: any;
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        argTypes: {
+            isSelected: {
+                control: string;
+                if: {
+                    arg: string;
+                    eq: string;
+                };
+            };
+            isDisabled: {
+                control: string;
+            };
+            hasBackground: {
+                control: string;
+                if: {
+                    arg: string;
+                    eq: string;
+                };
+            };
+            emphasis: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("medium" | "low" | "high")[];
+                mapping: Record<string, "medium" | "low" | "high"> | undefined;
+            };
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ButtonSize[];
+                mapping: Record<string, ButtonSize> | 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;
+                };
+            };
+            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;
+            };
+            ref: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            onClick: {
+                action: boolean;
+                table: {
+                    disable: boolean;
+                };
+            };
+            linkAs: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            className: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            target: {
+                if: {
+                    arg: string;
+                    exists: boolean;
+                };
+                control: {
+                    type: string;
+                };
+            };
+            type: {
+                if: {
+                    arg: string;
+                    exists: boolean;
+                };
+                control: {
+                    type: string;
+                };
+            };
+        };
+        args: {
+            children: string;
+            leftIcon?: string | undefined;
+            rightIcon?: string | undefined;
+            fullWidth?: boolean | undefined;
+            color?: import("@lumx/core/js/constants").ColorPalette | undefined;
+            emphasis?: Emphasis | undefined;
+            hasBackground?: boolean | undefined;
+            href?: string | undefined;
+            isDisabled?: boolean | undefined;
+            isSelected?: boolean | undefined;
+            name?: string | undefined;
+            size?: ButtonSize | undefined;
+            target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+            type?: "submit" | "reset" | "button" | undefined | undefined;
+            linkAs?: "a" | any;
+            isActive?: boolean | undefined;
+            isFocused?: boolean | undefined;
+            isHovered?: boolean | undefined;
+            'aria-expanded'?: boolean | "true" | "false" | undefined;
+            'aria-haspopup'?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+            'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined;
+            'aria-label'?: string | undefined;
+            className?: string | undefined;
+            theme?: Theme | undefined;
+            'aria-disabled'?: import("../../types/Booleanish").Booleanish | undefined;
+            handleClick?: ((event?: any) => void) | undefined;
+            handleKeyPress?: ((event?: any) => void) | undefined;
+            ref?: import("../../types").CommonRef;
+            disabled?: boolean | undefined;
+        };
+    };
+    /** Default button */
+    Base: {
+        args: {
+            children: string;
+        };
+    };
+    /** All combinations of size and emphasis */
+    SizeAndEmphasis: {
+        args: {
+            children: string;
+        };
+        argTypes: {
+            [k: string]: {
+                table: {
+                    disable: boolean;
+                };
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Setting a href to transform the button into a link. */
+    LinkButton: {
+        args: {
+            href: string;
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Check button style variations (color, states, emphasis, etc.) */
+    StateVariations: {
+        args: {
+            children: string;
+            rightIcon: string;
+        };
+        argTypes: {
+            [k: string]: {
+                table: {
+                    disable: boolean;
+                };
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,89 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Checkbox 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: Checkbox, decorators: { withCombinations, withValueOnChange }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations' | 'withValueOnChange';
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        decorators: ((story: any, context: any) => any)[];
+        argTypes: {
+            onChange: {
+                action: boolean;
+            };
+            name: {
+                control: boolean;
+            };
+            value: {
+                control: boolean;
+            };
+        };
+        args: {
+            isChecked: boolean;
+            name: string;
+            value: string;
+            helper?: string | undefined;
+            id?: string | undefined;
+            label?: import("react").ReactNode;
+            inputProps?: Record<string, any> | undefined;
+            inputRef?: import("../../types").CommonRef;
+            inputId?: string | undefined;
+            handleChange?: ((isChecked: boolean, value?: string, name?: string, event?: any) => void) | undefined;
+            ref?: import("../../types").CommonRef;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+            'aria-disabled'?: import("../../types/Booleanish").Booleanish | undefined;
+            isDisabled?: boolean | undefined;
+            disabled?: boolean | undefined;
+            checked?: boolean | undefined;
+        };
+    };
+    /** Default checkbox */
+    Default: {};
+    /** With label and helper */
+    LabelAndHelper: {
+        argTypes: {
+            label: {
+                control: string;
+            };
+            helper: {
+                control: string;
+            };
+        };
+        args: {
+            label: string;
+            helper: string;
+        };
+    };
+    /** With intermediate state */
+    IntermediateState: {
+        argTypes: {
+            isChecked: {
+                control: boolean;
+            };
+        };
+        args: {
+            isChecked: string;
+        };
+    };
+    /** Disabled */
+    Disabled: {
+        argTypes: {
+            isDisabled: {
+                control: boolean;
+            };
+            'aria-disabled': {
+                control: boolean;
+            };
+        };
+        args: {
+            label: string;
+            helper: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/Chip/ChipGroupStories.d.ts

@@ -0,0 +1,17 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component: ChipGroup, components: { Chip }, }: SetupStoriesOptions<{
+    components: {
+        Chip: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        args: Partial<import("./ChipGroup").ChipGroupProps>;
+    };
+    Default: {
+        render: () => import("react").JSX.Element;
+    };
+    Small: {
+        render: () => import("react").JSX.Element;
+    };
+};

package/js/components/Chip/SelectionChipGroupStories.d.ts

@@ -0,0 +1,54 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+declare const fruits: {
+    id: string;
+    name: string;
+}[];
+type FruitOption = (typeof fruits)[number];
+export declare function setup({ component: SelectionChipGroup, decorators: { withValueOnChange, withResizableBox }, }: SetupStoriesOptions<{
+    decorators: 'withValueOnChange' | 'withResizableBox';
+}>): {
+    meta: {
+        component: any;
+        args: {
+            value: {
+                id: string;
+                name: string;
+            }[];
+            getOptionId: string;
+            getOptionName: string;
+            label: string;
+            chipRemoveLabel: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Default: {};
+    Disabled: {
+        args: {
+            isDisabled: boolean;
+        };
+    };
+    IndividuallyDisabled: {
+        args: {
+            getChipProps: (option: FruitOption) => {
+                isDisabled: boolean;
+            };
+        };
+    };
+    Empty: {
+        args: {
+            value: never[];
+        };
+    };
+    ConstrainedSpace: {
+        decorators: ((story: any, context: any) => any)[];
+        args: {
+            value: ({
+                id: string;
+                name: string;
+            } | {
+                name: string;
+            })[];
+        };
+    };
+};
+export {};