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

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

@@ -0,0 +1,192 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare const FRUITS: {
+    id: string;
+    name: string;
+    icon: string;
+    category: string;
+    categoryIcon: string;
+    description: string;
+}[];
+export type Fruit = (typeof FRUITS)[number];
+/**
+ * Setup SelectTextField stories for a specific framework (React or Vue).
+ */
+export declare function setup({ components: { SelectTextField }, decorators: { withValueOnChange }, }: SetupStoriesOptions<{
+    components: {
+        SelectTextField: any;
+    };
+    decorators: 'withValueOnChange';
+}>): {
+    meta: {
+        component: any;
+        play({ canvas }: any): Promise<void>;
+    };
+    Default: {
+        args: {
+            value: undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    WithSelectedValue: {
+        args: {
+            value: {
+                id: string;
+                name: string;
+                icon: string;
+                category: string;
+                categoryIcon: string;
+                description: string;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    NoClearButton: {
+        args: {
+            value: {
+                id: string;
+                name: string;
+                icon: string;
+                category: string;
+                categoryIcon: string;
+                description: string;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    WithDescriptions: {
+        args: {
+            value: undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    WithSections: {
+        args: {
+            value: undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    WithIcon: {
+        args: {
+            value: undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    Disabled: {
+        args: {
+            value: {
+                id: string;
+                name: string;
+                icon: string;
+                category: string;
+                categoryIcon: string;
+                description: string;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+        play: any;
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    WithError: {
+        args: {
+            value: undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    WithHelper: {
+        args: {
+            value: undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    MultipleSelection: {
+        args: {
+            value: never[];
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    MultipleWithPreselected: {
+        args: {
+            value: {
+                id: string;
+                name: string;
+                icon: string;
+                category: string;
+                categoryIcon: string;
+                description: string;
+            }[];
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    MultipleWithManyChips: {
+        args: {
+            value: ({
+                id: string;
+                name: string;
+                icon: string;
+                category: string;
+                categoryIcon: string;
+                description: string;
+            } | {
+                id: string;
+                name: string;
+                category: string;
+            })[];
+        };
+        decorators: ((story: any, context: any) => any)[];
+        play: any;
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    MultipleDisabled: {
+        args: {
+            value: {
+                id: string;
+                name: string;
+                icon: string;
+                category: string;
+                categoryIcon: string;
+                description: string;
+            }[];
+        };
+        decorators: ((story: any, context: any) => any)[];
+        play: any;
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    WithNbOptionMessage: {
+        args: {
+            value: undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    Loading: {
+        args: {
+            value: undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    LoadingMore: {
+        args: {
+            value: undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+    ErrorState: {
+        args: {
+            value: undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: any) => import("react").JSX.Element;
+    };
+};

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

@@ -0,0 +1,39 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup test stories
+ */
+export declare function setup({ components: { SelectTextField }, }: SetupStoriesOptions<{
+    components: {
+        SelectTextField: any;
+        Combobox?: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        tags: string[];
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+    ClickOutsideCloses: {
+        render: (args: any) => import("react").JSX.Element;
+        play({ canvas }: any): Promise<void>;
+    };
+    BlurResetsToSelectedValue: {
+        render: (args: any) => import("react").JSX.Element;
+        play({ canvas }: any): Promise<void>;
+    };
+    BlurResetsToEmpty: {
+        render: (args: any) => import("react").JSX.Element;
+        play({ canvas }: any): Promise<void>;
+    };
+    MultiBlurResetsSearch: {
+        render: (args: any) => import("react").JSX.Element;
+        play({ canvas }: any): Promise<void>;
+    };
+    WithInfiniteScroll: {
+        play({ canvas }: any): Promise<void>;
+    };
+};

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

@@ -0,0 +1,38 @@
+export declare const TRANSLATIONS: {
+    clearLabel: string;
+    showSuggestionsLabel: string;
+};
+export declare const MULTI_TRANSLATIONS: {
+    chipGroupLabel: string;
+    chipRemoveLabel: string;
+    clearLabel: string;
+    showSuggestionsLabel: string;
+};
+type RenderResult = {
+    unmount: () => void;
+    container: HTMLElement;
+};
+/**
+ * Options to set up the SelectTextField test suite.
+ * Injected by the framework-specific test file (React or Vue).
+ */
+export interface SelectTextFieldTestSetup {
+    components: {
+        SelectTextField: any;
+        Combobox: any;
+    };
+    /**
+     * Render a SelectTextField template with controlled state management.
+     *
+     * @param template    JSX render function receiving `{ value, onChange, ... }`.
+     * @param initialArgs Initial props (value, spies, etc.).
+     */
+    renderWithState: (template: (props: any) => any, initialArgs?: Record<string, any>) => RenderResult;
+}
+export declare function createTemplates(SelectTextField: any): {
+    defaultTemplate: (props: any) => import("react").JSX.Element;
+    searchTemplate: (props: any) => import("react").JSX.Element;
+    multiTemplate: (props: any) => import("react").JSX.Element;
+};
+export default function selectTextFieldTests({ components, renderWithState }: SelectTextFieldTestSetup): void;
+export {};

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

@@ -0,0 +1,87 @@
+import type { JSXElement, LumxClassName } from '../../types';
+import { BaseSelectComponents, BaseSelectProps, SelectTextFieldStatus } from '../../utils/select/types';
+/**
+ * Defines the props for the core SelectTextField template.
+ */
+export interface SelectTextFieldProps<O = any> extends BaseSelectProps<O> {
+    /** Selected option (single) or options (multiple) — for marking options as selected. */
+    selected?: O | O[];
+    /** Field label (required). Also used as aria-label for the listbox. */
+    label: string;
+    /** Whether the listbox supports multiple selection. */
+    isMultiselectable?: boolean;
+    /** Props forwarded to Combobox.Input. */
+    inputProps?: Record<string, any>;
+    /** Props forwarded to Combobox.Popover. */
+    popoverProps?: Record<string, any>;
+    /** Props forwarded to Combobox.List (e.g. ref). */
+    listProps?: Record<string, any>;
+    /**
+     * Status of the dropdown list.
+     * - `'idle'` — Default state, no loading indicators.
+     * - `'loading'` — Full loading: shows skeleton placeholders, hides real options.
+     * - `'loadingMore'` — Paginated loading: appends a skeleton after existing options.
+     * - `'error'` — Error state: shows an error message in the dropdown.
+     * @default 'idle'
+     */
+    listStatus?: SelectTextFieldStatus;
+    /** Screen reader loading announcement (e.g. "Loading…"). */
+    loadingMessage?: string;
+    /**
+     * Message to display when the list has no visible options.
+     * Can be a plain string or a function receiving the current input value (for dynamic messages).
+     * When omitted, the empty state is not shown.
+     */
+    emptyMessage?: string | ((inputValue: string) => string);
+    /**
+     * Message callback to display the number of available options.
+     * Called with the current visible option count and should return a human-readable string.
+     * Displayed when the combobox is open, not empty, not loading, and not in error.
+     * When omitted, no option count message is shown.
+     */
+    nbOptionMessage?: (optionsLength: number) => string;
+    /** Error title displayed in the dropdown (e.g. "Failed to load"). */
+    errorMessage?: string;
+    /** Secondary error message (e.g. "Please try again"). */
+    errorTryReloadMessage?: string;
+    /** Callback fired when the dropdown open state changes. */
+    onOpen?: (isOpen: boolean) => void;
+    /** Chips element rendered inside the input (multiple selection). */
+    chips?: JSXElement;
+    /** Content to render before the options list. */
+    beforeOptions?: JSXElement;
+    /** Content to render after options. */
+    afterOptions?: JSXElement;
+    /**
+     * Callback fired to load more items (infinite scroll).
+     * When provided together with an injected `InfiniteScroll` component, an invisible
+     * sentinel element is rendered after the options to trigger loading via IntersectionObserver.
+     */
+    onLoadMore?: () => void;
+    /** IntersectionObserver options forwarded to the InfiniteScroll sentinel. */
+    infiniteScrollOptions?: IntersectionObserverInit;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "SelectTextField";
+/**
+ * Component default class name.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * SelectTextField core template.
+ * Renders a Combobox with a text input trigger and a dropdown list of options.
+ * Supports search/filter, single selection, and multiple selection with chips.
+ *
+ * Framework-specific components are passed as a second argument by the React/Vue wrappers.
+ *
+ * @param props      Component props.
+ * @param components Injected framework-specific components.
+ * @return JSX element.
+ */
+export declare const SelectTextField: {
+    (props: SelectTextFieldProps, { Combobox, InfiniteScroll }: BaseSelectComponents): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-select-text-field";
+};

package/js/components/Skeleton/SkeletonCircleStories.d.ts

@@ -0,0 +1,43 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import type { SkeletonCircleProps } from './SkeletonCircle';
+/**
+ * Setup SkeletonCircle stories for a specific framework (React or Vue).
+ */
+export declare function setup({ component: SkeletonCircle, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            size: {
+                control: string;
+                options: import("../../constants").GlobalSize[];
+            };
+            color: {
+                control: string;
+                options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey")[];
+            };
+        };
+        args: Partial<SkeletonCircleProps>;
+    };
+    AllSize: {
+        argTypes: {
+            size: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    AllColor: {
+        args: {
+            size: "m";
+        };
+        argTypes: {
+            color: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/Skeleton/SkeletonRectangleStories.d.ts

@@ -0,0 +1,83 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { SkeletonRectangleVariant } from './SkeletonRectangle';
+import type { SkeletonRectangleProps } from './SkeletonRectangle';
+/**
+ * Setup SkeletonRectangle stories for a specific framework (React or Vue).
+ */
+export declare function setup({ component: SkeletonRectangle, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            width: {
+                control: string;
+                options: (import("../../constants").GlobalSize | undefined)[];
+            };
+            height: {
+                control: string;
+                options: (import("../../constants").GlobalSize | undefined)[];
+            };
+            aspectRatio: {
+                control: string;
+                options: ("vertical" | "horizontal" | "wide" | "square" | undefined)[];
+            };
+            color: {
+                control: string;
+                options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey")[];
+            };
+            variant: {
+                control: string;
+                options: (SkeletonRectangleVariant | undefined)[];
+            };
+        };
+        args: Partial<SkeletonRectangleProps>;
+    };
+    AllSize: {
+        argTypes: {
+            width: {
+                control: boolean;
+            };
+            height: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    AllRatios: {
+        args: {
+            width: "xl";
+        };
+        argTypes: {
+            aspectRatio: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    AllVariants: {
+        args: {
+            width: "l";
+            height: "m";
+        };
+        argTypes: {
+            variant: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    AllColors: {
+        args: {
+            width: "l";
+            height: "m";
+        };
+        argTypes: {
+            color: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/Skeleton/SkeletonTypographyStories.d.ts

@@ -0,0 +1,53 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup SkeletonTypography stories for a specific framework (React or Vue).
+ */
+export declare function setup({ component: SkeletonTypography, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            typography: {
+                control: string;
+                options: ("caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1")[];
+            };
+            color: {
+                control: string;
+                options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey")[];
+            };
+            width: {
+                control: string;
+            };
+        };
+        args: {
+            typography: "body1";
+            width?: import("csstype").Property.Width<string | number> | undefined;
+            color?: import("../../constants").ColorPalette | undefined;
+            ref?: import("../../types").CommonRef;
+            style?: import("react").CSSProperties | undefined;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+        };
+    };
+    TextTypography: {
+        args: {
+            typography: "body1";
+        };
+    };
+    WidthVariations: {
+        render: () => import("react").JSX.Element;
+    };
+    AllColors: {
+        argTypes: {
+            color: {
+                control: boolean;
+            };
+        };
+        args: {
+            width: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,94 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Switch 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: Switch, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            onChange: {
+                action: boolean;
+            };
+            name: {
+                control: boolean;
+            };
+            value: {
+                control: boolean;
+            };
+            position: {
+                control: string;
+                options: string[];
+            };
+        };
+        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;
+            position?: "left" | "right" | 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 switch */
+    Default: {};
+    /** With label and helper */
+    LabelAndHelper: {
+        argTypes: {
+            label: {
+                control: string;
+            };
+            helper: {
+                control: string;
+            };
+        };
+        args: {
+            label: string;
+            helper: string;
+        };
+    };
+    /** With position right */
+    PositionRight: {
+        argTypes: {
+            position: {
+                control: boolean;
+            };
+        };
+        args: {
+            label: string;
+            position: 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/Table/Stories.d.ts

@@ -0,0 +1,30 @@
+import type { SetupStoriesOptions } from '../../../stories/types';
+export declare function setup({ component: Table, components: { TableBody, TableCell, TableHeader, TableRow }, }: SetupStoriesOptions<{
+    components: {
+        TableBody: any;
+        TableCell: any;
+        TableHeader: any;
+        TableRow: any;
+    };
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        args: {
+            hasBefore: boolean;
+            hasDividers: boolean;
+            children?: import("react").ReactNode;
+            ref?: import("../../types").CommonRef;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+        };
+    };
+    /** Simple table */
+    Default: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    /** Table with header */
+    WithHeader: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+};

package/js/components/Table/TableBody.d.ts

@@ -0,0 +1,25 @@
+import type { JSXElement, HasClassName, CommonRef } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface TableBodyProps extends HasClassName {
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "TableBody";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: string;
+/**
+ * TableBody component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+export declare const TableBody: (props: TableBodyProps) => import("react").JSX.Element;