@lumx/core 4.3.2-alpha.3 → 4.3.2-alpha.30

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. */
+    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

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

@@ -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';

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

@@ -0,0 +1,94 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Switch stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific render functions or args can be injected via `overrides`.
+ */
+export declare function setup({ component, 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)[];
+    };
+};

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

@@ -0,0 +1,15 @@
+import { SetupOptions } from '../../../testing';
+import { SwitchProps } from '.';
+type SetupProps = Partial<SwitchProps>;
+/**
+ * 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<SwitchProps>) => {
+    switchWrapper: HTMLElement;
+    helper: HTMLElement | null;
+    label: HTMLElement | null;
+    input: HTMLElement;
+    props: SwitchProps;
+};
+declare const _default: (renderOptions: SetupOptions<SwitchProps>) => void;
+export default _default;

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

@@ -0,0 +1,47 @@
+import type { JSXElement, LumxClassName, HasTheme, HasAriaDisabled, HasDisabled, HasClassName, HasChecked, CommonRef } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface SwitchProps extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked {
+    /** Helper text. */
+    helper?: string;
+    /** Native input id property. */
+    id?: string;
+    /** Label text. */
+    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?(isChecked: boolean, value?: string, name?: string, event?: any): void;
+    /** Position of the switch relative to the label. */
+    position?: 'left' | 'right';
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Switch";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<SwitchProps>;
+/**
+ * Switch component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Switch: (props: SwitchProps) => import("react").JSX.Element;

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

@@ -0,0 +1,25 @@
+import type { SetupStoriesOptions } from '../../../stories/types';
+export declare function setup({ component, overrides, }: SetupStoriesOptions<{
+    overrides: 'Default' | 'WithHeader';
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        args: {
+            hasBefore: boolean;
+            hasDividers: boolean;
+            children?: import("react").ReactNode;
+            ref?: import("../../types").CommonRef;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+        };
+    };
+    /** Simple table */
+    Default: {
+        [x: string]: any;
+    };
+    /** Table with header */
+    WithHeader: {
+        [x: string]: any;
+    };
+};

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

@@ -0,0 +1,55 @@
+import type { JSXElement, HasClassName, CommonRef, ValueOf } from '../../types';
+/**
+ * Table head cell sort order.
+ */
+export declare const ThOrder: {
+    readonly asc: "asc";
+    readonly desc: "desc";
+};
+export type ThOrder = ValueOf<typeof ThOrder>;
+/**
+ * Table cell variants.
+ */
+export declare const TableCellVariant: {
+    readonly body: "body";
+    readonly head: "head";
+};
+export type TableCellVariant = ValueOf<typeof TableCellVariant>;
+/**
+ * Defines the props of the component.
+ */
+export interface TableCellProps extends HasClassName {
+    /** Icon (SVG path).(thead only). */
+    icon?: string;
+    /** Whether the column is sortable or not (thead only). */
+    isSortable?: boolean;
+    /** Sort order displayed as icon (sortable thead only). */
+    sortOrder?: ThOrder;
+    /** Variant. */
+    variant?: TableCellVariant;
+    /** On header cell click callback. */
+    onHeaderClick?(): void;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "TableCell";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: string;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<TableCellProps>;
+/**
+ * TableCell component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+export declare const TableCell: (props: TableCellProps) => import("react").JSX.Element;