@lumx/core 4.3.2-alpha.4 → 4.3.2-alpha.40

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

@@ -0,0 +1,52 @@
+import type { CommonRef, GenericProps, HasClassName, HasTheme, LumxClassName } from '../../types';
+import { Size } from '../../constants';
+/**
+ * Progress sizes.
+ */
+export type ProgressCircularSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm'>;
+/**
+ * Defines the props of the component.
+ */
+export interface ProgressCircularProps extends HasTheme, HasClassName {
+    /**
+     * Progress circular size.
+     */
+    size?: ProgressCircularSize;
+    /**
+     * Progress display type (inline or block).
+     * @default 'block'
+     */
+    display?: 'inline' | 'block';
+    /** Component ref */
+    ref?: CommonRef;
+    /** additional props for the svg */
+    svgProps?: GenericProps;
+    /** additional props for the circle */
+    circleProps?: GenericProps;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "ProgressCircular";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const block: {
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+}, element: {
+    (elem: string, additionalClasses: import("classnames/types").ClassValue[]): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+};
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ProgressCircularProps>;
+/**
+ * ProgressCircular component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const ProgressCircular: (props: ProgressCircularProps) => import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component, }: SetupStoriesOptions<{
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        args: Partial<import(".").ProgressLinearProps>;
+    };
+    /** Default progress linear */
+    Default: {};
+};

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

@@ -0,0 +1,11 @@
+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;
+    element: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

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

@@ -0,0 +1,27 @@
+import type { CommonRef, HasClassName, HasTheme, LumxClassName } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface ProgressLinearProps extends HasTheme, HasClassName {
+    /** Component ref */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "ProgressLinear";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ProgressLinearProps>;
+/**
+ * ProgressLinear component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const ProgressLinear: (props: ProgressLinearProps) => import("react").JSX.Element;

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

@@ -0,0 +1,77 @@
+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;
+            handleChange?: ((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

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

@@ -0,0 +1,45 @@
+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. */
+    handleChange?(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

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

@@ -0,0 +1,14 @@
+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/Skeleton/SkeletonCircle.d.ts

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+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';