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

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

@@ -1,14 +0,0 @@
-import { CommonRef, HasPolymorphicAs, HasRequiredLinkHref, HasDisabled, JSXElement, ElementType, HasAriaDisabled } from '../../types';
-export type ClickableElement = 'a' | 'button' | ElementType;
-export interface BaseClickableProps extends HasDisabled, HasAriaDisabled {
-    children?: JSXElement;
-    handleClick?: (event?: any) => void;
-    handleKeyPress?: (event?: any) => void;
-    ref?: CommonRef;
-}
-export type RawClickableProps<E extends ClickableElement> = HasPolymorphicAs<E> & HasRequiredLinkHref<E> & BaseClickableProps;
-/**
- * Render clickable element (link, button or custom element)
- * (also does some basic disabled state handling)
- */
-export declare const RawClickable: <E extends ClickableElement>(props: RawClickableProps<E>) => import("react").JSX.Element;

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

@@ -1,135 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-export declare const FRUITS: {
-    category: string;
-    categoryIcon: string;
-    id: string;
-    name: string;
-    icon: string;
-    description: string;
-}[];
-export type Fruit = (typeof FRUITS)[number];
-/**
- * Setup SelectButton stories for a specific framework (React or Vue).
- */
-export declare function setup({ components: { SelectButton }, decorators: { withValueOnChange, withCombinations }, }: SetupStoriesOptions<{
-    components: {
-        SelectButton: any;
-    };
-    decorators: 'withValueOnChange' | 'withCombinations';
-}>): {
-    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: {
-                category: string;
-                categoryIcon: string;
-                id: string;
-                name: string;
-                icon: string;
-                description: string;
-            };
-        };
-        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;
-    };
-    WithDescriptions: {
-        args: {
-            value: undefined;
-        };
-        decorators: ((story: any, context: any) => any)[];
-        render: ({ value, onChange }: any) => import("react").JSX.Element;
-    };
-    Disabled: {
-        args: {
-            value: {
-                category: string;
-                categoryIcon: string;
-                id: string;
-                name: string;
-                icon: string;
-                description: string;
-            };
-        };
-        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;
-    };
-    MultipleSelection: {
-        args: {
-            value: never[];
-        };
-        decorators: ((story: any, context: any) => any)[];
-        render: ({ value, onChange }: any) => import("react").JSX.Element;
-    };
-    MultipleWithPreselected: {
-        args: {
-            value: {
-                category: string;
-                categoryIcon: string;
-                id: string;
-                name: string;
-                icon: string;
-                description: string;
-            }[];
-        };
-        decorators: ((story: any, context: any) => 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;
-    };
-    LabelDisplayModes: {
-        play: () => void;
-        argTypes: {
-            labelDisplayMode: {
-                control: boolean;
-            };
-            value: {
-                control: boolean;
-            };
-        };
-        render: ({ value, labelDisplayMode }: any) => import("react").JSX.Element;
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

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

@@ -1,45 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup SelectButton test stories
- */
-export declare function setup({ components: { SelectButton }, renderWithState, }: SetupStoriesOptions<{
-    components: {
-        SelectButton: any;
-    };
-    decorators: 'withValueOnChange';
-}> & {
-    renderWithState: (template: (props: any) => any) => any;
-}): {
-    meta: {
-        component: any;
-        tags: string[];
-        parameters: {
-            chromatic: {
-                disable: boolean;
-            };
-        };
-    };
-    ClickOutsideCloses: {
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            value: undefined;
-            onChange: () => void;
-        };
-        play: ({ canvasElement }: any) => Promise<void>;
-    };
-    SelectionUpdates: {
-        render: () => any;
-        play: ({ canvasElement }: any) => Promise<void>;
-    };
-    WithInfiniteScroll: {
-        play({ canvasElement }: any): Promise<void>;
-    };
-    TypeaheadWhileOpen: {
-        render: () => any;
-        play: ({ canvasElement }: any) => Promise<void>;
-    };
-    TypeaheadFromClosed: {
-        render: () => any;
-        play: ({ canvasElement }: any) => Promise<void>;
-    };
-};

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

@@ -1,34 +0,0 @@
-export declare const TRANSLATIONS: {
-    loadingMessage: string;
-    emptyMessage: string;
-    errorMessage: string;
-    errorTryReloadMessage: string;
-    nbOptionMessage: (n: number) => string;
-};
-type RenderResult = {
-    unmount: () => void;
-    container: HTMLElement;
-};
-/**
- * Options to set up the SelectButton test suite.
- * Injected by the framework-specific test file (React or Vue).
- */
-export interface SelectButtonTestSetup {
-    components: {
-        SelectButton: any;
-        Combobox: any;
-    };
-    /**
-     * Render a SelectButton 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(SelectButton: any): {
-    defaultTemplate: (props: any) => import("react").JSX.Element;
-    multiTemplate: (props: any) => import("react").JSX.Element;
-};
-export default function selectButtonTests({ components, renderWithState }: SelectButtonTestSetup): void;
-export {};

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

@@ -1,88 +0,0 @@
-import type { LumxClassName } from '../../types';
-import type { ComboboxButtonLabelDisplayMode } from '../Combobox/ComboboxButton';
-import { BaseSelectComponents, BaseSelectProps, SelectButtonTranslations, SelectListStatus } from '../../utils/select/types';
-/**
- * Defines the props for the core SelectButton template.
- */
-export interface SelectButtonProps<O> extends BaseSelectProps<O> {
-    /**
-     * Selected value (single mode) or selected values (multi mode).
-     * The wrapper layer chooses the shape; the core just renders names.
-     */
-    value?: O | O[];
-    /** Single or multiple selection */
-    selectionType?: 'single' | 'multiple';
-    /** Button label (used for ARIA and when no selection). */
-    label: string;
-    /** Controls how the label/value is displayed in the button. */
-    labelDisplayMode?: ComboboxButtonLabelDisplayMode;
-    /**
-     * Props forwarded to Combobox.Button (button appearance, emphasis, size, etc.).
-     * Pass `renderButton` here to provide a custom button renderer — see
-     * `ComboboxButtonProps.renderButton`. Framework wrappers are responsible for
-     * defaulting any visual affordance (e.g. the dropdown chevron `rightIcon`).
-     */
-    buttonProps?: Record<string, any>;
-    /** Props forwarded to Combobox.Popover. */
-    popoverProps?: Record<string, any>;
-    /** Props forwarded to Combobox.List (e.g. ref). */
-    listProps?: Record<string, any>;
-    /** Callback on option selected (receives option id string). */
-    handleSelect?: (selectedOption: {
-        value: string;
-    }) => void;
-    /**
-     * 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?: SelectListStatus;
-    /** Optional translations for screen-reader announcements (loading/empty/error/option count). */
-    translations?: SelectButtonTranslations;
-    /** Callback fired when the dropdown open state changes. */
-    onOpen?: (isOpen: boolean) => void;
-    /**
-     * 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;
-}
-/**
- * Injected framework-specific components for SelectButton rendering.
- */
-export type SelectButtonComponents = BaseSelectComponents;
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "SelectButton";
-/**
- * Component default class name.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: {
-    readonly selectionType: "single";
-};
-/**
- * SelectButton core template.
- * Renders a Combobox with a button trigger and a dropdown list of options.
- *
- * 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 SelectButton: {
-    <O>(props: SelectButtonProps<O>, { Combobox, InfiniteScroll }: SelectButtonComponents): import("react").JSX.Element;
-    displayName: string;
-    className: "lumx-select-button";
-};

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

@@ -1,192 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,87 +0,0 @@
-import type { JSXElement, LumxClassName } from '../../types';
-import { BaseSelectComponents, BaseSelectProps, SelectListStatus } 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?: SelectListStatus;
-    /** 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";
-};