@lumx/vue 4.3.2-alpha.2 → 4.3.2-alpha.20

package/CONTRIBUTING.md

@@ -41,18 +41,6 @@ Before opening a Pull Request, please see the Submission Guidelines below.
 You can request a new feature by submitting an issue to our [GitHub Repository](https://github.com/lumapps/design-system/issues).
 If you would like to implement a new feature then consider what kind of change it is, discuss it with us before hand in your issue, so that we can better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project.
 
-## <a name="create-a-new-react-component-"></a> Want to create a new React Component?
-
-The first step to create a new React component is to run:
-
-```
-yarn scaffold
-```
-
-This script will generate a TSX file for the component code, a TSX file for the component tests and an MDX file to demo this component.
-
-To export your component into the `@lumx/react` NPM package, you also have to make sure to update the `src/index.tsx` file.
-
 ## <a name="submission-guidelines"></a> Submission guidelines
 
 ### Submitting an issue

package/components/badge/Badge.d.ts

@@ -0,0 +1,13 @@
+import { BadgeProps as UIProps } from '@lumx/core/js/components/Badge';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type BadgeProps = VueToJSXProps<UIProps>;
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Badge: import('vue').DefineSetupFnComponent<BadgeProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default Badge;

package/components/badge/BadgeWrapper.d.ts

@@ -0,0 +1,8 @@
+import { BadgeWrapperProps as UIProps, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from '@lumx/core/js/components/Badge/BadgeWrapper';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type BadgeWrapperProps = VueToJSXProps<UIProps>;
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
+declare const BadgeWrapper: import('vue').DefineSetupFnComponent<BadgeWrapperProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default BadgeWrapper;

package/components/badge/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Badge, BadgeProps } from './Badge';
+import { default as BadgeWrapper, BadgeWrapperProps } from './BadgeWrapper';
+export { Badge, BadgeWrapper };
+export type { BadgeProps, BadgeWrapperProps };

package/components/button/Button.d.ts

@@ -13,7 +13,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
  */
 declare const Button: import('vue').DefineSetupFnComponent<ButtonProps, {
     click: (event: MouseEvent) => boolean;
-}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {
     onClick?: ((event: MouseEvent) => any) | undefined;

package/components/button/ButtonGroup.d.ts

@@ -7,7 +7,7 @@ export type ButtonGroupProps = VueToJSXProps<UIProps>;
  * @param  props Component props.
  * @return Vue element.
  */
-declare const ButtonGroup: import('vue').DefineSetupFnComponent<ButtonGroupProps, {}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const ButtonGroup: import('vue').DefineSetupFnComponent<ButtonGroupProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default ButtonGroup;

package/components/button/IconButton.d.ts

@@ -12,7 +12,7 @@ export declare const emitSchema: {
  */
 declare const IconButton: import('vue').DefineSetupFnComponent<IconButtonProps, {
     click: (event: MouseEvent) => boolean;
-}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {
     onClick?: ((event: MouseEvent) => any) | undefined;

package/components/checkbox/Checkbox.d.ts

@@ -13,7 +13,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, INTERMEDIATE_STATE };
  */
 declare const Checkbox: import('vue').DefineSetupFnComponent<CheckboxProps, {
     change: (isChecked: boolean, value?: string, name?: string, event?: Event) => boolean;
-}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange" | "inputRef" | "inputId"> & {
+}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick" | "inputRef" | "inputId"> & {
     class?: string;
 } & {
     onChange?: ((isChecked: boolean, value?: string | undefined, name?: string | undefined, event?: Event | undefined) => any) | undefined;

package/components/divider/Divider.d.ts

@@ -8,7 +8,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
  * @param  props Component props.
  * @return Vue element.
  */
-declare const Divider: import('vue').DefineSetupFnComponent<DividerProps, {}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const Divider: import('vue').DefineSetupFnComponent<DividerProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default Divider;

package/components/flag/Flag.d.ts

@@ -7,7 +7,7 @@ export type FlagProps = VueToJSXProps<UIProps, 'Text'>;
  * @param  props Component props.
  * @return Vue element.
  */
-declare const Flag: import('vue').DefineSetupFnComponent<FlagProps, {}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange" | "Text"> & {
+declare const Flag: import('vue').DefineSetupFnComponent<FlagProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick" | "Text"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default Flag;

package/components/flex-box/FlexBox.d.ts

@@ -11,7 +11,7 @@ export { CLASSNAME, COMPONENT_NAME };
  * @param  props Component props.
  * @return Vue element.
  */
-declare const FlexBox: import('vue').DefineSetupFnComponent<FlexBoxProps, {}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const FlexBox: import('vue').DefineSetupFnComponent<FlexBoxProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {
     /** Customize the root element. */

package/components/heading/Heading.d.ts

@@ -7,7 +7,7 @@ export type HeadingVueProps = VueToJSXProps<HeadingProps>;
  * @param  props Component props.
  * @return Vue element.
  */
-declare const Heading: import('vue').DefineSetupFnComponent<HeadingVueProps, {}, {}, Omit<HeadingProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const Heading: import('vue').DefineSetupFnComponent<HeadingVueProps, {}, {}, Omit<HeadingProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default Heading;

package/components/icon/Icon.d.ts

@@ -7,7 +7,7 @@ export type IconProps = VueToJSXProps<UIProps>;
  * @param  props Component props.
  * @return Vue element.
  */
-declare const Icon: import('vue').DefineSetupFnComponent<IconProps, {}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const Icon: import('vue').DefineSetupFnComponent<IconProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default Icon;

package/components/input-helper/InputHelper.d.ts

@@ -7,7 +7,7 @@ export type InputHelperProps = VueToJSXProps<UIProps>;
  * @param  props Component props.
  * @return Vue element.
  */
-declare const InputHelper: import('vue').DefineSetupFnComponent<InputHelperProps, {}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const InputHelper: import('vue').DefineSetupFnComponent<InputHelperProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default InputHelper;

package/components/input-label/InputLabel.d.ts

@@ -7,7 +7,7 @@ export type InputLabelProps = VueToJSXProps<UIProps>;
  * @param  props Component props.
  * @return Vue element.
  */
-declare const InputLabel: import('vue').DefineSetupFnComponent<InputLabelProps, {}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const InputLabel: import('vue').DefineSetupFnComponent<InputLabelProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default InputLabel;

package/components/link/Link.d.ts

@@ -13,7 +13,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
  */
 declare const Link: import('vue').DefineSetupFnComponent<LinkProps, {
     click: (event: Event) => boolean;
-}, {}, Omit<UIProps, "className" | "label" | "children" | "onClick" | "ref" | "onChange"> & {
+}, {}, Omit<UIProps, "className" | "label" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {
     onClick?: ((event: Event) => any) | undefined;

package/components/message/Message.d.ts

@@ -14,7 +14,7 @@ export interface MessageEmits {
  * @param  props Component props.
  * @return Vue element.
  */
-declare const Message: import('vue').DefineSetupFnComponent<MessageProps, "close"[], {}, Omit<Omit<UIProps, "closeButtonProps">, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const Message: import('vue').DefineSetupFnComponent<MessageProps, "close"[], {}, Omit<Omit<UIProps, "closeButtonProps">, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {
     /** label to be used for the close button */

package/components/radio-button/RadioButton.d.ts

@@ -13,7 +13,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
  */
 declare const RadioButton: import('vue').DefineSetupFnComponent<RadioButtonProps, {
     change: (value?: string, name?: string, event?: Event) => event is Event;
-}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange" | "inputRef" | "inputId"> & {
+}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick" | "inputRef" | "inputId"> & {
     class?: string;
 } & {
     onChange?: ((value?: string | undefined, name?: string | undefined, event?: Event | undefined) => any) | undefined;

package/components/skeleton/SkeletonCircle.d.ts

@@ -8,7 +8,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
  * @param  props Component props.
  * @return Vue element.
  */
-declare const SkeletonCircle: import('vue').DefineSetupFnComponent<SkeletonCircleProps, {}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const SkeletonCircle: import('vue').DefineSetupFnComponent<SkeletonCircleProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default SkeletonCircle;

package/components/skeleton/SkeletonRectangle.d.ts

@@ -8,7 +8,7 @@ export { SkeletonRectangleVariant, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
  * @param  props Component props.
  * @return Vue element.
  */
-declare const SkeletonRectangle: import('vue').DefineSetupFnComponent<SkeletonRectangleProps, {}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const SkeletonRectangle: import('vue').DefineSetupFnComponent<SkeletonRectangleProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default SkeletonRectangle;

package/components/skeleton/SkeletonTypography.d.ts

@@ -8,7 +8,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
  * @param  props Component props.
  * @return Vue element.
  */
-declare const SkeletonTypography: import('vue').DefineSetupFnComponent<SkeletonTypographyProps, {}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const SkeletonTypography: import('vue').DefineSetupFnComponent<SkeletonTypographyProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default SkeletonTypography;

package/components/skeleton/index.d.ts

@@ -1,7 +1,10 @@
-export { default as SkeletonCircle } from './SkeletonCircle';
-export type { SkeletonCircleProps } from './SkeletonCircle';
-export { default as SkeletonRectangle } from './SkeletonRectangle';
-export type { SkeletonRectangleProps } from './SkeletonRectangle';
-export { SkeletonRectangleVariant } from './SkeletonRectangle';
-export { default as SkeletonTypography } from './SkeletonTypography';
-export type { SkeletonTypographyProps } from './SkeletonTypography';
+import { default as SkeletonCircle, SkeletonCircleProps } from './SkeletonCircle';
+import { default as SkeletonRectangle, SkeletonRectangleProps, SkeletonRectangleVariant } from './SkeletonRectangle';
+import { default as SkeletonTypography, SkeletonTypographyProps } from './SkeletonTypography';
+export { SkeletonCircle };
+export type { SkeletonCircleProps };
+export { SkeletonRectangle };
+export type { SkeletonRectangleProps };
+export { SkeletonRectangleVariant };
+export { SkeletonTypography };
+export type { SkeletonTypographyProps };

package/components/switch/Switch.d.ts

@@ -13,7 +13,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
  */
 declare const Switch: import('vue').DefineSetupFnComponent<SwitchProps, {
     change: (isChecked: boolean, value?: string, name?: string, event?: Event) => boolean;
-}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange" | "inputRef" | "inputId"> & {
+}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick" | "inputRef" | "inputId"> & {
     class?: string;
 } & {
     onChange?: ((isChecked: boolean, value?: string | undefined, name?: string | undefined, event?: Event | undefined) => any) | undefined;

package/components/table/Table.d.ts

@@ -0,0 +1,7 @@
+import { TableProps as UIProps } from '@lumx/core/js/components/Table';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type TableProps = VueToJSXProps<UIProps>;
+declare const Table: import('vue').DefineSetupFnComponent<TableProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default Table;

package/components/table/TableBody.d.ts

@@ -0,0 +1,7 @@
+import { TableBodyProps as UIProps } from '@lumx/core/js/components/Table/TableBody';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type TableBodyProps = VueToJSXProps<UIProps>;
+declare const TableBody: import('vue').DefineSetupFnComponent<TableBodyProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default TableBody;

package/components/table/TableCell.d.ts

@@ -0,0 +1,16 @@
+import { TableCellProps as UIProps, ThOrder, TableCellVariant } from '@lumx/core/js/components/Table/TableCell';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export { ThOrder, TableCellVariant };
+export type { ThOrder as ThOrderType, TableCellVariant as TableCellVariantType, } from '@lumx/core/js/components/Table/TableCell';
+export type TableCellProps = VueToJSXProps<UIProps, 'onHeaderClick'>;
+export declare const emitSchema: {
+    headerClick: () => boolean;
+};
+declare const TableCell: import('vue').DefineSetupFnComponent<TableCellProps, {
+    headerClick: () => boolean;
+}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick" | "onHeaderClick"> & {
+    class?: string;
+} & {
+    onHeaderClick?: (() => any) | undefined;
+}, import('vue').PublicProps>;
+export default TableCell;

package/components/table/TableHeader.d.ts

@@ -0,0 +1,7 @@
+import { TableHeaderProps as UIProps } from '@lumx/core/js/components/Table/TableHeader';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type TableHeaderProps = VueToJSXProps<UIProps>;
+declare const TableHeader: import('vue').DefineSetupFnComponent<TableHeaderProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default TableHeader;

package/components/table/TableRow.d.ts

@@ -0,0 +1,13 @@
+import { TableRowProps as UIProps } from '@lumx/core/js/components/Table/TableRow';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type TableRowProps = VueToJSXProps<UIProps, 'tabIndex' | 'aria-disabled'> & {
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+};
+declare const TableRow: import('vue').DefineSetupFnComponent<TableRowProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick" | "aria-disabled" | "tabIndex"> & {
+    class?: string;
+} & {
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+} & {}, import('vue').PublicProps>;
+export default TableRow;

package/components/table/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Table } from './Table';
+export * from './Table';
+export { default as TableBody } from './TableBody';
+export * from './TableBody';
+export { default as TableCell } from './TableCell';
+export * from './TableCell';
+export { default as TableHeader } from './TableHeader';
+export * from './TableHeader';
+export { default as TableRow } from './TableRow';
+export * from './TableRow';

package/components/text/Text.d.ts

@@ -7,7 +7,7 @@ export type TextProps = VueToJSXProps<UIProps>;
  * @param  props Component props.
  * @return Vue element.
  */
-declare const Text: import('vue').DefineSetupFnComponent<TextProps, {}, {}, Omit<UIProps, "className" | "children" | "onClick" | "ref" | "onChange"> & {
+declare const Text: import('vue').DefineSetupFnComponent<TextProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default Text;

package/components/thumbnail/Stories/ThumbnailClickable.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    onClick?: (event: Event) => any;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        badge?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/thumbnail/Thumbnail.d.ts

@@ -0,0 +1,35 @@
+import { ThumbnailProps as UIProps, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from '@lumx/core/js/components/Thumbnail';
+import { FocusPoint } from '@lumx/core/js/components/Thumbnail/types';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ThumbnailProps = VueToJSXProps<Omit<UIProps, 'loadingState' | 'isAnyDisabled' | 'focusPointStyle' | 'disabledStateProps' | 'badge' | 'imgRef' | 'onKeyPress' | 'fallback'>> & {
+    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */
+    focusPoint?: FocusPoint;
+    /** ARIA disabled state */
+    'aria-disabled'?: boolean | 'true' | 'false';
+};
+export declare const emitSchema: {
+    click: (event: Event) => boolean;
+    keyPress: (event: Event) => boolean;
+};
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
+/**
+ * Thumbnail component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Thumbnail: import('vue').DefineSetupFnComponent<ThumbnailProps, {
+    click: (event: Event) => boolean;
+    keyPress: (event: Event) => boolean;
+}, {}, Omit<Omit<UIProps, "badge" | "isAnyDisabled" | "disabledStateProps" | "fallback" | "loadingState" | "imgRef" | "onKeyPress" | "focusPointStyle">, "className" | "children" | "ref" | "onChange" | "onClick"> & {
+    class?: string;
+} & {
+    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */
+    focusPoint?: FocusPoint;
+    /** ARIA disabled state */
+    'aria-disabled'?: boolean | "true" | "false";
+} & {
+    onClick?: ((event: Event) => any) | undefined;
+    onKeyPress?: ((event: Event) => any) | undefined;
+}, import('vue').PublicProps>;
+export default Thumbnail;

package/components/thumbnail/Thumbnail.stories.d.ts

@@ -0,0 +1,161 @@
+import { AspectRatio } from '../..';
+import { ThumbnailObjectFit } from '@lumx/core/js/components/Thumbnail/types';
+declare const _default: {
+    component: any;
+    render: any;
+    argTypes: {
+        image: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: string[];
+            mapping: Record<string, string> | undefined;
+        };
+        align: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("center" | "right" | "left")[];
+            mapping: Record<string, "center" | "right" | "left"> | undefined;
+        };
+        variant: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("squared" | "rounded")[];
+            mapping: Record<string, "squared" | "rounded"> | undefined;
+        };
+        aspectRatio: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free")[];
+            mapping: Record<string, "vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free"> | undefined;
+        };
+        fallback: {
+            control: boolean;
+        };
+        'focusPoint.x': {
+            control: {
+                type: string;
+                max: number;
+                min: number;
+                step: number;
+            };
+        };
+        'focusPoint.y': {
+            control: {
+                type: string;
+                max: number;
+                min: number;
+                step: number;
+            };
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    args: {
+        align?: import('../..').HorizontalAlignment | undefined;
+        alt?: string | undefined;
+        aspectRatio?: AspectRatio | undefined;
+        badge?: import('react').ReactNode;
+        crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+        fallback?: import('react').ReactNode;
+        fillHeight?: boolean | undefined;
+        image?: string | undefined;
+        loadingState?: string | undefined;
+        imgProps?: import('react').ImgHTMLAttributes<HTMLImageElement> | undefined;
+        imgRef?: import('../..').CommonRef;
+        ref?: import('../..').CommonRef;
+        isLoading?: boolean | undefined;
+        objectFit?: ThumbnailObjectFit | undefined;
+        size?: import('../..').ThumbnailSize | undefined;
+        loading?: "eager" | "lazy" | undefined;
+        loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement> | undefined;
+        onClick?: ((event: any) => void) | undefined;
+        onKeyPress?: ((event: any) => void) | undefined;
+        variant?: import('../..').ThumbnailVariant | undefined;
+        linkProps?: import('../..').GenericProps | undefined;
+        focusPointStyle?: import('../..').GenericProps | undefined;
+        disabledStateProps?: import('../..').GenericProps | undefined;
+        isAnyDisabled?: boolean | undefined;
+        linkAs?: "a" | any;
+        'aria-label'?: string | undefined;
+        theme?: import('../..').Theme | undefined;
+        className?: string | undefined;
+    };
+    title: string;
+};
+export default _default;
+export declare const Simple: {
+    [x: string]: any;
+};
+export declare const IsLoading: {
+    args: {
+        image: string;
+        isLoading: boolean;
+    };
+};
+export declare const WithoutSource: {
+    args: {
+        image: string;
+        size: "xxl";
+        aspectRatio: "square";
+    };
+};
+export declare const FocusPointVertical: {
+    args: {
+        aspectRatio: "vertical";
+        size: "xxl";
+        image: string;
+        'focusPoint.x': number;
+    };
+};
+export declare const FocusPointHorizontal: {
+    args: {
+        aspectRatio: "horizontal";
+        size: "xxl";
+        image: string;
+        'focusPoint.y': number;
+    };
+};
+export declare const AsButton: {
+    render: (args: any) => {
+        components: {
+            [x: string]: any;
+        };
+        setup(): {
+            args: any;
+        };
+        template: string;
+    };
+    args: {
+        image: string;
+    };
+    argTypes: {
+        onClick: {
+            action: boolean;
+        };
+    };
+};
+export declare const AsLink: {
+    args: {
+        image: string;
+        linkProps: {
+            href: string;
+        };
+    };
+};
+export declare const FillHeightAndRatio: {
+    [x: string]: any;
+};
+export declare const WithSvgImages: {
+    args: {
+        image: string;
+        size: "xxl";
+        fillHeight: boolean;
+        'focusPoint.x': number;
+    };
+};
+export declare const ObjectFit: {
+    [x: string]: any;
+};

package/components/thumbnail/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Thumbnail } from './Thumbnail';
+export type { ThumbnailProps } from './Thumbnail';
+export { ThumbnailVariant, ThumbnailObjectFit } from '@lumx/core/js/components/Thumbnail/types';
+export type { ThumbnailSize, FocusPoint, LoadingState } from '@lumx/core/js/components/Thumbnail/types';

package/components/thumbnail/useFocusPointStyle.d.ts

@@ -0,0 +1,20 @@
+import { Ref, ComputedRef, CSSProperties } from 'vue';
+import { AspectRatio } from '@lumx/core/js/constants';
+import { FocusPoint } from '@lumx/core/js/components/Thumbnail/types';
+interface FocusPointStyleParams {
+    image: Ref<string>;
+    aspectRatio: Ref<AspectRatio | undefined>;
+    focusPoint: Ref<FocusPoint | undefined>;
+    width: Ref<number | undefined>;
+    height: Ref<number | undefined>;
+    element: Ref<HTMLImageElement | undefined>;
+    isLoaded: Ref<boolean>;
+}
+/**
+ * Vue composable to compute CSS properties for focus point positioning.
+ *
+ * @param params - Focus point style parameters
+ * @returns Computed CSS properties for the image
+ */
+export declare function useFocusPointStyle(params: FocusPointStyleParams): ComputedRef<CSSProperties>;
+export {};

package/components/thumbnail/useImageLoad.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+import { LoadingState } from '@lumx/core/js/components/Thumbnail/types';
+/**
+ * Vue composable to track image loading state.
+ *
+ * @param imageURL - The URL of the image to track
+ * @param imgRef - Reference to the HTML image element
+ * @returns The current loading state ('hasError', 'isLoading', or 'isLoaded')
+ */
+export declare function useImageLoad(imageURL: Ref<string>, imgRef: Ref<HTMLImageElement | undefined>): Ref<LoadingState>;

package/composables/useTheme.d.ts

@@ -1,9 +1,10 @@
+import { ComputedRef } from 'vue';
 import { Theme } from '@lumx/core/js/constants';
 export interface UseTheme {
     defaultTheme?: Theme;
 }
 /**
- * Retrives the globally applied theme.
- * @returns theme
+ * Retrieves the globally applied theme.
+ * @returns computed theme value (auto-updates when the provided theme changes)
  */
-export declare function useTheme(options?: UseTheme): Theme | undefined;
+export declare function useTheme(options?: UseTheme): ComputedRef<Theme | undefined>;

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
+export * from './components/badge';
 export * from './components/button';
 export * from './components/checkbox';
 export * from './components/divider';
@@ -14,4 +15,6 @@ export * from './components/message';
 export * from './components/radio-button';
 export * from './components/skeleton';
 export * from './components/switch';
+export * from './components/table';
 export * from './components/text';
+export * from './components/thumbnail';