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

package/_internal/components/thumbnail/useFocusPointStyle.js

@@ -0,0 +1,50 @@
+import { calculateFocusPointStyle, getImageSize } from "../../packages/lumx-core/src/js/components/Thumbnail/utils.js";
+import { computed, nextTick, ref, watch } from "vue";
+//#region src/components/thumbnail/useFocusPointStyle.ts
+/**
+* Vue composable to compute CSS properties for focus point positioning.
+*
+* @param params - Focus point style parameters
+* @returns Computed CSS properties for the image
+*/
+function useFocusPointStyle(params) {
+	const { image, aspectRatio, focusPoint, width, height, element, isLoaded } = params;
+	const imageSize = computed(() => getImageSize({
+		image: image.value,
+		aspectRatio: aspectRatio.value,
+		focusPoint: focusPoint.value,
+		width: width.value,
+		height: height.value,
+		element: element.value,
+		isLoaded: isLoaded.value
+	}));
+	const containerSize = ref(void 0);
+	const updateContainerSize = () => {
+		const cWidth = element.value?.offsetWidth;
+		const cHeight = element.value?.offsetHeight;
+		if (cWidth && cHeight) {
+			const oldContainerSize = containerSize.value;
+			if (oldContainerSize?.width !== cWidth || oldContainerSize?.height !== cHeight) containerSize.value = {
+				width: cWidth,
+				height: cHeight
+			};
+		} else if (imageSize.value) requestAnimationFrame(updateContainerSize);
+	};
+	watch([
+		() => element.value?.offsetWidth,
+		() => element.value?.offsetHeight,
+		imageSize
+	], () => {
+		nextTick(updateContainerSize);
+	}, { immediate: true });
+	return computed(() => calculateFocusPointStyle({
+		image: image.value,
+		aspectRatio: aspectRatio.value,
+		focusPoint: focusPoint.value,
+		element: element.value,
+		imageSize: imageSize.value,
+		containerSize: containerSize.value
+	}));
+}
+//#endregion
+export { useFocusPointStyle };

package/_internal/components/thumbnail/useImageLoad.js

@@ -0,0 +1,38 @@
+import { getImageLoadingState } from "../../packages/lumx-core/src/js/components/Thumbnail/utils.js";
+import { onBeforeUnmount, ref, watch } from "vue";
+//#region src/components/thumbnail/useImageLoad.ts
+/**
+* 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')
+*/
+function useImageLoad(imageURL, imgRef) {
+	const state = ref(getImageLoadingState(imgRef.value));
+	watch([imageURL, imgRef], () => {
+		state.value = getImageLoadingState(imgRef.value);
+	}, { immediate: true });
+	const update = (event) => {
+		if (imgRef.value) state.value = getImageLoadingState(imgRef.value, event);
+	};
+	watch(imgRef, (img, oldImg) => {
+		if (oldImg) {
+			oldImg.removeEventListener("load", update);
+			oldImg.removeEventListener("error", update);
+		}
+		if (img) {
+			img.addEventListener("load", update);
+			img.addEventListener("error", update);
+		}
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		if (imgRef.value) {
+			imgRef.value.removeEventListener("load", update);
+			imgRef.value.removeEventListener("error", update);
+		}
+	});
+	return state;
+}
+//#endregion
+export { useImageLoad };

package/_internal/components/time-picker-field/TimePickerField.d.ts

@@ -0,0 +1,37 @@
+import { ClassValue } from "../../utils/VueToJSX.js";
+import { SingleSelectTextFieldProps } from "../select-text-field/SelectTextField.js";
+import { TimePickerFieldOwnedSelectProps, TimePickerFieldWrapperProps } from "../../packages/lumx-core/src/js/components/TimePickerField/index.js";
+
+//#region src/components/time-picker-field/TimePickerField.d.ts
+/**
+ * Inherited SelectTextField props (less the parts owned by TimePickerField).
+ */
+type InheritedSelectTextFieldProps = Omit<SingleSelectTextFieldProps<any>, TimePickerFieldOwnedSelectProps | 'class'>;
+/**
+ * `TimePickerField` props.
+ */
+interface TimePickerFieldProps extends InheritedSelectTextFieldProps, TimePickerFieldWrapperProps {
+  /** CSS class. */
+  class?: ClassValue;
+}
+/**
+ * A select-style picker for choosing a time of day. Wraps `SelectTextField`
+ * with a generated list of times built from `step`, `minTime`, and `maxTime`.
+ *
+ * Out-of-range options (strictly before `minTime` or after `maxTime`) remain
+ * visible in the dropdown but are rendered as disabled.
+ *
+ * Free-form typed input (e.g. `"10:30 PM"`, `"14"`, `"930"`) is parsed on blur.
+ */
+declare const TimePickerField: import("vue").DefineSetupFnComponent<TimePickerFieldProps, {
+  /**
+   * Selection change. Payload is the new `Date` whose date part is inherited
+   * from the previous `value` (or today, if none) and whose time-of-day
+   * matches the user selection. May be `undefined` when the field is cleared.
+   */
+  change: (_newValue?: Date) => boolean;
+}, {}, TimePickerFieldProps & {
+  onChange?: ((_newValue?: Date | undefined) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { TimePickerField, TimePickerFieldProps };

package/_internal/components/time-picker-field/TimePickerField.js

@@ -0,0 +1,104 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import SelectTextField from "../select-text-field/SelectTextField.js";
+import { SelectTextFieldOption } from "../select-text-field/index.js";
+import { DEFAULT_PROPS, TimePickerField as TimePickerField$1 } from "../../packages/lumx-core/src/js/components/TimePickerField/index.js";
+import { formatTime } from "../../packages/lumx-core/src/js/utils/time/formatTime.js";
+import { getDateAtTime } from "../../packages/lumx-core/src/js/utils/time/getDateAtTime.js";
+import { buildTimeList } from "../../packages/lumx-core/src/js/utils/time/buildTimeList.js";
+import { parseTimeInput } from "../../packages/lumx-core/src/js/utils/time/parseTimeInput.js";
+import { snapTimeToBounds } from "../../packages/lumx-core/src/js/utils/time/snapTimeToBounds.js";
+import { isDateOnTime } from "../../packages/lumx-core/src/js/utils/time/isDateOnTime.js";
+import { getCurrentLocale } from "../../packages/lumx-core/src/js/utils/locale/getCurrentLocale.js";
+import { computed, defineComponent, ref, watch } from "vue";
+/**
+* A select-style picker for choosing a time of day. Wraps `SelectTextField`
+* with a generated list of times built from `step`, `minTime`, and `maxTime`.
+*
+* Out-of-range options (strictly before `minTime` or after `maxTime`) remain
+* visible in the dropdown but are rendered as disabled.
+*
+* Free-form typed input (e.g. `"10:30 PM"`, `"14"`, `"930"`) is parsed on blur.
+*/
+var TimePickerField = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const className = useClassName(() => props.class);
+	const locale = computed(() => props.locale ?? getCurrentLocale());
+	const step = computed(() => props.step ?? DEFAULT_PROPS.step);
+	const boundsMode = computed(() => props.boundsMode ?? DEFAULT_PROPS.boundsMode);
+	const timeList = computed(() => buildTimeList({
+		step: step.value,
+		minTime: props.minTime,
+		maxTime: props.maxTime,
+		locale: locale.value
+	}));
+	const committedSearch = ref("");
+	const selectedOption = computed(() => {
+		const { value } = props;
+		if (!value) return void 0;
+		return {
+			hour: value.getHours(),
+			minute: value.getMinutes(),
+			name: formatTime(value, locale.value)
+		};
+	});
+	watch(() => [
+		boundsMode.value,
+		props.value,
+		props.minTime,
+		props.maxTime
+	], () => {
+		if (boundsMode.value !== "enforce" || !props.value) return;
+		const clamped = snapTimeToBounds({
+			hour: props.value.getHours(),
+			minute: props.value.getMinutes()
+		}, props.minTime, props.maxTime);
+		if (clamped.hour !== props.value.getHours() || clamped.minute !== props.value.getMinutes()) emit("change", getDateAtTime(clamped, props.value));
+	}, { immediate: true });
+	const handleChange = (next) => {
+		emit("change", next ? getDateAtTime(next, props.value) : void 0);
+	};
+	const handleSearch = (typed) => {
+		if (typed) committedSearch.value = typed;
+	};
+	const handleBlur = () => {
+		const typed = committedSearch.value;
+		committedSearch.value = "";
+		if (!typed) return;
+		const parsed = parseTimeInput(typed);
+		if (!parsed) return;
+		const time = snapTimeToBounds(parsed, props.minTime, props.maxTime);
+		if (props.value && isDateOnTime(props.value, time)) return;
+		emit("change", getDateAtTime(time, props.value));
+	};
+	return () => {
+		const searchInputValue = props.value ? formatTime(props.value, locale.value) : void 0;
+		const { value: _value, locale: _locale, step: _step, minTime: _minTime, maxTime: _maxTime, translations, class: _class, ...forwardedProps } = props;
+		return TimePickerField$1({
+			...forwardedProps,
+			value: selectedOption.value,
+			options: timeList.value,
+			translations,
+			className: className.value,
+			handleChange,
+			handleSearch,
+			handleBlur,
+			searchInputValue
+		}, {
+			SelectTextField,
+			Option: SelectTextFieldOption
+		});
+	};
+}, {
+	name: "LumxTimePickerField",
+	inheritAttrs: false,
+	props: keysOf()("value", "locale", "step", "minTime", "maxTime", "boundsMode", "translations", "class", "label", "placeholder", "icon", "isDisabled", "aria-disabled", "isRequired", "hasError", "error", "helper", "id", "name", "isValid", "ariaLabel", "inputProps", "theme", "hasClearButton"),
+	emits: { 
+	/**
+	* Selection change. Payload is the new `Date` whose date part is inherited
+	* from the previous `value` (or today, if none) and whose time-of-day
+	* matches the user selection. May be `undefined` when the field is cleared.
+	*/
+change: (_newValue) => true }
+});
+//#endregion
+export { TimePickerField as default };

package/_internal/components/time-picker-field/index.d.ts

@@ -0,0 +1,2 @@
+import { TimePickerFieldTranslations } from "../../packages/lumx-core/src/js/components/TimePickerField/index.js";
+import { TimePickerField, TimePickerFieldProps } from "./TimePickerField.js";

package/_internal/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { TOOLBAR_NAME, ToolbarProps as ToolbarProps$1 } from "../../packages/lumx-core/src/js/components/Toolbar/index.js";
+
+//#region src/components/toolbar/Toolbar.d.ts
+type ToolbarProps = VueToJSXProps<ToolbarProps$1, 'label' | 'after' | 'before'>;
+declare const Toolbar: import("vue").DefineSetupFnComponent<ToolbarProps, {}, {}, Omit<ToolbarProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "label" | "before" | "after"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { Toolbar, ToolbarProps };

package/_internal/components/toolbar/Toolbar.js

@@ -0,0 +1,23 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { Toolbar as Toolbar$1 } from "../../packages/lumx-core/src/js/components/Toolbar/index.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/toolbar/Toolbar.tsx
+var Toolbar = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	return () => {
+		return createVNode(Toolbar$1, mergeProps(props, attrs, {
+			"className": className.value,
+			"label": slots.default?.() ?? attrs.label,
+			"before": slots.before?.() ?? attrs.before,
+			"after": slots.after?.() ?? attrs.after
+		}), null);
+	};
+}, {
+	name: "LumxToolbar",
+	inheritAttrs: false,
+	props: keysOf()("class")
+});
+//#endregion
+export { Toolbar as default };

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

@@ -0,0 +1,2 @@
+import { TOOLBAR_NAME } from "../../packages/lumx-core/src/js/components/Toolbar/index.js";
+import { Toolbar, ToolbarProps } from "./Toolbar.js";

package/_internal/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,18 @@
+import { ClassValue } from "../../utils/VueToJSX.js";
+import { TooltipPlacement, TooltipProps as TooltipProps$1 } from "../../packages/lumx-core/src/js/components/Tooltip/index.js";
+
+//#region src/components/tooltip/Tooltip.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TooltipProps extends TooltipProps$1 {
+  /** Class name forwarded to the tooltip popup */
+  class?: ClassValue;
+}
+/**
+ * Vue Tooltip component.
+ * Wraps the shared core TooltipPopup with Vue-specific Floating UI, Portal, and slot injection.
+ */
+declare const Tooltip: import("vue").DefineSetupFnComponent<TooltipProps, {}, {}, TooltipProps & {}, import("vue").PublicProps>;
+//#endregion
+export { Tooltip, TooltipProps };

package/_internal/components/tooltip/Tooltip.js

@@ -0,0 +1,77 @@
+import { useId } from "../../composables/useId.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { Portal } from "../../utils/Portal/Portal.js";
+import { useCallbackOnEscape } from "../../composables/useCallbackOnEscape.js";
+import { provideTooltipContext } from "./context.js";
+import { autoUpdate, offset } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { useFloating } from "../../node_modules/@floating-ui/vue/dist/floating-ui.vue.js";
+import { DEFAULT_PROPS, TooltipPopup } from "../../packages/lumx-core/src/js/components/Tooltip/index.js";
+import { useTooltipOpen } from "./useTooltipOpen.js";
+import { useInjectTooltipRef } from "./useInjectTooltipRef.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, ref } from "vue";
+//#region src/components/tooltip/Tooltip.tsx
+/**
+* Defines the props of the component.
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Vue Tooltip component.
+* Wraps the shared core TooltipPopup with Vue-specific Floating UI, Portal, and slot injection.
+*/
+var Tooltip = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const id = useId();
+	const className = useClassName(() => props.class);
+	const anchorElement = ref(null);
+	const popperElement = ref(null);
+	const placement = computed(() => props.placement || DEFAULT_PROPS.placement);
+	const closeMode = computed(() => props.closeMode || DEFAULT_PROPS.closeMode);
+	const ariaLinkMode = computed(() => props.ariaLinkMode || DEFAULT_PROPS.ariaLinkMode);
+	const zIndex = computed(() => props.zIndex || DEFAULT_PROPS.zIndex);
+	const { floatingStyles, placement: resolvedPlacement } = useFloating(anchorElement, popperElement, {
+		placement,
+		whileElementsMounted: autoUpdate,
+		middleware: [offset(8)]
+	});
+	const { isOpen: isActivated, onPopperMount, manager } = useTooltipOpen(computed(() => props.delay), anchorElement);
+	const isOpen = computed(() => (isActivated.value || props.forceOpen) && !!props.label);
+	const isMounted = computed(() => !!props.label && (isOpen.value || closeMode.value === "hide"));
+	const isHidden = computed(() => !isOpen.value && closeMode.value === "hide");
+	useCallbackOnEscape(computed(() => isOpen.value ? () => manager.value?.close() : void 0));
+	provideTooltipContext();
+	return () => {
+		let _slot;
+		const position = resolvedPlacement.value ?? placement.value;
+		return createVNode(Fragment, null, [useInjectTooltipRef({
+			slotContent: slots.default?.(),
+			setAnchorElement: (el) => {
+				anchorElement.value = el?.$el || el;
+			},
+			isMounted: isMounted.value,
+			id,
+			label: props.label,
+			ariaLinkMode: ariaLinkMode.value
+		}), isMounted.value && createVNode(Portal, null, _isSlot(_slot = TooltipPopup({
+			ref: (el) => {
+				const element = el?.$el || el;
+				popperElement.value = element;
+				onPopperMount(element);
+			},
+			id,
+			label: props.label,
+			position,
+			isHidden: isHidden.value,
+			style: isHidden.value ? void 0 : floatingStyles.value,
+			zIndex: zIndex.value,
+			className: className.value
+		})) ? _slot : { default: () => [_slot] })]);
+	};
+}, {
+	name: "LumxTooltip",
+	inheritAttrs: false,
+	props: keysOf()("label", "placement", "delay", "forceOpen", "closeMode", "ariaLinkMode", "zIndex", "class")
+});
+//#endregion
+export { Tooltip };

package/_internal/components/tooltip/context.js

@@ -0,0 +1,20 @@
+import { inject, provide } from "vue";
+//#region src/components/tooltip/context.ts
+var TOOLTIP_CONTEXT_KEY = Symbol("tooltip-context");
+var DEFAULT_VALUE = {};
+/**
+* Provide tooltip context marker to child components.
+* Used to detect when a component is inside a tooltip (e.g., to prevent nested tooltips).
+*/
+function provideTooltipContext() {
+	provide(TOOLTIP_CONTEXT_KEY, DEFAULT_VALUE);
+}
+/**
+* Inject tooltip context marker.
+* Returns the context value if inside a tooltip, undefined otherwise.
+*/
+function useTooltipContext() {
+	return inject(TOOLTIP_CONTEXT_KEY, void 0);
+}
+//#endregion
+export { provideTooltipContext, useTooltipContext };

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

@@ -0,0 +1,2 @@
+import { TooltipPlacement } from "../../packages/lumx-core/src/js/components/Tooltip/index.js";
+import { Tooltip, TooltipProps } from "./Tooltip.js";

package/_internal/components/tooltip/useInjectTooltipRef.js

@@ -0,0 +1,46 @@
+import { Comment, Fragment, Text, cloneVNode, h } from "vue";
+//#region src/components/tooltip/useInjectTooltipRef.ts
+/**
+* Flatten Fragment nodes from slot content (slots may wrap content in Fragments).
+*/
+function renderSlotFragments(children) {
+	return children.flatMap((child) => {
+		if (child.type === Fragment) return renderSlotFragments(child.children);
+		return [child];
+	});
+}
+/**
+* Check if a VNode has isDisabled or disabled props.
+*/
+function isDisabledVNode(vnode) {
+	const props = vnode.props || {};
+	return props.disabled === true || props.isDisabled === true;
+}
+/**
+* Inject ref and ARIA attributes into tooltip anchor slot content.
+* - For a single non-disabled element slot: clone with injected ref and ARIA attributes.
+* - For text/fragment/multiple children/disabled elements: wrap in a div.
+*/
+function useInjectTooltipRef(options) {
+	const { slotContent, setAnchorElement, isMounted, id, label, ariaLinkMode } = options;
+	if (!slotContent || !label) return h(Fragment, slotContent);
+	const children = renderSlotFragments(slotContent);
+	const firstChild = children.find((c) => c.type !== Comment);
+	const linkId = isMounted ? id : void 0;
+	if (firstChild && children.length === 1 && firstChild.type !== Text && !isDisabledVNode(firstChild)) {
+		const extraProps = { ref: setAnchorElement };
+		if (linkId && label !== firstChild.props?.["aria-label"]) {
+			const existing = firstChild.props?.[ariaLinkMode];
+			extraProps[ariaLinkMode] = existing ? `${existing} ${linkId}` : linkId;
+		}
+		return cloneVNode(firstChild, extraProps, true);
+	}
+	const wrapperProps = {
+		class: "lumx-tooltip-anchor-wrapper",
+		ref: setAnchorElement
+	};
+	if (linkId) wrapperProps[ariaLinkMode] = linkId;
+	return h("div", wrapperProps, slotContent);
+}
+//#endregion
+export { useInjectTooltipRef };

package/_internal/components/tooltip/useTooltipOpen.js

@@ -0,0 +1,39 @@
+import { createTooltipOpenManager } from "../../packages/lumx-core/src/js/components/Tooltip/tooltipOpenManager.js";
+import { ref, shallowRef, watchEffect } from "vue";
+//#region src/components/tooltip/useTooltipOpen.ts
+/**
+* Vue composable controlling tooltip visibility using mouse hover the anchor and delay.
+*
+* @param delay         Delay in millisecond to display the tooltip.
+* @param anchorElement Tooltip anchor element ref.
+* @return whether or not to show the tooltip plus popper mount callback and manager ref.
+*/
+function useTooltipOpen(delay, anchorElement) {
+	const isOpen = ref(false);
+	const managerRef = shallowRef();
+	watchEffect((onCleanup) => {
+		const el = anchorElement.value;
+		if (!el) return;
+		const manager = createTooltipOpenManager({
+			delay: delay.value,
+			onStateChange: (value) => {
+				isOpen.value = value;
+			}
+		});
+		managerRef.value = manager;
+		manager.attachAnchor(el);
+		onCleanup(() => {
+			manager.destroy();
+		});
+	});
+	const onPopperMount = (el) => {
+		managerRef.value?.attachPopper(el);
+	};
+	return {
+		isOpen,
+		onPopperMount,
+		manager: managerRef
+	};
+}
+//#endregion
+export { useTooltipOpen };

package/_internal/components/uploader/Uploader.d.ts

@@ -0,0 +1,30 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { UploaderProps as UploaderProps$1, UploaderPropsToOverride, UploaderSize, UploaderVariant } from "../../packages/lumx-core/src/js/components/Uploader/index.js";
+
+//#region src/components/uploader/Uploader.d.ts
+type VueFileInputProps = {
+  /** Accepted file types. */accept?: string; /** Whether multiple files can be selected. */
+  multiple?: boolean; /** Camera capture mode. */
+  capture?: boolean | 'user' | 'environment'; /** Native input id (generated if not provided). */
+  id?: string;
+};
+type UploaderProps = VueToJSXProps<UploaderProps$1, UploaderPropsToOverride> & {
+  /** Handle file selection with a native input file. */fileInputProps?: VueFileInputProps;
+};
+/**
+ * Uploader component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Uploader: import("vue").DefineSetupFnComponent<UploaderProps, {
+  change: (_files: File[], _event?: Event) => boolean;
+}, {}, Omit<UploaderProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | UploaderPropsToOverride> & {
+  class?: ClassValue;
+} & {
+  /** Handle file selection with a native input file. */fileInputProps?: VueFileInputProps;
+} & {
+  onChange?: ((_files: File[], _event?: Event | undefined) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Uploader, UploaderProps };

package/_internal/components/uploader/Uploader.js

@@ -0,0 +1,77 @@
+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 { Uploader as Uploader$1 } from "../../packages/lumx-core/src/js/components/Uploader/index.js";
+import { computed, createVNode, defineComponent, mergeProps, ref, useAttrs } from "vue";
+/**
+* Uploader component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var Uploader = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const generatedInputId = useId();
+	const inputId = computed(() => props.fileInputProps?.id || generatedInputId);
+	const isDragHovering = ref(false);
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const handleClick = (event) => {
+		if (isAnyDisabled.value) {
+			event.preventDefault();
+			return;
+		}
+		event.stopImmediatePropagation();
+		attrs.onClick?.(event);
+	};
+	const handleChange = (event) => {
+		if (isAnyDisabled.value) return;
+		event.stopImmediatePropagation();
+		const input = event.target;
+		emit("change", input.files ? Array.from(input.files) : [], event);
+	};
+	return () => {
+		const hasFileInput = Boolean(props.fileInputProps);
+		const { onClick: _onClick, fileInputProps: _fp, class: _class, theme: _theme, ...restProps } = otherProps.value;
+		return createVNode(Uploader$1, mergeProps(restProps, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"inputId": inputId.value,
+			"isAnyDisabled": isAnyDisabled.value,
+			"isDragHovering": isDragHovering.value,
+			"handleClick": handleClick,
+			"handleChange": handleChange,
+			"Component": hasFileInput ? "label" : "button",
+			"fileInputProps": {
+				...props.fileInputProps,
+				...disabledStateProps.value,
+				readonly: isAnyDisabled.value,
+				onDrop: () => {
+					isDragHovering.value = false;
+				},
+				onDragleave: () => {
+					isDragHovering.value = false;
+				},
+				onDragenter: () => {
+					isDragHovering.value = true;
+				}
+			}
+		}, hasFileInput ? { htmlFor: inputId.value } : {
+			type: "button",
+			...disabledStateProps.value
+		}), null);
+	};
+}, {
+	name: "LumxUploader",
+	inheritAttrs: false,
+	props: keysOf()("class", "theme", "aspectRatio", "icon", "label", "size", "variant", "isDisabled", "disabled", "aria-disabled", "fileInputProps"),
+	emits: { change: (_files, _event) => true }
+});
+//#endregion
+export { Uploader as default };

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

@@ -0,0 +1,2 @@
+import { UploaderSize, UploaderVariant } from "../../packages/lumx-core/src/js/components/Uploader/index.js";
+import { Uploader, UploaderProps } from "./Uploader.js";

package/_internal/components/user-block/UserBlock.d.ts

@@ -0,0 +1,31 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { AvatarProps } from "../avatar/Avatar.js";
+import { UserBlockProps as UserBlockProps$1, UserBlockPropsToOverride, UserBlockSize } from "../../packages/lumx-core/src/js/components/UserBlock/index.js";
+
+//#region src/components/user-block/UserBlock.d.ts
+type UserBlockProps = VueToJSXProps<UserBlockProps$1, UserBlockPropsToOverride | 'handleClick' | 'handleMouseEnter' | 'handleMouseLeave' | 'simpleAction' | 'multipleActions' | 'additionalFields' | 'after'> & {
+  /** Props to pass to the avatar. */avatarProps?: Omit<AvatarProps, 'alt'>; /** Props to pass to the link wrapping the avatar thumbnail. */
+  linkProps?: Record<string, any>;
+};
+/**
+ * UserBlock component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const UserBlock: import("vue").DefineSetupFnComponent<UserBlockProps, {
+  click: () => boolean;
+  mouseenter: () => boolean;
+  mouseleave: () => boolean;
+}, {}, Omit<UserBlockProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "after" | UserBlockPropsToOverride | "simpleAction" | "multipleActions" | "additionalFields"> & {
+  class?: ClassValue;
+} & {
+  /** Props to pass to the avatar. */avatarProps?: Omit<AvatarProps, "alt">; /** Props to pass to the link wrapping the avatar thumbnail. */
+  linkProps?: Record<string, any>;
+} & {
+  onClick?: (() => any) | undefined;
+  onMouseenter?: (() => any) | undefined;
+  onMouseleave?: (() => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { UserBlock, UserBlockProps };