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

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

@@ -0,0 +1,31 @@
+import { Kind } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Message/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface MessageProps extends HasClassName {
+  /** Content. */
+  children?: JSXElement;
+  /** Whether the message has a background or not. */
+  hasBackground?: boolean;
+  /** Message variant. */
+  kind?: Kind;
+  /** Message custom icon SVG path. */
+  icon?: string;
+  /** Reference to the message container element. */
+  ref?: CommonRef;
+  /**
+   * Displays a close button.
+   *
+   * NB: only available if `kind === 'info' && hasBackground === true`
+   */
+  closeButtonProps?: {
+    /** The callback called when the button is clicked */onClick: () => void; /** The label of the close button. */
+    label: string;
+  };
+}
+//#endregion
+export { MessageProps };

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

@@ -0,0 +1,85 @@
+import { ColorPalette, Emphasis, Kind, Size } from "../../constants/enums/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 { IconButton } from "../Button/IconButton.js";
+import { mdiAlert } from "@lumx/icons/esm/alert.js";
+import { mdiAlertCircle } from "@lumx/icons/esm/alert-circle.js";
+import { mdiCheckCircle } from "@lumx/icons/esm/check-circle.js";
+import { mdiInformation } from "@lumx/icons/esm/information.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mdiClose } from "@lumx/icons/esm/close.js";
+//#region ../lumx-core/src/js/components/Message/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Message";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-message";
+var { block, element } = bem(CLASSNAME);
+/**
+* Associative map from message kind to color and icon.
+*/
+var CONFIG = {
+	[Kind.error]: {
+		color: ColorPalette.red,
+		icon: mdiAlert
+	},
+	[Kind.info]: {
+		color: ColorPalette.blue,
+		icon: mdiInformation
+	},
+	[Kind.success]: {
+		color: ColorPalette.green,
+		icon: mdiCheckCircle
+	},
+	[Kind.warning]: {
+		color: ColorPalette.yellow,
+		icon: mdiAlertCircle
+	}
+};
+/**
+* Message component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Message = (props) => {
+	const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ref, ...forwardedProps } = props;
+	const { color, icon } = CONFIG[kind] || {};
+	const { onClick, label: closeButtonLabel } = closeButtonProps || {};
+	const isCloseButtonDisplayed = hasBackground && kind === "info" && onClick && closeButtonLabel;
+	return /* @__PURE__ */ jsxs("div", {
+		...forwardedProps,
+		ref,
+		className: import_classnames.default(className, block({
+			[`color-${color}`]: Boolean(color),
+			"has-background": hasBackground
+		})),
+		children: [
+			(customIcon || icon) && Icon({
+				className: element("icon"),
+				icon: customIcon || icon,
+				size: Size.xs,
+				color
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: element("text"),
+				children
+			}),
+			isCloseButtonDisplayed && IconButton({
+				className: element("close-button"),
+				icon: mdiClose,
+				handleClick: onClick,
+				label: closeButtonLabel,
+				emphasis: Emphasis.low
+			})
+		]
+	});
+};
+Message.displayName = COMPONENT_NAME;
+Message.className = CLASSNAME;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, Message };

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

@@ -0,0 +1,18 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Mosaic/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface MosaicProps extends HasClassName, HasTheme {
+  /** Thumbnails. */
+  thumbnails: any[];
+  /** On image click callback. */
+  handleClick?(index: number): void;
+  Thumbnail: any;
+  ref?: CommonRef;
+}
+type MosaicPropsToOverride = 'Thumbnail' | 'thumbnails';
+//#endregion
+export { MosaicProps, MosaicPropsToOverride };

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

@@ -0,0 +1,70 @@
+import { Alignment, AspectRatio } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import take from "lodash/take.js";
+//#region ../lumx-core/src/js/components/Mosaic/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Mosaic";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-mosaic";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* Mosaic component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Mosaic = (props) => {
+	const { className, theme, thumbnails, handleClick, Thumbnail, ref, ...forwardedProps } = props;
+	const onImageClick = () => {
+		if (!handleClick) return void 0;
+		return (index, onClick) => (event) => {
+			onClick?.(event);
+			handleClick?.(index);
+		};
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			"has-1-thumbnail": thumbnails?.length === 1,
+			"has-2-thumbnails": thumbnails?.length === 2,
+			"has-3-thumbnails": thumbnails?.length === 3,
+			"has-4-thumbnails": thumbnails?.length >= 4
+		})),
+		children: /* @__PURE__ */ jsx("div", {
+			className: element("wrapper"),
+			children: take(thumbnails, 4).map((thumbnail, index) => {
+				const { image, onClick, align, ...thumbnailProps } = thumbnail;
+				return /* @__PURE__ */ jsxs("div", {
+					className: element("thumbnail"),
+					children: [/* @__PURE__ */ jsx(Thumbnail, {
+						...thumbnailProps,
+						align: align || Alignment.left,
+						image,
+						theme,
+						aspectRatio: AspectRatio.free,
+						fillHeight: true,
+						onClick: onImageClick()?.(index, onClick) || onClick
+					}), thumbnails.length > 4 && index === 3 && /* @__PURE__ */ jsx("div", {
+						className: element("overlay"),
+						children: /* @__PURE__ */ jsxs("span", { children: ["+", thumbnails.length - 4] })
+					})]
+				}, index);
+			})
+		})
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, Mosaic };

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

@@ -0,0 +1,39 @@
+import { ValueOf } from "../../types/ValueOf.js";
+
+//#region ../lumx-core/src/js/components/Popover/constants.d.ts
+/**
+ * Different possible placements for the popover.
+ */
+declare const Placement: {
+  readonly AUTO: "auto";
+  readonly AUTO_END: "auto-end";
+  readonly AUTO_START: "auto-start";
+  readonly TOP: "top";
+  readonly TOP_END: "top-end";
+  readonly TOP_START: "top-start";
+  readonly RIGHT: "right";
+  readonly RIGHT_END: "right-end";
+  readonly RIGHT_START: "right-start";
+  readonly BOTTOM: "bottom";
+  readonly BOTTOM_END: "bottom-end";
+  readonly BOTTOM_START: "bottom-start";
+  readonly LEFT: "left";
+  readonly LEFT_END: "left-end";
+  readonly LEFT_START: "left-start";
+};
+type Placement = ValueOf<typeof Placement>;
+/**
+ * Popover fit anchor width options.
+ */
+declare const FitAnchorWidth: {
+  readonly MAX_WIDTH: "maxWidth";
+  readonly MIN_WIDTH: "minWidth";
+  readonly WIDTH: "width";
+};
+type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
+/**
+ * Popover height/width sizes
+ */
+declare const POPOVER_SIZES: readonly ["m", "l", "xl", "xxl"];
+//#endregion
+export { FitAnchorWidth, POPOVER_SIZES, Placement };

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

@@ -0,0 +1,37 @@
+import { Size } from "../../constants/enums/index.js";
+//#region ../lumx-core/src/js/components/Popover/constants.ts
+/**
+* Different possible placements for the popover.
+*/
+var Placement = {
+	AUTO: "auto",
+	AUTO_END: "auto-end",
+	AUTO_START: "auto-start",
+	TOP: "top",
+	TOP_END: "top-end",
+	TOP_START: "top-start",
+	RIGHT: "right",
+	RIGHT_END: "right-end",
+	RIGHT_START: "right-start",
+	BOTTOM: "bottom",
+	BOTTOM_END: "bottom-end",
+	BOTTOM_START: "bottom-start",
+	LEFT: "left",
+	LEFT_END: "left-end",
+	LEFT_START: "left-start"
+};
+/**
+* Popover fit anchor width options.
+*/
+var FitAnchorWidth = {
+	MAX_WIDTH: "maxWidth",
+	MIN_WIDTH: "minWidth",
+	WIDTH: "width"
+};
+/**
+* Popover default z-index
+*/
+var POPOVER_ZINDEX = 9999;
+Size.m, Size.l, Size.xl, Size.xxl;
+//#endregion
+export { FitAnchorWidth, POPOVER_ZINDEX, Placement };

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

@@ -0,0 +1,65 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasCloseMode } from "../../types/HasCloseMode.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { FitAnchorWidth, Placement } from "./constants.js";
+import { Elevation, Offset } from "./types.js";
+
+//#region ../lumx-core/src/js/components/Popover/index.d.ts
+/**
+ * Shared popover props used by both React and Vue wrappers.
+ *
+ * Framework-specific props (ref types, children, callbacks) are added by each wrapper.
+ * The `anchorRef`, `boundaryRef`, `focusElement`, `parentElement`, `focusTrapZoneElement`
+ * are typed as `any` here because React uses `RefObject<HTMLElement>` while Vue uses
+ * raw `HTMLElement` — each framework narrows the type in its own props definition.
+ */
+interface PopoverProps extends HasClassName, HasTheme, HasCloseMode {
+  /** Reference to the DOM element used to set the position of the popover. */
+  anchorRef?: CommonRef;
+  /** Customize the root element tag. */
+  as?: string;
+  /** Element which will act as boundary when opening the popover. */
+  boundaryRef?: CommonRef;
+  /** Whether a click anywhere out of the popover would close it. */
+  closeOnClickAway?: boolean;
+  /** Whether an escape key press would close the popover. */
+  closeOnEscape?: boolean;
+  /** Shadow elevation. */
+  elevation?: Elevation;
+  /**
+   * Manage popover width:
+   *   - `maxWidth`: popover not bigger than anchor
+   *   - `minWidth` or `true`: popover not smaller than anchor
+   *   - `width`: popover equal to the anchor.
+   */
+  fitToAnchorWidth?: FitAnchorWidth | boolean;
+  /** Constrain popover height to avoid overflowing the viewport. */
+  fitWithinViewportHeight?: boolean;
+  /** Element to focus when opening the popover. */
+  focusElement?: CommonRef;
+  /** Whether the focus should go back on the anchor when popover closes and focus is within. */
+  focusAnchorOnClose?: boolean;
+  /** Whether we put an arrow or not. */
+  hasArrow?: boolean;
+  /** Whether the popover is open or not. */
+  isOpen: boolean;
+  /** Offset placement relative to anchor. */
+  offset?: Offset;
+  /** Reference to the parent element that triggered the popover. */
+  parentElement?: CommonRef;
+  /** Placement relative to anchor. */
+  placement?: Placement;
+  /** Whether the popover should be rendered into a portal. */
+  usePortal?: boolean;
+  /** The element in which the focus trap should be set. Default to popover. */
+  focusTrapZoneElement?: CommonRef;
+  /** Z-axis position. */
+  zIndex?: number;
+  /** Whether the popover should trap the focus within itself. */
+  withFocusTrap?: boolean;
+  /** On close callback (on click away or Escape pressed). Framework wrappers provide their own type. */
+  handleClose?(): void;
+}
+//#endregion
+export { PopoverProps };

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

@@ -0,0 +1,74 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { POPOVER_ZINDEX, Placement } from "./constants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Popover/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Popover";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-popover";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props (used by framework wrappers).
+*/
+var DEFAULT_PROPS = {
+	closeMode: "unmount",
+	elevation: 3,
+	placement: Placement.AUTO,
+	focusAnchorOnClose: true,
+	usePortal: true,
+	zIndex: POPOVER_ZINDEX
+};
+/**
+* Popover core UI component.
+*
+* Framework-specific components (Portal, ClickAwayProvider, ThemeProvider) are passed
+* as a second argument by the React/Vue wrappers.
+*/
+var Popover = (props, { Portal, ClickAwayProvider, ThemeProvider }) => {
+	const { as: asTag = "div", children, className, closeMode = DEFAULT_PROPS.closeMode, elevation = DEFAULT_PROPS.elevation, hasArrow, isOpen, position, popoverStyle, arrowStyle, theme, ref, arrowRef, usePortal = DEFAULT_PROPS.usePortal, clickAwayCallback, clickAwayRefs, unmountSentinel, ...forwardedProps } = props;
+	const isHidden = !isOpen && closeMode === "hide";
+	const isMounted = isOpen || closeMode === "hide";
+	const Component = asTag;
+	const adjustedElevation = Math.min(elevation || 0, 5);
+	if (!isMounted) return null;
+	return /* @__PURE__ */ jsx(Portal, {
+		enabled: usePortal,
+		children: /* @__PURE__ */ jsxs(Component, {
+			...forwardedProps,
+			ref,
+			className: import_classnames.default(className, block({
+				[`theme-${theme}`]: Boolean(theme),
+				[`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
+				[`position-${position}`]: Boolean(position),
+				"is-hidden": Boolean(isHidden)
+			})),
+			hidden: isHidden || void 0,
+			style: isHidden ? void 0 : popoverStyle,
+			"data-popper-placement": position,
+			children: [unmountSentinel, /* @__PURE__ */ jsxs(ClickAwayProvider, {
+				callback: !isHidden && clickAwayCallback,
+				childrenRefs: clickAwayRefs,
+				children: [hasArrow && /* @__PURE__ */ jsx("div", {
+					ref: arrowRef,
+					className: element("arrow"),
+					style: isHidden ? void 0 : arrowStyle,
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 14 14",
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx("path", { d: "M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z" })
+					})
+				}), /* @__PURE__ */ jsx(ThemeProvider, {
+					value: theme,
+					children
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, Popover };

package/_internal/packages/lumx-core/src/js/components/Popover/types.d.ts

@@ -0,0 +1,39 @@
+import { POPOVER_SIZES } from "./constants.js";
+import { PXSize, VHSize } from "../../utils/browser/css/types.js";
+
+//#region ../lumx-core/src/js/components/Popover/types.d.ts
+/**
+ * Offset of the popover.
+ */
+interface Offset {
+  /** Offset size along the reference. */
+  along?: number;
+  /** Offset size away from the reference. */
+  away?: number;
+}
+/**
+ * Popover elevation index.
+ */
+type Elevation = 1 | 2 | 3 | 4 | 5;
+/** Popover size value — pixel value, or "t-shirt" size token. */
+type PopoverSize = PXSize | (typeof POPOVER_SIZES)[number];
+/** Popover height value — extends PopoverSize with viewport-relative unit. */
+type PopoverHeight = PopoverSize | VHSize;
+/** Popover width value — same as PopoverSize (pixels or t-shirt only). */
+type PopoverWidth = PopoverSize;
+interface PopoverSizes {
+  /** Exact width (pixels or t-shirt size). Combines with `fitToAnchorWidth`: if both target the same CSS property, the explicit prop wins for `width`. */
+  width?: PopoverWidth;
+  /** Minimum width (pixels or t-shirt size). Combines with `fitToAnchorWidth='minWidth'` as `max(anchor, value)`. */
+  minWidth?: PopoverWidth;
+  /** Maximum width (pixels or t-shirt size). Combines with `fitToAnchorWidth='maxWidth'` as `min(anchor, value)`. */
+  maxWidth?: PopoverWidth;
+  /** Exact height (pixels, vh, or t-shirt size). */
+  height?: PopoverHeight;
+  /** Minimum height (pixels, vh, or t-shirt size). */
+  minHeight?: PopoverHeight;
+  /** Maximum height (pixels, vh, or t-shirt size). Combines with `fitWithinViewportHeight` as `min(maxHeight, available)`. */
+  maxHeight?: PopoverHeight;
+}
+//#endregion
+export { Elevation, Offset, PopoverHeight, PopoverSizes, PopoverWidth };

package/_internal/packages/lumx-core/src/js/components/Popover/utils/buildPopoverMiddleware.js

@@ -0,0 +1,53 @@
+import { arrow, autoPlacement, flip, offset, shift, size } from "../../../../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { resolveCssSize } from "../../../utils/browser/css/resolveCssSize.js";
+import { cssMax, cssMin } from "../../../utils/browser/css/combineSize.js";
+//#region ../lumx-core/src/js/components/Popover/utils/buildPopoverMiddleware.ts
+/**
+* Build the floating-ui middleware array for popover positioning.
+*
+* Middleware order: offset → flip/autoPlacement → shift → size → arrow
+*/
+function buildPopoverMiddleware(options) {
+	const { offset: offset$1, hasArrow, fitWidth, fitWithinViewportHeight, width: rawWidth, minWidth: rawMinWidth, maxWidth: rawMaxWidth, height: rawHeight, minHeight: rawMinHeight, maxHeight: rawMaxHeight, boundary, parsedPlacement, arrowElement } = options;
+	const width = resolveCssSize(rawWidth);
+	const minWidth = resolveCssSize(rawMinWidth);
+	const maxWidth = resolveCssSize(rawMaxWidth);
+	const height = resolveCssSize(rawHeight);
+	const minHeight = resolveCssSize(rawMinHeight);
+	const maxHeight = resolveCssSize(rawMaxHeight);
+	const middlewares = [];
+	const awayOffset = (offset$1?.away ?? 0) + (hasArrow ? 14 : 0);
+	const alongOffset = offset$1?.along ?? 0;
+	middlewares.push(offset({
+		mainAxis: awayOffset,
+		crossAxis: alongOffset
+	}));
+	if (parsedPlacement.isAuto) middlewares.push(autoPlacement({
+		...boundary ? { boundary } : {},
+		alignment: parsedPlacement.autoAlignment
+	}));
+	else {
+		middlewares.push(flip(boundary ? { boundary } : {}));
+		middlewares.push(shift(boundary ? { boundary } : {}));
+	}
+	if (!!fitWidth || !!fitWithinViewportHeight || width || minWidth || maxWidth || height || minHeight || maxHeight) middlewares.push(size({
+		...boundary ? { boundary } : {},
+		apply({ availableHeight, rects, elements }) {
+			const anchorWidth = `${rects.reference.width}px`;
+			elements.floating.style.width = width || (fitWidth === "width" ? anchorWidth : "");
+			elements.floating.style.minWidth = cssMax(minWidth, fitWidth === "minWidth" ? anchorWidth : "");
+			elements.floating.style.maxWidth = cssMin(maxWidth, fitWidth === "maxWidth" ? anchorWidth : "");
+			elements.floating.style.height = height || "";
+			elements.floating.style.minHeight = minHeight || "";
+			const adaptedAvailableHeight = `${Math.max(0, availableHeight - 14)}px`;
+			elements.floating.style.maxHeight = cssMin(maxHeight, fitWithinViewportHeight ? adaptedAvailableHeight : "");
+		}
+	}));
+	if (hasArrow && arrowElement) middlewares.push(arrow({
+		element: arrowElement,
+		padding: 14 / 2
+	}));
+	return middlewares;
+}
+//#endregion
+export { buildPopoverMiddleware };

package/_internal/packages/lumx-core/src/js/components/Popover/utils/computeArrowStyles.js

@@ -0,0 +1,13 @@
+//#region ../lumx-core/src/js/components/Popover/utils/computeArrowStyles.ts
+/**
+* Compute arrow CSS styles from floating-ui middleware data.
+*/
+function computeArrowStyles(arrowData) {
+	if (!arrowData) return void 0;
+	return {
+		left: arrowData.x != null ? `${arrowData.x}px` : "",
+		top: arrowData.y != null ? `${arrowData.y}px` : ""
+	};
+}
+//#endregion
+export { computeArrowStyles };

package/_internal/packages/lumx-core/src/js/components/Popover/utils/getFloatingPlacement.js

@@ -0,0 +1,10 @@
+//#region ../lumx-core/src/js/components/Popover/utils/getFloatingPlacement.ts
+/**
+* Get the floating-ui placement from the parsed placement config.
+* Returns undefined for auto-placement (floating-ui handles it via autoPlacement middleware).
+*/
+function getFloatingPlacement(parsedPlacement) {
+	return parsedPlacement.isAuto ? void 0 : parsedPlacement.floatingPlacement;
+}
+//#endregion
+export { getFloatingPlacement };

package/_internal/packages/lumx-core/src/js/components/Popover/utils/parseAutoPlacement.js

@@ -0,0 +1,21 @@
+//#region ../lumx-core/src/js/components/Popover/utils/parseAutoPlacement.ts
+/**
+* Parse a Popover placement into floating-ui placement or auto-placement config.
+*/
+function parseAutoPlacement(placement) {
+	if (placement === "auto") return { isAuto: true };
+	if (placement === "auto-start") return {
+		isAuto: true,
+		autoAlignment: "start"
+	};
+	if (placement === "auto-end") return {
+		isAuto: true,
+		autoAlignment: "end"
+	};
+	return {
+		floatingPlacement: placement,
+		isAuto: false
+	};
+}
+//#endregion
+export { parseAutoPlacement };

package/_internal/packages/lumx-core/src/js/components/Popover/utils/parseFitWidth.js

@@ -0,0 +1,12 @@
+import { FitAnchorWidth } from "../constants.js";
+//#region ../lumx-core/src/js/components/Popover/utils/parseFitWidth.ts
+/**
+* Parse the fitToAnchorWidth option into the CSS property name to apply.
+*/
+function parseFitWidth(fitToAnchorWidth) {
+	if (!fitToAnchorWidth) return void 0;
+	if (typeof fitToAnchorWidth === "string") return fitToAnchorWidth;
+	return FitAnchorWidth.MIN_WIDTH;
+}
+//#endregion
+export { parseFitWidth };

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

@@ -0,0 +1,13 @@
+import { HasAriaLabelOrLabelledBy } from "../../types/HasAriaLabelOrLabelledBy.js";
+import { PopoverProps } from "../Popover/index.js";
+
+//#region ../lumx-core/src/js/components/PopoverDialog/index.d.ts
+/**
+ * PopoverDialog props.
+ * The PopoverDialog has the same props as the Popover but requires an accessible label.
+ */
+type PopoverDialogProps = PopoverProps & HasAriaLabelOrLabelledBy & {
+  /** Accessible label for the dialog (alternative to aria-label prop). */label?: string;
+};
+//#endregion
+export { PopoverDialogProps };

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

@@ -0,0 +1,15 @@
+//#region ../lumx-core/src/js/components/PopoverDialog/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "PopoverDialog";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-popover-dialog";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };

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

@@ -0,0 +1,32 @@
+import { 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 { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/ProgressCircular/index.d.ts
+/**
+ * Progress sizes.
+ */
+type ProgressCircularSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm'>;
+/**
+ * Defines the props of the component.
+ */
+interface ProgressCircularProps extends HasTheme, HasClassName {
+  /**
+   * Progress circular size.
+   */
+  size?: ProgressCircularSize;
+  /**
+   * Progress display type (inline or block).
+   * @default 'block'
+   */
+  display?: 'inline' | 'block';
+  /** Component ref */
+  ref?: CommonRef;
+  /** additional props for the svg */
+  svgProps?: GenericProps;
+  /** additional props for the circle */
+  circleProps?: GenericProps;
+}
+//#endregion
+export { ProgressCircularProps, ProgressCircularSize };