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

package/_internal/components/tabs/index.d.ts

@@ -0,0 +1,5 @@
+import { Tab, TabProps } from "./Tab.js";
+import { TabListLayout } from "../../packages/lumx-core/src/js/components/Tabs/TabList.js";
+import { TabList, TabListProps } from "./TabList.js";
+import { TabPanel, TabPanelProps } from "./TabPanel.js";
+import { TabProvider, TabProviderProps } from "./TabProvider.js";

package/_internal/components/tabs/state.js

@@ -0,0 +1,53 @@
+import { useId } from "../../composables/useId.js";
+import "../../packages/lumx-core/src/js/components/Tabs/state.js";
+import { computed, inject, onBeforeUnmount, onMounted } from "vue";
+//#region src/components/tabs/state.ts
+/** Injection key used by TabProvider (provide) and Tab/TabPanel (inject). */
+var TAB_PROVIDER_INJECT_KEY = Symbol("LumxTabProvider");
+/**
+* Composable equivalent of React's useTabProviderContext.
+* Registers the tab/tabPanel with the provider on mount and unregisters on unmount.
+* Returns a computed ref with the derived tab state, or undefined if no provider is present.
+*/
+var useTabProviderContext = (type, originalId) => {
+	const context = inject(TAB_PROVIDER_INJECT_KEY, void 0);
+	if (!context) return computed(() => void 0);
+	const { state, dispatch } = context;
+	const generatedId = useId();
+	const id = originalId || generatedId;
+	onMounted(() => {
+		dispatch({
+			type: "register",
+			payload: {
+				type,
+				id
+			}
+		});
+	});
+	onBeforeUnmount(() => {
+		dispatch({
+			type: "unregister",
+			payload: {
+				type,
+				id
+			}
+		});
+	});
+	return computed(() => {
+		const index = state.value.ids[type].indexOf(id);
+		if (index === -1) return void 0;
+		return {
+			isLazy: state.value.isLazy,
+			shouldActivateOnFocus: state.value.shouldActivateOnFocus,
+			tabId: state.value.ids.tab[index] || "",
+			tabPanelId: state.value.ids.tabPanel[index] || "",
+			isActive: state.value.activeTabIndex === index,
+			changeToTab: () => dispatch({
+				type: "setActiveTabIndex",
+				payload: index
+			})
+		};
+	});
+};
+//#endregion
+export { TAB_PROVIDER_INJECT_KEY, useTabProviderContext };

package/_internal/components/text/Text.d.ts

@@ -0,0 +1,16 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { TextProps as TextProps$1 } from "../../packages/lumx-core/src/js/components/Text/index.js";
+
+//#region src/components/text/Text.d.ts
+type TextProps = VueToJSXProps<TextProps$1>;
+/**
+ * Text component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Text: import("vue").DefineSetupFnComponent<TextProps, {}, {}, Omit<TextProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { Text, TextProps };

package/_internal/components/text/Text.js

@@ -0,0 +1,50 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { getTextProps } from "../../packages/lumx-core/src/js/components/Text/index.js";
+import { useOverflowTooltipLabel } from "../../composables/useOverflowTooltipLabel.js";
+import { useSlot } from "../../composables/useSlot.js";
+import { wrapChildrenIconWithSpaces } from "../../utils/wrapChildrenIconWithSpaces.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, useAttrs, useTemplateRef } from "vue";
+//#region src/components/text/Text.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Text component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var Text$1 = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const defaultSlot = useSlot();
+	const { tooltipLabel } = useOverflowTooltipLabel(useTemplateRef("tooltip-label"));
+	const className = useClassName(() => props.class);
+	const textProps = computed(() => getTextProps({
+		...props,
+		className: className.value
+	}));
+	const componentProps = computed(() => {
+		const { children: _, ...filteredAttrs } = attrs;
+		return {
+			...filteredAttrs,
+			...textProps.value
+		};
+	});
+	return () => {
+		const Component = props.as || "div";
+		const slot = defaultSlot() || slots.default?.();
+		const children = slot ? wrapChildrenIconWithSpaces(slot) : null;
+		return createVNode(Component, mergeProps({ "ref": "tooltip-label" }, componentProps.value, {
+			"class": componentProps.value.className,
+			"style": componentProps.value.style,
+			"title": tooltipLabel.value
+		}), _isSlot(children) ? children : { default: () => [children] });
+	};
+}, {
+	name: "LumxText",
+	inheritAttrs: false,
+	props: keysOf()("as", "color", "colorVariant", "typography", "truncate", "noWrap", "whiteSpace", "style", "class")
+});
+//#endregion
+export { Text$1 as default };

package/_internal/components/text/index.d.ts

@@ -0,0 +1 @@
+import { Text, TextProps } from "./Text.js";

package/_internal/components/text-field/RawInputText.d.ts

@@ -0,0 +1,27 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { RawInputTextProps as RawInputTextProps$1 } from "../../packages/lumx-core/src/js/components/TextField/RawInputText.js";
+
+//#region src/components/text-field/RawInputText.d.ts
+type RawInputTextProps = VueToJSXProps<RawInputTextProps$1>;
+/**
+ * Raw input text component.
+ * (input element without any decoration)
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const RawInputText: import("vue").DefineSetupFnComponent<RawInputTextProps, {
+  change: (value: string, _name?: string, _event?: Event) => boolean;
+  input: (value: string, _name?: string, _event?: Event) => boolean;
+  focus: (_event?: FocusEvent) => boolean;
+  blur: (_event?: FocusEvent) => boolean;
+}, {}, Omit<RawInputTextProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {
+  onInput?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
+  onChange?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
+  onFocus?: ((_event?: FocusEvent | undefined) => any) | undefined;
+  onBlur?: ((_event?: FocusEvent | undefined) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { RawInputText, RawInputTextProps };

package/_internal/components/text-field/RawInputText.js

@@ -0,0 +1,55 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { RawInputText as RawInputText$1 } from "../../packages/lumx-core/src/js/components/TextField/RawInputText.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+/**
+* Raw input text component.
+* (input element without any decoration)
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var RawInputText = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const handleChange = (value, name, event) => {
+		event?.stopImmediatePropagation();
+		emit("change", value, name, event);
+	};
+	const handleInput = (value, name, event) => {
+		emit("input", value, name, event);
+	};
+	const handleFocus = (event) => {
+		emit("focus", event);
+	};
+	const handleBlur = (event) => {
+		emit("blur", event);
+	};
+	return () => {
+		return createVNode(RawInputText$1, mergeProps(attrs, {
+			"value": props.value,
+			"type": props.type,
+			"name": props.name,
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"handleChange": handleChange,
+			"handleInput": handleInput,
+			"handleFocus": handleFocus,
+			"handleBlur": handleBlur
+		}), null);
+	};
+}, {
+	name: "LumxRawInputText",
+	inheritAttrs: false,
+	props: keysOf()("class", "theme", "value", "type", "name"),
+	emits: {
+		change: (value, _name, _event) => typeof value === "string",
+		input: (value, _name, _event) => typeof value === "string",
+		focus: (_event) => true,
+		blur: (_event) => true
+	}
+});
+//#endregion
+export { RawInputText as default };

package/_internal/components/text-field/RawInputTextarea.d.ts

@@ -0,0 +1,27 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { RawInputTextareaProps as RawInputTextareaProps$1 } from "../../packages/lumx-core/src/js/components/TextField/RawInputTextarea.js";
+
+//#region src/components/text-field/RawInputTextarea.d.ts
+type RawInputTextareaProps = VueToJSXProps<RawInputTextareaProps$1>;
+/**
+ * Raw input textarea component.
+ * (textarea element without any decoration)
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const RawInputTextarea: import("vue").DefineSetupFnComponent<RawInputTextareaProps, {
+  change: (value: string, _name?: string, _event?: Event) => boolean;
+  input: (value: string, _name?: string, _event?: Event) => boolean;
+  focus: (_event?: FocusEvent) => boolean;
+  blur: (_event?: FocusEvent) => boolean;
+}, {}, Omit<RawInputTextareaProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {
+  onInput?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
+  onChange?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
+  onFocus?: ((_event?: FocusEvent | undefined) => any) | undefined;
+  onBlur?: ((_event?: FocusEvent | undefined) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { RawInputTextarea, RawInputTextareaProps };

package/_internal/components/text-field/RawInputTextarea.js

@@ -0,0 +1,59 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { DEFAULT_PROPS, RawInputTextarea as RawInputTextarea$1 } from "../../packages/lumx-core/src/js/components/TextField/RawInputTextarea.js";
+import { useFitRowsToContent } from "./useFitRowsToContent.js";
+import { computed, createVNode, defineComponent, mergeProps, ref, useAttrs } from "vue";
+/**
+* Raw input textarea component.
+* (textarea element without any decoration)
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var RawInputTextarea = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const textareaRef = ref(null);
+	const rows = useFitRowsToContent(computed(() => props.rows ?? DEFAULT_PROPS.rows), textareaRef, computed(() => props.value));
+	const handleChange = (value, name, event) => {
+		event?.stopImmediatePropagation();
+		emit("change", value, name, event);
+	};
+	const handleInput = (value, name, event) => {
+		emit("input", value, name, event);
+	};
+	const handleFocus = (event) => {
+		emit("focus", event);
+	};
+	const handleBlur = (event) => {
+		emit("blur", event);
+	};
+	return () => {
+		return createVNode(RawInputTextarea$1, mergeProps(attrs, {
+			"ref": textareaRef,
+			"value": props.value,
+			"rows": rows.value,
+			"name": props.name,
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"handleChange": handleChange,
+			"handleInput": handleInput,
+			"handleFocus": handleFocus,
+			"handleBlur": handleBlur
+		}), null);
+	};
+}, {
+	name: "LumxRawInputTextarea",
+	inheritAttrs: false,
+	props: keysOf()("class", "theme", "value", "rows", "name"),
+	emits: {
+		change: (value, _name, _event) => typeof value === "string",
+		input: (value, _name, _event) => typeof value === "string",
+		focus: (_event) => true,
+		blur: (_event) => true
+	}
+});
+//#endregion
+export { RawInputTextarea as default };

package/_internal/components/text-field/TextField.d.ts

@@ -0,0 +1,52 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { InputLabelProps } from "../../packages/lumx-core/src/js/components/InputLabel/index.js";
+import { TextFieldProps as TextFieldProps$1, TextFieldPropsToOverride } from "../../packages/lumx-core/src/js/components/TextField/TextField.js";
+//#region src/components/text-field/TextField.d.ts
+type TextFieldProps = VueToJSXProps<TextFieldProps$1, TextFieldPropsToOverride | 'chips'> & {
+  /** Native input id property (generated if not provided). */id?: string; /** Props to pass to the clear button. If not specified, the button won't be displayed. */
+  clearButtonProps?: {
+    label: string;
+    [key: string]: any;
+  }; /** Native input name property. */
+  name?: string; /** Native input type (only when multiline is disabled). */
+  type?: string; /** Minimum rows for textarea (only when multiline is enabled). */
+  minimumRows?: number; /** Additional label props. */
+  labelProps?: InputLabelProps; /** Ref callback for the native input element. */
+  inputRef?: (el: HTMLInputElement | HTMLTextAreaElement | null) => void; /** Ref callback for the text field wrapper element. */
+  textFieldRef?: (el: HTMLElement | null) => void;
+};
+/**
+ * TextField component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const TextField: import("vue").DefineSetupFnComponent<TextFieldProps, {
+  change: (value: string, _name?: string, _event?: Event) => boolean;
+  input: (value: string, _name?: string, _event?: Event) => boolean;
+  focus: (_event?: FocusEvent) => boolean;
+  blur: (_event?: FocusEvent) => boolean;
+  clear: (_event?: MouseEvent) => boolean;
+}, {}, Omit<TextFieldProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | TextFieldPropsToOverride | "chips"> & {
+  class?: ClassValue;
+} & {
+  /** Native input id property (generated if not provided). */id?: string; /** Props to pass to the clear button. If not specified, the button won't be displayed. */
+  clearButtonProps?: {
+    label: string;
+    [key: string]: any;
+  }; /** Native input name property. */
+  name?: string; /** Native input type (only when multiline is disabled). */
+  type?: string; /** Minimum rows for textarea (only when multiline is enabled). */
+  minimumRows?: number; /** Additional label props. */
+  labelProps?: InputLabelProps; /** Ref callback for the native input element. */
+  inputRef?: (el: HTMLInputElement | HTMLTextAreaElement | null) => void; /** Ref callback for the text field wrapper element. */
+  textFieldRef?: (el: HTMLElement | null) => void;
+} & {
+  onClear?: ((_event?: MouseEvent | undefined) => any) | undefined;
+  onInput?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
+  onChange?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
+  onFocus?: ((_event?: FocusEvent | undefined) => any) | undefined;
+  onBlur?: ((_event?: FocusEvent | undefined) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { TextField, TextFieldProps };

package/_internal/components/text-field/TextField.js

@@ -0,0 +1,123 @@
+import { useId } from "../../composables/useId.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { useSlot } from "../../composables/useSlot.js";
+import IconButton from "../button/IconButton.js";
+import "../../packages/lumx-core/src/js/components/TextField/constants.js";
+import RawInputText from "./RawInputText.js";
+import RawInputTextarea from "./RawInputTextarea.js";
+import { TextField as TextField$1, generateAccessibilityIds } from "../../packages/lumx-core/src/js/components/TextField/TextField.js";
+import { computed, createVNode, defineComponent, mergeProps, ref, useAttrs, watch } from "vue";
+/**
+* TextField component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var TextField = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const attrs = useAttrs();
+	const getChipsSlot = useSlot("chips");
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const generatedId = useId();
+	const textFieldId = computed(() => props.id || generatedId);
+	const isFocus = ref(false);
+	const { isAnyDisabled, disabledStateProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const rawInputInstance = ref(null);
+	watch(rawInputInstance, (instance) => {
+		const inputElement = instance?.$el ?? instance ?? null;
+		props.inputRef?.(inputElement);
+	}, { flush: "sync" });
+	const accessibilityIds = computed(() => generateAccessibilityIds(props.helper, props.error, generatedId, attrs["aria-describedby"] || void 0, props.label));
+	const handleChange = (value, name, event) => {
+		emit("change", value, name, event);
+	};
+	const handleInput = (value, name, event) => {
+		emit("input", value, name, event);
+	};
+	const handleFocus = (event) => {
+		isFocus.value = true;
+		emit("focus", event);
+	};
+	const handleBlur = (event) => {
+		isFocus.value = false;
+		emit("blur", event);
+	};
+	const handleClear = (event) => {
+		event?.stopImmediatePropagation();
+		emit("change", "");
+		emit("clear", event);
+	};
+	return () => {
+		const theme = props.theme || defaultTheme.value;
+		const { helperId, errorId, describedById, labelId } = accessibilityIds.value;
+		const { class: _class, className: _cn, "aria-describedby": _ab, disabled: _d, isDisabled: _id, "aria-disabled": _aad, ariaDisabled: _ad, onChange: _oc, onInput: _oi, onFocus: _of, onBlur: _ob, chips: chipsAttr, ...inputAttrs } = attrs;
+		const inputCommonProps = {
+			...inputAttrs,
+			id: textFieldId.value,
+			value: props.value,
+			name: props.name,
+			placeholder: props.placeholder,
+			theme,
+			"aria-invalid": props.hasError || void 0,
+			"aria-describedby": describedById,
+			...disabledStateProps.value,
+			readOnly: !!inputAttrs.readOnly || !!disabledStateProps.value["aria-disabled"],
+			onChange: handleChange,
+			onInput: handleInput,
+			onFocus: handleFocus,
+			onBlur: handleBlur
+		};
+		const input = props.multiline ? createVNode(RawInputTextarea, mergeProps({ "ref": rawInputInstance }, inputCommonProps, { "rows": props.minimumRows }), null) : createVNode(RawInputText, mergeProps({ "ref": rawInputInstance }, inputCommonProps, { "type": props.type || "text" }), null);
+		return createVNode(TextField$1, {
+			"chips": (getChipsSlot() ?? chipsAttr) || void 0,
+			"error": props.error,
+			"forceFocusStyle": props.forceFocusStyle,
+			"hasError": props.hasError,
+			"afterElement": props.afterElement,
+			"helper": props.helper,
+			"icon": props.icon,
+			"isRequired": props.isRequired,
+			"isValid": props.isValid,
+			"label": props.label,
+			"labelProps": props.labelProps,
+			"maxLength": props.maxLength,
+			"multiline": props.multiline,
+			"placeholder": props.placeholder,
+			"value": props.value,
+			"className": className.value,
+			"theme": theme,
+			"id": textFieldId.value,
+			"isAnyDisabled": isAnyDisabled.value,
+			"helperId": helperId,
+			"labelId": labelId,
+			"errorId": errorId,
+			"isFocus": isFocus.value,
+			"input": input,
+			"textFieldRef": props.textFieldRef,
+			"IconButton": IconButton,
+			"clearButtonProps": props.clearButtonProps ? {
+				...props.clearButtonProps,
+				onClick: handleClear
+			} : void 0
+		}, null);
+	};
+}, {
+	name: "LumxTextField",
+	inheritAttrs: false,
+	props: keysOf()("class", "theme", "value", "error", "forceFocusStyle", "hasError", "afterElement", "helper", "icon", "isRequired", "isValid", "label", "labelProps", "maxLength", "isDisabled", "disabled", "multiline", "placeholder", "aria-disabled", "id", "clearButtonProps", "name", "type", "minimumRows", "inputRef", "textFieldRef"),
+	emits: {
+		change: (value, _name, _event) => typeof value === "string",
+		input: (value, _name, _event) => typeof value === "string",
+		focus: (_event) => true,
+		blur: (_event) => true,
+		clear: (_event) => true
+	}
+});
+//#endregion
+export { TextField as default };

package/_internal/components/text-field/index.d.ts

@@ -0,0 +1,3 @@
+import { TextField, TextFieldProps } from "./TextField.js";
+import { RawInputText, RawInputTextProps } from "./RawInputText.js";
+import { RawInputTextarea, RawInputTextareaProps } from "./RawInputTextarea.js";

package/_internal/components/text-field/useFitRowsToContent.js

@@ -0,0 +1,25 @@
+import { ref, watchEffect } from "vue";
+//#region src/components/text-field/useFitRowsToContent.ts
+/**
+* Fit textarea rows to its content.
+*/
+function useFitRowsToContent(minimumRows, textareaRef, value) {
+	const rows = ref(minimumRows.value);
+	watchEffect(() => {
+		const textarea = textareaRef.value;
+		if (!textarea) return;
+		const currentMinRows = minimumRows.value;
+		value.value;
+		const previousRows = textarea.rows;
+		textarea.rows = currentMinRows;
+		const rowHeight = textarea.clientHeight / currentMinRows;
+		textarea.rows = 1;
+		const { scrollHeight } = textarea;
+		textarea.rows = previousRows;
+		const requiredRows = rowHeight > 0 ? Math.ceil(scrollHeight / rowHeight) : currentMinRows;
+		rows.value = Math.max(requiredRows, currentMinRows);
+	}, { flush: "post" });
+	return rows;
+}
+//#endregion
+export { useFitRowsToContent };

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

@@ -0,0 +1,29 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { FocusPoint } from "../../packages/lumx-core/src/js/components/Thumbnail/types.js";
+import { ThumbnailProps as ThumbnailProps$1 } from "../../packages/lumx-core/src/js/components/Thumbnail/index.js";
+
+//#region src/components/thumbnail/Thumbnail.d.ts
+type ThumbnailProps = VueToJSXProps<Omit<ThumbnailProps$1, 'loadingState' | 'isAnyDisabled' | 'focusPointStyle' | 'disabledStateProps' | 'badge' | 'imgRef' | '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';
+};
+/**
+ * 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<ThumbnailProps$1, "isAnyDisabled" | "disabledStateProps" | "badge" | "loadingState" | "focusPointStyle" | "imgRef" | "fallback">, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {
+  /** 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>;
+//#endregion
+export { Thumbnail, ThumbnailProps };

package/_internal/components/thumbnail/Thumbnail.js

@@ -0,0 +1,89 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { Thumbnail as Thumbnail$1, element } from "../../packages/lumx-core/src/js/components/Thumbnail/index.js";
+import { useHasEventListener } from "../../composables/useHasEventListener.js";
+import { useImageLoad } from "./useImageLoad.js";
+import { useFocusPointStyle } from "./useFocusPointStyle.js";
+import { computed, createVNode, defineComponent, mergeProps, ref, toRaw, toRef, useAttrs } from "vue";
+import { classNames } from "@lumx/core/js/utils";
+/**
+* Thumbnail component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var Thumbnail = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const imgElement = ref();
+	const hasClickListener = useHasEventListener("onClick");
+	const hasKeyPressListener = useHasEventListener("onKeyPress");
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const loadingState = useImageLoad(toRef(() => props.image), imgElement);
+	const isLoaded = computed(() => loadingState.value === "isLoaded");
+	const focusPointStyle = useFocusPointStyle({
+		image: toRef(() => props.image),
+		aspectRatio: toRef(() => props.aspectRatio),
+		focusPoint: toRef(() => props.focusPoint),
+		width: toRef(() => typeof props.imgProps?.width === "number" ? props.imgProps.width : void 0),
+		height: toRef(() => typeof props.imgProps?.height === "number" ? props.imgProps.height : void 0),
+		element: imgElement,
+		isLoaded
+	});
+	const handleClick = (event) => {
+		if (isAnyDisabled.value) return;
+		emit("click", event);
+	};
+	const handleKeyPress = (event) => {
+		if (isAnyDisabled.value) return;
+		emit("keyPress", event);
+	};
+	return () => {
+		const badge = slots.badge?.();
+		const fallback = slots.fallback?.();
+		const { linkAs, ...restProps } = otherProps.value;
+		return createVNode(Thumbnail$1, mergeProps(restProps, {
+			"linkAs": toRaw(linkAs),
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"isAnyDisabled": isAnyDisabled.value,
+			"disabledStateProps": disabledStateProps.value,
+			"focusPointStyle": focusPointStyle.value,
+			"loadingState": loadingState.value,
+			"imgRef": imgElement,
+			"image": props.image,
+			"handleClick": hasClickListener ? handleClick : void 0,
+			"handleKeyPress": hasKeyPressListener ? handleKeyPress : void 0,
+			"fallback": fallback,
+			"badge": badge && (Array.isArray(badge) ? badge.map((b) => ({
+				...b,
+				props: {
+					...b.props,
+					class: classNames.join(element("badge"), b.props?.class)
+				}
+			})) : {
+				...badge,
+				props: {
+					...badge.props,
+					class: classNames.join(element("badge"), badge.props?.class)
+				}
+			})
+		}), null);
+	};
+}, {
+	name: "LumxThumbnail",
+	inheritAttrs: false,
+	props: keysOf()("align", "alt", "aspectRatio", "class", "crossOrigin", "fillHeight", "focusPoint", "image", "imgProps", "isLoading", "linkAs", "linkProps", "loading", "loadingPlaceholderImageRef", "objectFit", "size", "theme", "variant", "aria-disabled", "aria-label"),
+	emits: {
+		click: (event) => event instanceof Event,
+		keyPress: (event) => event instanceof Event
+	}
+});
+//#endregion
+export { Thumbnail as default };

package/_internal/components/thumbnail/index.d.ts

@@ -0,0 +1,2 @@
+import { FocusPoint, LoadingState, ThumbnailObjectFit, ThumbnailSize, ThumbnailVariant } from "../../packages/lumx-core/src/js/components/Thumbnail/types.js";
+import { Thumbnail, ThumbnailProps } from "./Thumbnail.js";