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

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

@@ -1,79 +0,0 @@
-import type { CSSProperties } from 'react';
-import type { RectSize } from '../../types';
-import { AspectRatio } from '../../constants';
-import type { FocusPoint, LoadingState } from './types';
-/**
- * Determines the loading state of an HTML image element.
- *
- * @param img - The HTML image element to check
- * @param event - Optional event (load or error) that triggered the state check
- * @returns The current loading state: 'hasError', 'isLoading', or 'isLoaded'
- */
-export declare function getImageLoadingState(img: HTMLImageElement | null | undefined, event?: Event): LoadingState;
-/**
- * Parameters for getting image size.
- */
-export interface GetImageSizeParams {
-    /** Image URL (used for validation) */
-    image?: string;
-    /** Aspect ratio setting */
-    aspectRatio?: AspectRatio;
-    /** Focus point (if not set, size calculation is skipped) */
-    focusPoint?: FocusPoint;
-    /** Width from imgProps */
-    width?: number;
-    /** Height from imgProps */
-    height?: number;
-    /** Image element (for getting natural dimensions) */
-    element?: HTMLImageElement;
-    /** Whether image is loaded */
-    isLoaded: boolean;
-}
-/**
- * Gets the natural image size from props or element.
- * Returns undefined if focus point is not applicable or size cannot be determined.
- *
- * @param params - Image size parameters
- * @returns Image size or undefined
- */
-export declare function getImageSize({ image, aspectRatio, focusPoint, width, height, element, isLoaded, }: GetImageSizeParams): RectSize | undefined;
-/**
- * Calculate shift position to center the focus point in the container.
- *
- * This function computes the percentage offset needed to position an image
- * such that a specific focus point on the image aligns with the center of
- * the container, taking into account the image's scale.
- *
- * @param params - Focus point shift calculation parameters
- * @returns Percentage shift (0-100) for CSS positioning
- */
-export declare function shiftPosition({ scale, focusPoint, imageSize, containerSize, }: {
-    scale: number;
-    focusPoint: number;
-    imageSize: number;
-    containerSize: number;
-}): number;
-/**
- * Parameters for calculating focus point style.
- */
-export interface CalculateFocusPointStyleParams {
-    /** Image URL */
-    image?: string;
-    /** Aspect ratio */
-    aspectRatio?: AspectRatio;
-    /** Focus point */
-    focusPoint?: FocusPoint;
-    /** Image element (for validation) */
-    element?: HTMLImageElement;
-    /** Natural image size */
-    imageSize?: RectSize;
-    /** Container size */
-    containerSize?: RectSize;
-}
-/**
- * Calculates CSS style for applying focus point positioning.
- *
- * @param params - Focus point style parameters
- * @returns CSS properties to apply to the image
- */
-export declare function calculateFocusPointStyle({ image, aspectRatio, focusPoint, element, imageSize, containerSize, }: CalculateFocusPointStyleParams): CSSProperties;

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

@@ -1,64 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup TimePickerField stories for a specific framework (React or Vue).
- *
- * The framework wrapper (`TimePickerField`) is fully self-contained — it builds
- * its option list from `step`/`minTime`/`maxTime`/`locale` internally — so each
- * story is just an args object with optional render override.
- */
-export declare function setup({ component: TimePickerField, decorators: { withValueOnChange, withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withValueOnChange' | 'withCombinations';
-}>): {
-    meta: {
-        component: any;
-        args: {
-            label: string;
-            locale: string;
-            translations: {
-                clearLabel: string;
-                showSuggestionsLabel: string;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    Default: {};
-    WithValue: {
-        args: {
-            value: Date;
-        };
-    };
-    Step15: {
-        args: {
-            step: number;
-        };
-    };
-    WithMinTime: {
-        args: {
-            minTime: Date;
-        };
-    };
-    WithMaxTime: {
-        args: {
-            maxTime: Date;
-        };
-    };
-    French: {
-        args: {
-            locale: string;
-            value: Date;
-        };
-    };
-    WithBoundsMode: {
-        args: {
-            value: Date;
-            maxTime: Date;
-            boundsMode: string;
-        };
-    };
-    Disabled: {
-        args: {
-            value: Date;
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

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

@@ -1,29 +0,0 @@
-export declare const TRANSLATIONS: {
-    clearLabel: string;
-    showSuggestionsLabel: string;
-};
-type RenderResult = {
-    unmount: () => void;
-    container: HTMLElement;
-};
-/**
- * Options to set up the TimePickerField test suite.
- * Injected by the framework-specific test file (React or Vue).
- */
-export interface TimePickerFieldTestSetup {
-    components: {
-        TimePickerField: any;
-    };
-    /**
-     * Render a TimePickerField 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(TimePickerField: any): {
-    defaultTemplate: (props: any) => import("react").JSX.Element;
-};
-export default function timePickerFieldTests({ components, renderWithState }: TimePickerFieldTestSetup): void;
-export {};

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

@@ -1,119 +0,0 @@
-import type { GenericProps, HasClassName, HasTheme, LumxClassName } from '../../types';
-import type { TimeOfDay } from '../../utils/time';
-import type { SelectTextFieldTranslations } from '../../utils/select/types';
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "TimePickerField";
-/**
- * Component default class name (BEM root).
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Default values for `TimePickerFieldWrapperProps`.
- */
-export declare const DEFAULT_PROPS: Partial<TimePickerFieldWrapperProps>;
-/**
- * Translations consumed by `TimePickerField` (forwarded as-is to the underlying
- * `SelectTextField`).
- */
-export type TimePickerFieldTranslations = Pick<SelectTextFieldTranslations, 'clearLabel' | 'showSuggestionsLabel'>;
-/**
- * Wrapper-level props shared by React and Vue `TimePickerField`.
- *
- * These represent the public API that framework wrappers expose to consumers
- * (as opposed to the core template props which use pre-computed `TimeOfDay` values).
- */
-export interface TimePickerFieldWrapperProps {
-    /**
-     * Currently selected time. Only the time-of-day component is consumed; the
-     * date part is preserved when emitting change.
-     */
-    value?: Date;
-    /**
-     * BCP-47 locale string (e.g. `'en-US'`, `'fr-FR'`).
-     */
-    locale?: string;
-    /**
-     * Minute interval between option entries.
-     */
-    step?: number;
-    /**
-     * Lower bound. Options strictly before this time remain **visible** in the
-     * dropdown but are rendered as disabled (cannot be picked). Typed input
-     * below this bound is snapped up to it on blur.
-     */
-    minTime?: Date;
-    /**
-     * Upper bound. Options strictly after this time remain **visible** in the
-     * dropdown but are rendered as disabled (cannot be picked). Typed input
-     * above this bound is snapped down to it on blur.
-     */
-    maxTime?: Date;
-    /**
-     * Controls how the time value interacts with `[minTime, maxTime]` bounds.
-     * Typed input is always snapped to bounds on blur.
-     * - `'enforce'`: additionally, the controlled `value` prop is proactively
-     *   clamped to bounds on mount and whenever bounds change, calling
-     *   `onChange` when adjusted.
-     * - `'on-blur'` (default): only blur snapping applies.
-     */
-    boundsMode?: 'on-blur' | 'enforce';
-    /**
-     * Translation labels for clear and show suggestions buttons.
-     */
-    translations: TimePickerFieldTranslations;
-}
-/**
- * `SelectTextField` props managed internally by the `TimePickerField` wrappers
- * (omitted from the inherited `SelectTextField` props in both React and Vue).
- */
-export type TimePickerFieldOwnedSelectProps = 'value' | 'listStatus' | 'translations' | 'options' | 'getOptionId' | 'getOptionName' | 'getOptionDescription' | 'getSectionId' | 'renderOption' | 'filter' | 'onBlur' | 'onSearch' | 'selectionType' | 'maxLength' | 'searchInputValue' | 'openOnFocus' | 'beforeOptions' | 'popoverProps';
-/**
- * Core props for the `TimePickerField` template.
- */
-export interface TimePickerFieldProps extends HasTheme, HasClassName, GenericProps {
-    /**
-     * Currently selected option. Resolve from the consumer's `Date` value via
-     * `value && timeList.find((e) => e.hour === value.getHours() && e.minute === value.getMinutes())`.
-     */
-    value?: TimeOfDay;
-    /** Time options (one entry per `step`-minute slot). */
-    options: TimeOfDay[];
-    /** Translation labels (clear button, show-suggestions toggle). */
-    translations: TimePickerFieldTranslations;
-    /** Called when the user picks (or clears) an option. */
-    handleChange(next: TimeOfDay | undefined): void;
-    /** Called as the user types — wrappers track this to resolve on blur. */
-    handleSearch(typed: string): void;
-    /** Called when the input loses focus — wrappers commit the typed value. */
-    handleBlur(): void;
-}
-/**
- * Injected framework-specific components for TimePickerField rendering.
- */
-export interface TimePickerFieldComponents {
-    /** Framework-specific `SelectTextField` wrapper. */
-    SelectTextField: any;
-    /** Framework-specific `SelectTextField.Option` sub-component (used to render disabled out-of-range entries). */
-    Option: any;
-}
-/**
- * `TimePickerField` core template.
- *
- * Renders a `SelectTextField<TimeOfDay>` with an option list built from
- * `buildTimeList`. Out-of-range options (strictly before `minTime` / after
- * `maxTime`) remain visible in the dropdown but are rendered as disabled.
- *
- * 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 TimePickerField: {
-    (props: TimePickerFieldProps, { SelectTextField, Option }: TimePickerFieldComponents): import("react").JSX.Element;
-    displayName: string;
-    className: "lumx-time-picker-field";
-};

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

@@ -1,29 +0,0 @@
-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/Tests.d.ts

@@ -1,12 +0,0 @@
-import { SetupOptions } from '../../../testing';
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
-    props: any;
-    toolbar: HTMLElement;
-    div: HTMLElement;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

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

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

@@ -1,72 +0,0 @@
-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/Tests.d.ts

@@ -1,11 +0,0 @@
-import { SetupOptions } from '../../../testing';
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
-    props: any;
-    tooltip: Element | null;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

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

@@ -1,10 +0,0 @@
-export declare const ARIA_LINK_MODES: readonly ["aria-describedby", "aria-labelledby"];
-/**
- * Arrow size (in pixel).
- */
-export declare const ARROW_SIZE = 8;
-/**
- * Make sure tooltip appear above popovers.
- * Hardcoded as POPOVER_ZINDEX (9999) + 1.
- */
-export declare const TOOLTIP_ZINDEX = 10000;

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

@@ -1,65 +0,0 @@
-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/Tooltip/tooltipOpenManager.d.ts

@@ -1,21 +0,0 @@
-export interface TooltipOpenManagerOptions {
-    /** Delay in millisecond to display the tooltip. */
-    delay?: number;
-    /** Callback to update the open state. */
-    onStateChange: (isOpen: boolean) => void;
-}
-export interface TooltipOpenManager {
-    /** Attach event listeners to the anchor element. */
-    attachAnchor(anchorElement: HTMLElement): void;
-    /** Attach event listeners to the popper element (for hover support). */
-    attachPopper(popperElement: HTMLElement | null): void;
-    /** Close the tooltip immediately (for escape key integration). */
-    close(): void;
-    /** Destroy the manager, clearing all timers and detaching events. */
-    destroy(): void;
-}
-/**
- * Framework-agnostic open/close state machine for tooltip.
- * Manages hover, touch, focus, timers, and escape key behavior.
- */
-export declare function createTooltipOpenManager(options: TooltipOpenManagerOptions): TooltipOpenManager;