@lumx/core 4.3.2-alpha.16 → 4.3.2-alpha.18

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

@@ -1,75 +0,0 @@
-import { Kind } from '../../constants';
-import type { JSXElement, LumxClassName, HasClassName, CommonRef } from '../../types';
-/**
- * Defines the props of the component.
- */
-export interface MessageProps extends HasClassName {
-    /** Content. */
-    children?: JSXElement;
-    /** Whether the message has a background or not. */
-    hasBackground?: boolean;
-    /** Message variant. */
-    kind?: Kind;
-    /** Message custom icon SVG path. */
-    icon?: string;
-    /** Reference to the message container element. */
-    ref?: CommonRef;
-    /**
-     * Displays a close button.
-     *
-     * NB: only available if `kind === 'info' && hasBackground === true`
-     */
-    closeButtonProps?: {
-        /** The callback called when the button is clicked */
-        onClick: () => void;
-        /** The label of the close button. */
-        label: string;
-    };
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "Message";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-export declare const block: {
-    (additionalClasses: string[]): string;
-    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
-}, element: {
-    (elem: string, additionalClasses: string[]): string;
-    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
-};
-/**
- * Associative map from message kind to color and icon.
- */
-export declare const CONFIG: {
-    error: {
-        color: "red";
-        icon: string;
-    };
-    info: {
-        color: "blue";
-        icon: string;
-    };
-    success: {
-        color: "green";
-        icon: string;
-    };
-    warning: {
-        color: "yellow";
-        icon: string;
-    };
-};
-/**
- * Message component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const Message: {
-    (props: MessageProps): import("react").JSX.Element;
-    displayName: string;
-    className: "lumx-message";
-};

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

@@ -1,77 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup RadioButton 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, render, decorators: { withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations';
-}>): {
-    meta: {
-        component: any;
-        render: 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;
-            onChange?: ((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 radio button */
-    Default: {};
-    /** With label and helper */
-    LabelAndHelper: {
-        argTypes: {
-            label: {
-                control: string;
-            };
-            helper: {
-                control: string;
-            };
-        };
-        args: {
-            label: string;
-            helper: 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/RadioButton/Tests.d.ts

@@ -1,15 +0,0 @@
-import { SetupOptions } from '../../../testing';
-import { RadioButtonProps } from '.';
-type SetupProps = Partial<RadioButtonProps>;
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-export declare const setup: (propsOverride: SetupProps | undefined, { render, ...options }: SetupOptions<RadioButtonProps>) => {
-    radioButton: HTMLElement;
-    helper: HTMLElement | null;
-    label: HTMLElement | null;
-    input: HTMLElement;
-    props: RadioButtonProps;
-};
-declare const _default: (renderOptions: SetupOptions<RadioButtonProps>) => void;
-export default _default;

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

@@ -1,45 +0,0 @@
-import type { JSXElement, LumxClassName, HasTheme, HasAriaDisabled, HasDisabled, HasClassName, HasChecked, CommonRef } from '../../types';
-/**
- * Defines the props of the component.
- */
-export interface RadioButtonProps extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked {
-    /** Helper text. */
-    helper?: string;
-    /** Native input id property. */
-    id?: string;
-    /** Label content. */
-    label?: JSXElement;
-    /** Native input name property. */
-    name?: string;
-    /** Native input value property. */
-    value?: string;
-    /** optional props for input */
-    inputProps?: Record<string, any>;
-    /** Native input ref. */
-    inputRef?: CommonRef;
-    /** Native input id. */
-    inputId: string;
-    /** On change callback. */
-    onChange?(value?: string, name?: string, event?: any): void;
-    /** reference to the root element */
-    ref?: CommonRef;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "RadioButton";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<RadioButtonProps>;
-/**
- * RadioButton component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const RadioButton: (props: RadioButtonProps) => import("react").JSX.Element;

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

@@ -1,14 +0,0 @@
-import { RawClickableProps } from '.';
-import { SetupOptions } from '../../../testing';
-type SetupProps = Partial<RawClickableProps<any>>;
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-export declare const setup: (propsOverride: SetupProps | undefined, { render, screen, ...options }: SetupOptions<RawClickableProps<any>>) => {
-    element: HTMLElement;
-    props: Omit<any, "ref"> & {
-        as?: any;
-    } & Record<string, unknown> & import(".").BaseClickableProps;
-};
-declare const _default: (renderOptions: SetupOptions<RawClickableProps<any>>) => void;
-export default _default;

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

@@ -1,13 +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;
-    onClick?: (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/Skeleton/SkeletonCircle.d.ts

@@ -1,32 +0,0 @@
-import type { LumxClassName, HasTheme, HasClassName, CommonRef } from '../../types';
-import type { GlobalSize, ColorPalette } from '../../constants';
-/**
- * Defines the props of the component.
- */
-export interface SkeletonCircleProps extends HasTheme, HasClassName {
-    /** Size variant. */
-    size: GlobalSize;
-    /** The color of the skeleton. */
-    color?: ColorPalette;
-    /** Reference to the root element. */
-    ref?: CommonRef;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "SkeletonCircle";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<SkeletonCircleProps>;
-/**
- * SkeletonCircle component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const SkeletonCircle: (props: SkeletonCircleProps) => import("react").JSX.Element;

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

@@ -1,45 +0,0 @@
-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, render, decorators: { withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations';
-}>): {
-    meta: {
-        component: any;
-        render: any;
-        argTypes: {
-            size: {
-                control: string;
-                options: import("../../constants").GlobalSize[];
-            };
-            color: {
-                control: string;
-                options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey")[];
-            };
-        };
-        args: Partial<SkeletonCircleProps>;
-    };
-    /** All sizes */
-    AllSize: {
-        argTypes: {
-            size: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** All colors */
-    AllColor: {
-        args: {
-            size: "m";
-        };
-        argTypes: {
-            color: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

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

@@ -1,12 +0,0 @@
-import { SetupOptions } from '../../../testing';
-import { SkeletonCircleProps } from './SkeletonCircle';
-type SetupProps = Partial<SkeletonCircleProps>;
-/**
- * Mounts the SkeletonCircle component and returns common DOM elements needed in tests.
- */
-export declare const setup: (propsOverride: SetupProps | undefined, { render, ...options }: SetupOptions<SkeletonCircleProps>) => {
-    skeletonCircle: HTMLElement;
-    props: SkeletonCircleProps;
-};
-declare const _default: (renderOptions: SetupOptions<SkeletonCircleProps>) => void;
-export default _default;

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

@@ -1,47 +0,0 @@
-import type { LumxClassName, HasTheme, HasClassName, CommonRef, ValueOf } from '../../types';
-import type { GlobalSize, ColorPalette, AspectRatio } from '../../constants';
-/**
- * Skeleton variants.
- */
-export declare const SkeletonRectangleVariant: {
-    readonly squared: "squared";
-    readonly rounded: "rounded";
-    readonly pill: "pill";
-};
-export type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;
-/**
- * Defines the props of the component.
- */
-export interface SkeletonRectangleProps extends HasTheme, HasClassName {
-    /** Aspect ratio (use with width and not height). */
-    aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;
-    /** Height size. */
-    height?: GlobalSize;
-    /** Border variant. */
-    variant?: SkeletonRectangleVariant;
-    /** Width size. */
-    width?: GlobalSize;
-    /** The color of the skeleton. */
-    color?: ColorPalette;
-    /** Reference to the root element. */
-    ref?: CommonRef;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "SkeletonRectangle";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<SkeletonRectangleProps>;
-/**
- * SkeletonRectangle component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const SkeletonRectangle: (props: SkeletonRectangleProps) => import("react").JSX.Element;

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

@@ -1,87 +0,0 @@
-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, render, decorators: { withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations';
-}>): {
-    meta: {
-        component: any;
-        render: any;
-        argTypes: {
-            width: {
-                control: string;
-                options: (import("../../constants").GlobalSize | undefined)[];
-            };
-            height: {
-                control: string;
-                options: (import("../../constants").GlobalSize | undefined)[];
-            };
-            aspectRatio: {
-                control: string;
-                options: ("horizontal" | "vertical" | "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>;
-    };
-    /** All sizes */
-    AllSize: {
-        argTypes: {
-            width: {
-                control: boolean;
-            };
-            height: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** All ratios (for a fixed width) */
-    AllRatios: {
-        args: {
-            width: "xl";
-        };
-        argTypes: {
-            aspectRatio: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** All variants */
-    AllVariants: {
-        args: {
-            width: "l";
-            height: "m";
-        };
-        argTypes: {
-            variant: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** All colors */
-    AllColors: {
-        args: {
-            width: "l";
-            height: "m";
-        };
-        argTypes: {
-            color: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

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

@@ -1,13 +0,0 @@
-import { SetupOptions } from '../../../testing';
-import { SkeletonRectangleProps } from './SkeletonRectangle';
-type SetupProps = Partial<SkeletonRectangleProps>;
-/**
- * Mounts the SkeletonRectangle component and returns common DOM elements needed in tests.
- */
-export declare const setup: (propsOverride: SetupProps | undefined, { render, ...options }: SetupOptions<SkeletonRectangleProps>) => {
-    skeletonRectangle: HTMLElement;
-    inner: HTMLElement | null;
-    props: SkeletonRectangleProps;
-};
-declare const _default: (renderOptions: SetupOptions<SkeletonRectangleProps>) => void;
-export default _default;

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

@@ -1,37 +0,0 @@
-import type { CSSProperties } from 'react';
-import type { LumxClassName, HasTheme, HasClassName, CommonRef } from '../../types';
-import type { ColorPalette, TypographyInterface } from '../../constants';
-/**
- * Defines the props of the component.
- */
-export interface SkeletonTypographyProps extends HasTheme, HasClassName {
-    /** Typography variant. */
-    typography: TypographyInterface;
-    /** Width CSS property. */
-    width?: CSSProperties['width'];
-    /** The color of the skeleton. */
-    color?: ColorPalette;
-    /** Reference to the root element. */
-    ref?: CommonRef;
-    /** Style object. */
-    style?: CSSProperties;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "SkeletonTypography";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<SkeletonTypographyProps>;
-/**
- * SkeletonTypography component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const SkeletonTypography: (props: SkeletonTypographyProps) => import("react").JSX.Element;

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

@@ -1,40 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup SkeletonTypography stories for a specific framework (React or Vue).
- */
-export declare function setup({ component, render, }: SetupStoriesOptions<{
-    decorators?: never;
-}>): {
-    meta: {
-        component: any;
-        render: any;
-        argTypes: {
-            typography: {
-                control: string;
-                options: ("overline" | "caption" | "body1" | "body2" | "subtitle1" | "subtitle2" | "title" | "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;
-        };
-    };
-    /** Text Typography */
-    TextTypography: {
-        args: {
-            typography: "body1";
-        };
-    };
-};

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

@@ -1,13 +0,0 @@
-import { SetupOptions } from '../../../testing';
-import { SkeletonTypographyProps } from './SkeletonTypography';
-type SetupProps = Partial<SkeletonTypographyProps>;
-/**
- * Mounts the SkeletonTypography component and returns common DOM elements needed in tests.
- */
-export declare const setup: (propsOverride: SetupProps | undefined, { render, ...options }: SetupOptions<SkeletonTypographyProps>) => {
-    skeletonTypography: HTMLElement;
-    inner: HTMLElement | null;
-    props: SkeletonTypographyProps;
-};
-declare const _default: (renderOptions: SetupOptions<SkeletonTypographyProps>) => void;
-export default _default;

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

@@ -1,3 +0,0 @@
-export { SkeletonCircle, type SkeletonCircleProps, COMPONENT_NAME as SKELETON_CIRCLE_COMPONENT_NAME, CLASSNAME as SKELETON_CIRCLE_CLASSNAME, DEFAULT_PROPS as SKELETON_CIRCLE_DEFAULT_PROPS, } from './SkeletonCircle';
-export { SkeletonRectangle, type SkeletonRectangleProps, SkeletonRectangleVariant, COMPONENT_NAME as SKELETON_RECTANGLE_COMPONENT_NAME, CLASSNAME as SKELETON_RECTANGLE_CLASSNAME, DEFAULT_PROPS as SKELETON_RECTANGLE_DEFAULT_PROPS, } from './SkeletonRectangle';
-export { SkeletonTypography, type SkeletonTypographyProps, COMPONENT_NAME as SKELETON_TYPOGRAPHY_COMPONENT_NAME, CLASSNAME as SKELETON_TYPOGRAPHY_CLASSNAME, DEFAULT_PROPS as SKELETON_TYPOGRAPHY_DEFAULT_PROPS, } from './SkeletonTypography';

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

@@ -1,94 +0,0 @@
-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, render, decorators: { withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations';
-}>): {
-    meta: {
-        component: any;
-        render: any;
-        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;
-            onChange?: ((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)[];
-    };
-};