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

package/_internal/packages/lumx-core/src/js/components/TimePickerField/index.d.ts

@@ -0,0 +1,61 @@
+import { SelectTextFieldTranslations } from "../../utils/select/types.js";
+
+//#region ../lumx-core/src/js/components/TimePickerField/index.d.ts
+/**
+ * Translations consumed by `TimePickerField` (forwarded as-is to the underlying
+ * `SelectTextField`).
+ */
+type TimePickerFieldTranslations = Pick<SelectTextFieldTranslations, 'clearLabel' | 'showSuggestionsLabel'>;
+/**
+ * Wrapper-level props shared by React and Vue `TimePickerField`.
+ *
+ * These represent the public API that framework wrappers expose to consumers
+ * (as opposed to the core template props which use pre-computed `TimeOfDay` values).
+ */
+interface TimePickerFieldWrapperProps {
+  /**
+   * Currently selected time. Only the time-of-day component is consumed; the
+   * date part is preserved when emitting change.
+   */
+  value?: Date;
+  /**
+   * BCP-47 locale string (e.g. `'en-US'`, `'fr-FR'`).
+   */
+  locale?: string;
+  /**
+   * Minute interval between option entries.
+   */
+  step?: number;
+  /**
+   * Lower bound. Options strictly before this time remain **visible** in the
+   * dropdown but are rendered as disabled (cannot be picked). Typed input
+   * below this bound is snapped up to it on blur.
+   */
+  minTime?: Date;
+  /**
+   * Upper bound. Options strictly after this time remain **visible** in the
+   * dropdown but are rendered as disabled (cannot be picked). Typed input
+   * above this bound is snapped down to it on blur.
+   */
+  maxTime?: Date;
+  /**
+   * Controls how the time value interacts with `[minTime, maxTime]` bounds.
+   * Typed input is always snapped to bounds on blur.
+   * - `'enforce'`: additionally, the controlled `value` prop is proactively
+   *   clamped to bounds on mount and whenever bounds change, calling
+   *   `onChange` when adjusted.
+   * - `'on-blur'` (default): only blur snapping applies.
+   */
+  boundsMode?: 'on-blur' | 'enforce';
+  /**
+   * Translation labels for clear and show suggestions buttons.
+   */
+  translations: TimePickerFieldTranslations;
+}
+/**
+ * `SelectTextField` props managed internally by the `TimePickerField` wrappers
+ * (omitted from the inherited `SelectTextField` props in both React and Vue).
+ */
+type TimePickerFieldOwnedSelectProps = 'value' | 'listStatus' | 'translations' | 'options' | 'getOptionId' | 'getOptionName' | 'getOptionDescription' | 'getSectionId' | 'renderOption' | 'filter' | 'onBlur' | 'onSearch' | 'selectionType' | 'maxLength' | 'searchInputValue' | 'openOnFocus' | 'beforeOptions' | 'popoverProps';
+//#endregion
+export { TimePickerFieldOwnedSelectProps, TimePickerFieldTranslations, TimePickerFieldWrapperProps };

package/_internal/packages/lumx-core/src/js/components/TimePickerField/index.js

@@ -0,0 +1,72 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/TimePickerField/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "TimePickerField";
+/**
+* Component default class name (BEM root).
+*/
+var CLASSNAME = "lumx-time-picker-field";
+var { block } = bem(CLASSNAME);
+/**
+* Default values for `TimePickerFieldWrapperProps`.
+*/
+var DEFAULT_PROPS = {
+	step: 30,
+	boundsMode: "on-blur"
+};
+/**
+* Translations consumed by `TimePickerField` (forwarded as-is to the underlying
+* `SelectTextField`).
+*/
+/**
+* Wrapper-level props shared by React and Vue `TimePickerField`.
+*
+* These represent the public API that framework wrappers expose to consumers
+* (as opposed to the core template props which use pre-computed `TimeOfDay` values).
+*/
+/**
+* `SelectTextField` props managed internally by the `TimePickerField` wrappers
+* (omitted from the inherited `SelectTextField` props in both React and Vue).
+*/
+/**
+* Core props for the `TimePickerField` template.
+*/
+/**
+* Injected framework-specific components for TimePickerField rendering.
+*/
+/**
+* `TimePickerField` core template.
+*
+* Renders a `SelectTextField<TimeOfDay>` with an option list built from
+* `buildTimeList`. Out-of-range options (strictly before `minTime` / after
+* `maxTime`) remain visible in the dropdown but are rendered as disabled.
+*
+* Framework-specific components are passed as a second argument by the
+* React/Vue wrappers.
+*
+* @param props      Component props.
+* @param components Injected framework-specific components.
+* @return JSX element.
+*/
+var TimePickerField = (props, { SelectTextField, Option }) => {
+	const { options, translations, className, handleChange, handleSearch, handleBlur, ...fowardedProps } = props;
+	return createVNode(SelectTextField, mergeProps(fowardedProps, {
+		"className": block([className]),
+		"selectionType": "single",
+		"options": options,
+		"getOptionId": "name",
+		"renderOption": (entry) => createVNode(Option, { "isDisabled": entry.outOfRange }, null),
+		"onChange": handleChange,
+		"onSearch": handleSearch,
+		"onBlur": handleBlur,
+		"filter": "auto",
+		"translations": translations
+	}), null);
+};
+TimePickerField.displayName = COMPONENT_NAME;
+TimePickerField.className = CLASSNAME;
+//#endregion
+export { DEFAULT_PROPS, TimePickerField };

package/_internal/packages/lumx-core/src/js/components/Toolbar/index.d.ts

@@ -0,0 +1,23 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Toolbar/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ToolbarProps extends HasClassName {
+  /** After content (placed after the label). */
+  after?: JSXElement;
+  /** Before content (placed before the label). */
+  before?: JSXElement;
+  /** Label content. */
+  label?: JSXElement;
+  /** Component ref. */
+  ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+declare const TOOLBAR_NAME = "Toolbar";
+//#endregion
+export { TOOLBAR_NAME, ToolbarProps };

package/_internal/packages/lumx-core/src/js/components/Toolbar/index.js

@@ -0,0 +1,36 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Toolbar/index.tsx
+/**
+* Defines the props of the component.
+*/
+/**
+* Component display name.
+*/
+var TOOLBAR_NAME = "Toolbar";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-toolbar";
+var { block, element } = bem(CLASSNAME);
+/**
+* Toolbar component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Toolbar = (props) => {
+	const { after, before, className, label, ref, ...forwardedProps } = props;
+	return createVNode("div", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({
+		"has-after": Boolean(after),
+		"has-before": Boolean(before),
+		"has-label": Boolean(label)
+	})) }), [
+		before && createVNode("div", { "className": element("before") }, [before]),
+		label && createVNode("div", { "className": element("label") }, [label]),
+		after && createVNode("div", { "className": element("after") }, [after])
+	]);
+};
+//#endregion
+export { CLASSNAME, TOOLBAR_NAME, Toolbar };

package/_internal/packages/lumx-core/src/js/components/Tooltip/constants.d.ts

@@ -0,0 +1,4 @@
+//#region ../lumx-core/src/js/components/Tooltip/constants.d.ts
+declare const ARIA_LINK_MODES: readonly ["aria-describedby", "aria-labelledby"];
+//#endregion
+export { ARIA_LINK_MODES };

package/_internal/packages/lumx-core/src/js/components/Tooltip/constants.js

@@ -0,0 +1,8 @@
+//#region ../lumx-core/src/js/components/Tooltip/constants.ts
+/**
+* Make sure tooltip appear above popovers.
+* Hardcoded as POPOVER_ZINDEX (9999) + 1.
+*/
+var TOOLTIP_ZINDEX = 1e4;
+//#endregion
+export { TOOLTIP_ZINDEX };

package/_internal/packages/lumx-core/src/js/components/Tooltip/index.d.ts

@@ -0,0 +1,25 @@
+import { HasCloseMode } from "../../types/HasCloseMode.js";
+import { ARIA_LINK_MODES } from "./constants.js";
+
+//#region ../lumx-core/src/js/components/Tooltip/index.d.ts
+/** Position of the tooltip relative to the anchor element. */
+type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Framework-agnostic tooltip props (shared between React and Vue wrappers).
+ */
+interface TooltipProps extends HasCloseMode {
+  /** Delay (in ms) before closing the tooltip. */
+  delay?: number;
+  /** Whether the tooltip is displayed even without the mouse hovering the anchor. */
+  forceOpen?: boolean;
+  /** Label text. */
+  label?: string | null | false;
+  /** Placement of the tooltip relative to the anchor. */
+  placement?: TooltipPlacement;
+  /** Choose how the tooltip text should link to the anchor */
+  ariaLinkMode?: (typeof ARIA_LINK_MODES)[number];
+  /** Z-index for the tooltip */
+  zIndex?: number;
+}
+//#endregion
+export { TooltipPlacement, TooltipProps };

package/_internal/packages/lumx-core/src/js/components/Tooltip/index.js

@@ -0,0 +1,56 @@
+import { visuallyHidden } from "../../utils/classNames/visually-hidden/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { TOOLTIP_ZINDEX } from "./constants.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Tooltip/index.tsx
+/** Position of the tooltip relative to the anchor element. */
+/**
+* Framework-agnostic tooltip props (shared between React and Vue wrappers).
+*/
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	placement: "bottom",
+	closeMode: "unmount",
+	ariaLinkMode: "aria-describedby",
+	zIndex: TOOLTIP_ZINDEX
+};
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Tooltip";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-tooltip";
+var { block, element } = bem(CLASSNAME);
+/**
+* Props for the TooltipPopup rendering component.
+*/
+/**
+* Tooltip popup rendering component.
+* Pure JSX template for the tooltip popup element (arrow + inner text + BEM classes).
+*
+* @param props Component props.
+* @return JSX element.
+*/
+var TooltipPopup = (props) => {
+	const { id, label, position, isHidden, style, zIndex = TOOLTIP_ZINDEX, className, ref, ...forwardedProps } = props;
+	const labelLines = label ? label.split("\n") : [];
+	return createVNode("div", mergeProps({ "ref": ref }, forwardedProps, {
+		"id": id,
+		"role": "tooltip",
+		"className": import_classnames.default(className, block({ [`position-${position}`]: Boolean(position) }), isHidden && visuallyHidden()),
+		"style": {
+			...isHidden ? void 0 : style,
+			zIndex
+		},
+		"data-popper-placement": position
+	}), [createVNode("div", { "className": element("arrow") }, null), createVNode("div", { "className": element("inner") }, [labelLines.map((line, index) => createVNode("p", { "key": index }, [line]))])]);
+};
+TooltipPopup.displayName = COMPONENT_NAME;
+TooltipPopup.className = CLASSNAME;
+//#endregion
+export { DEFAULT_PROPS, TooltipPopup };

package/_internal/packages/lumx-core/src/js/components/Tooltip/tooltipOpenManager.js

@@ -0,0 +1,93 @@
+import { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from "../../constants/components/index.js";
+import { IS_BROWSER } from "../../constants/browser/index.js";
+import { isFocusVisible } from "../../utils/browser/isFocusVisible.js";
+import { isHoverNotSupported } from "../../utils/browser/isHoverNotSupported.js";
+//#region ../lumx-core/src/js/components/Tooltip/tooltipOpenManager.ts
+/**
+* Framework-agnostic open/close state machine for tooltip.
+* Manages hover, touch, focus, timers, and escape key behavior.
+*/
+function createTooltipOpenManager(options) {
+	const { delay, onStateChange } = options;
+	let timer;
+	let openStartTime;
+	let shouldOpen;
+	let anchorController;
+	let popperController;
+	const deferUpdate = (duration) => {
+		if (timer) clearTimeout(timer);
+		const update = () => {
+			onStateChange(!!shouldOpen);
+		};
+		if (!IS_BROWSER) update();
+		else timer = setTimeout(update, duration);
+	};
+	const hoverNotSupported = isHoverNotSupported();
+	const hasTouch = typeof window !== "undefined" && "ontouchstart" in window;
+	const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);
+	const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;
+	const open = () => {
+		if (shouldOpen && !timer) return;
+		shouldOpen = true;
+		openStartTime = Date.now();
+		deferUpdate(openDelay);
+	};
+	const getClose = (overrideDelay) => {
+		if (!shouldOpen && !timer) return;
+		shouldOpen = false;
+		deferUpdate(overrideDelay);
+	};
+	const close = () => getClose(closeDelay);
+	const closeImmediately = () => getClose(0);
+	return {
+		attachAnchor(anchorElement) {
+			anchorController = new AbortController();
+			const { signal } = anchorController;
+			if (hoverNotSupported) {
+				/**
+				* Handle touchend event.
+				* If end comes before the open delay => cancel tooltip (close immediate).
+				* Else if end comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
+				*/
+				const longPressEnd = (evt) => {
+					if (!openStartTime) return;
+					if (Date.now() - openStartTime >= openDelay) {
+						evt.stopPropagation();
+						evt.preventDefault();
+						anchorElement.focus();
+						close();
+					} else closeImmediately();
+				};
+				anchorElement.addEventListener(hasTouch ? "touchstart" : "mousedown", open, { signal });
+				anchorElement.addEventListener(hasTouch ? "touchend" : "mouseup", longPressEnd, { signal });
+			} else {
+				anchorElement.addEventListener("mouseenter", open, { signal });
+				anchorElement.addEventListener("mouseleave", close, { signal });
+				anchorElement.addEventListener("mouseup", closeImmediately, { signal });
+			}
+			anchorElement.addEventListener("focusin", (e) => {
+				if (!isFocusVisible(e.target)) return;
+				open();
+			}, { signal });
+			anchorElement.addEventListener("focusout", closeImmediately, { signal });
+		},
+		attachPopper(popperElement) {
+			popperController?.abort();
+			if (!popperElement || hoverNotSupported) return;
+			popperController = new AbortController();
+			const { signal } = popperController;
+			popperElement.addEventListener("mouseenter", open, { signal });
+			popperElement.addEventListener("mouseleave", close, { signal });
+		},
+		close() {
+			closeImmediately();
+		},
+		destroy() {
+			if (timer) clearTimeout(timer);
+			anchorController?.abort();
+			popperController?.abort();
+		}
+	};
+}
+//#endregion
+export { createTooltipOpenManager };

package/_internal/packages/lumx-core/src/js/components/Uploader/index.d.ts

@@ -0,0 +1,59 @@
+import { AspectRatio, Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { ValueOf } from "../../types/ValueOf.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+//#region ../lumx-core/src/js/components/Uploader/index.d.ts
+/**
+ * Uploader variants.
+ */
+declare const UploaderVariant: {
+  readonly square: "square";
+  readonly rounded: "rounded";
+  readonly circle: "circle";
+};
+type UploaderVariant = ValueOf<typeof UploaderVariant>;
+/**
+ * Uploader sizes.
+ */
+type UploaderSize = Extract<Size, 'xl' | 'xxl'>;
+/**
+ * Native input file props (framework-agnostic subset).
+ */
+type FileInputProps = Record<string, any>;
+/**
+ * Defines the props of the component.
+ */
+interface UploaderProps extends HasClassName, HasDisabled, HasTheme, HasAriaDisabled {
+  /** Image aspect ratio. */
+  aspectRatio?: AspectRatio;
+  /** Icon (SVG path). */
+  icon?: string;
+  /** Label text. */
+  label?: string;
+  /** Size variant. */
+  size?: UploaderSize;
+  /** Variant. */
+  variant?: UploaderVariant;
+  /** On click callback. */
+  handleClick?: (event: any) => void;
+  /** Handle file selection with a native input file. */
+  fileInputProps?: FileInputProps;
+  /** Forwarded ref to the root element. */
+  ref?: CommonRef;
+  /** Whether the component is disabled (computed from `isDisabled` and `aria-disabled`). */
+  isAnyDisabled?: boolean;
+  /** Id of the hidden file input (used to link the label `for` attribute). */
+  inputId: string;
+  /** Whether a file is currently being dragged over the input. */
+  isDragHovering?: boolean;
+  /** Callback fired when the file input value changes. */
+  handleChange?: (event: any) => void;
+  /** Root element tag or component (e.g. `'button'` or `'label'`). */
+  Component: 'button' | 'label';
+}
+type UploaderPropsToOverride = 'isAnyDisabled' | 'inputId' | 'isDragHovering' | 'fileInputProps' | 'Component';
+//#endregion
+export { UploaderProps, UploaderPropsToOverride, UploaderSize, UploaderVariant };

package/_internal/packages/lumx-core/src/js/components/Uploader/index.js

@@ -0,0 +1,64 @@
+import { AspectRatio, Size } from "../../constants/enums/index.js";
+import { visuallyHidden } from "../../utils/classNames/visually-hidden/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { Icon } from "../Icon/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Uploader/index.tsx
+/**
+* Uploader variants.
+*/
+var UploaderVariant = {
+	square: "square",
+	rounded: "rounded",
+	circle: "circle"
+};
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-uploader";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	aspectRatio: AspectRatio.horizontal,
+	size: Size.xl,
+	variant: UploaderVariant.square
+};
+/**
+* Uploader component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Uploader = (props) => {
+	const { aspectRatio = DEFAULT_PROPS.aspectRatio, className, label, icon, size = DEFAULT_PROPS.size, theme, variant = DEFAULT_PROPS.variant, isAnyDisabled, fileInputProps, inputId, isDragHovering, handleClick, handleChange, Component = "label", ref, ...forwardedProps } = props;
+	const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
+	return createVNode(Component, mergeProps({ "ref": ref }, forwardedProps, {
+		"onClick": handleClick,
+		"className": import_classnames.default(className, block({
+			[`aspect-ratio-${adjustedAspectRatio}`]: Boolean(adjustedAspectRatio),
+			[`size-${size}`]: Boolean(size),
+			[`theme-${theme}`]: Boolean(theme),
+			[`variant-${variant}`]: Boolean(variant),
+			"is-drag-hovering": isDragHovering,
+			"is-disabled": isAnyDisabled
+		}))
+	}), { default: () => [
+		createVNode("span", { "className": element("background") }, null),
+		createVNode("span", { "className": element("wrapper") }, [icon && Icon({
+			className: element("icon"),
+			icon,
+			size: Size.s
+		}), label && createVNode("span", { "className": element("label") }, [label])]),
+		fileInputProps && createVNode("input", mergeProps({
+			"type": "file",
+			"id": inputId,
+			"className": import_classnames.default(element("input"), visuallyHidden())
+		}, fileInputProps, { "onChange": handleChange }), null)
+	] });
+};
+//#endregion
+export { CLASSNAME, DEFAULT_PROPS, Uploader, UploaderVariant };

package/_internal/packages/lumx-core/src/js/components/UserBlock/index.d.ts

@@ -0,0 +1,124 @@
+import { Orientation, Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { GenericProps } from "../../types/GenericProps.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/UserBlock/index.d.ts
+/**
+ * User block sizes.
+ */
+type UserBlockSize = Extract<Size, 'xs' | 's' | 'm' | 'l'>;
+/**
+ * Props for the UserBlock component.
+ *
+ * UserBlock displays user information with an avatar, name, and optional fields.
+ * Supports both horizontal and vertical orientations with customizable actions.
+ */
+interface UserBlockProps extends HasClassName, HasTheme {
+  /**
+   * Props to pass to the Avatar component.
+   * Configure the user's avatar appearance and behavior.
+   */
+  avatarProps?: GenericProps;
+  /**
+   * Additional fields to display below the user's name.
+   * Typically used for role, department, or other user metadata.
+   */
+  fields?: string[];
+  /**
+   * Props to pass to the Link component wrapping the avatar and/or name.
+   * Used to make the user block clickable with navigation.
+   */
+  linkProps?: GenericProps;
+  /**
+   * Custom component to use for the link element.
+   * Use this to inject a framework-specific router Link component (e.g., react-router Link).
+   * @default 'a'
+   */
+  linkAs?: 'a' | any;
+  /**
+   * Content for multiple actions displayed in the action toolbar.
+   * Only visible when orientation is vertical.
+   */
+  multipleActions?: JSXElement;
+  /**
+   * The user's display name.
+   * Can be a string or custom JSX element.
+   */
+  name?: JSXElement;
+  /**
+   * Props to pass to the name wrapper element.
+   * Used to customize the name block's appearance and behavior.
+   */
+  nameProps?: GenericProps;
+  /**
+   * Layout orientation of the user block.
+   * - horizontal: Avatar and info side by side (default)
+   * - vertical: Avatar and info stacked, forces size to 'l'
+   * @default Orientation.horizontal
+   */
+  orientation?: Orientation;
+  /**
+   * Content for a single action displayed in the action toolbar.
+   * Only visible when orientation is vertical.
+   */
+  simpleAction?: JSXElement;
+  /**
+   * Size variant of the component.
+   * Note: When orientation is vertical, size is automatically forced to 'l'.
+   * @default Size.m
+   */
+  size?: UserBlockSize;
+  /**
+   * Click event handler.
+   * Called when the user clicks on the clickable area (name/avatar).
+   */
+  handleClick?(): void;
+  /**
+   * Mouse enter event handler.
+   * Called when the mouse enters the component.
+   */
+  handleMouseEnter?(): void;
+  mouseEnterProp?: string;
+  /**
+   * Mouse leave event handler.
+   * Called when the mouse leaves the component.
+   */
+  handleMouseLeave?(): void;
+  mouseLeaveProp?: string;
+  /**
+   * Additional custom fields to display below the standard fields.
+   * Only visible when size is not 'xs' or 's'.
+   */
+  additionalFields?: JSXElement;
+  /**
+   * Content to display after the entire component.
+   * Position depends on orientation:
+   * - horizontal: displayed to the right
+   * - vertical: displayed at the bottom
+   */
+  after?: JSXElement;
+  /**
+   * Custom content to replace the default name block.
+   * When provided, replaces the default name rendering.
+   */
+  children?: JSXElement;
+  /**
+   * Ref to attach to the root element.
+   */
+  ref?: CommonRef;
+  /**
+   * Text component for rendering text content.
+   * Injected by the framework wrapper (React/Vue).
+   */
+  Text: (props: any) => any;
+  /**
+   * Avatar component for rendering the user avatar.
+   * Injected by the framework wrapper (React/Vue).
+   */
+  Avatar: (props: any) => any;
+}
+type UserBlockPropsToOverride = 'Avatar' | 'Text' | 'linkProps' | 'avatarProps' | 'mouseLeaveProp' | 'mouseEnterProp';
+//#endregion
+export { UserBlockProps, UserBlockPropsToOverride, UserBlockSize };