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

package/_internal/components/notification/Notification.js

@@ -0,0 +1,97 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { mergeRefs } from "../../utils/react/mergeRefs.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from "../../constants.js";
+import { Portal } from "../../utils/Portal/Portal.js";
+import { useTransitionVisibility } from "../../hooks/useTransitionVisibility.js";
+import { NOTIFICATION_CONFIGURATION } from "./constants.js";
+import { src_exports } from "../../../index.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+import isFunction from "lodash/isFunction.js";
+//#region src/components/notification/Notification.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Notification";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-notification";
+var { block, element } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	zIndex: 9999,
+	usePortal: true
+};
+/**
+* Notification component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Notification = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { actionLabel, className, content, isOpen, onActionClick, onClick, theme = defaultTheme, type, zIndex = DEFAULT_PROPS.zIndex, usePortal = DEFAULT_PROPS.usePortal, style, ...forwardedProps } = props;
+	if (!DOCUMENT) return null;
+	const { color, icon } = NOTIFICATION_CONFIGURATION[type] || {};
+	const rootRef = useRef(null);
+	const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
+	const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
+	const handleCallback = (evt) => {
+		if (isFunction(onActionClick)) onActionClick();
+		evt?.stopPropagation();
+	};
+	if (!type || !isVisible) return null;
+	return /* @__PURE__ */ jsx(Portal, {
+		enabled: usePortal,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: mergeRefs(ref, rootRef),
+			role: "alert",
+			...forwardedProps,
+			className: classNames.join(className, block({
+				[`color-${color}`]: Boolean(color),
+				"has-action": hasAction,
+				"is-hidden": !isOpen
+			})),
+			onClick,
+			style: {
+				...style,
+				zIndex
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: element("icon"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon,
+						size: src_exports.Size.s
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: element("content"),
+					children: content
+				}),
+				hasAction && /* @__PURE__ */ jsx("div", {
+					className: element("action"),
+					children: /* @__PURE__ */ jsx(Button, {
+						emphasis: src_exports.Emphasis.medium,
+						theme,
+						onClick: handleCallback,
+						children: /* @__PURE__ */ jsx("span", { children: actionLabel })
+					})
+				})
+			]
+		})
+	});
+});
+Notification.displayName = COMPONENT_NAME;
+Notification.className = CLASSNAME;
+Notification.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Notification };

package/_internal/components/notification/constants.js

@@ -0,0 +1,28 @@
+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";
+//#region src/components/notification/constants.ts
+/**
+* Notification icon and colors according to their type.
+*/
+var NOTIFICATION_CONFIGURATION = {
+	error: {
+		color: "red",
+		icon: mdiAlert
+	},
+	info: {
+		color: "blue",
+		icon: mdiInformation
+	},
+	success: {
+		color: "green",
+		icon: mdiCheckCircle
+	},
+	warning: {
+		color: "yellow",
+		icon: mdiAlertCircle
+	}
+};
+//#endregion
+export { NOTIFICATION_CONFIGURATION };

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

@@ -0,0 +1 @@
+import { Notification, NotificationProps } from "./Notification.js";

package/_internal/components/popover/Popover.d.ts

@@ -0,0 +1,43 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { PopoverSizes } from "../../packages/lumx-core/src/js/components/Popover/types.js";
+import { PopoverProps as PopoverProps$1 } from "../../packages/lumx-core/src/js/components/Popover/index.js";
+import { ReactNode, RefObject } from "react";
+
+//#region src/components/popover/Popover.d.ts
+/**
+ * Defines the props of the component.
+ * Extends core PopoverProps, overriding ref-typed props with React-specific `RefObject` types
+ * and replacing `handleClose` with the React-idiomatic `onClose` callback.
+ */
+interface PopoverProps extends index_d_exports.GenericProps, ReactToJSX<PopoverProps$1, 'anchorRef' | 'as' | 'boundaryRef' | 'focusElement' | 'parentElement' | 'focusTrapZoneElement' | 'className'>, PopoverSizes {
+  /** Reference to the DOM element used to set the position of the popover. */
+  anchorRef: RefObject<HTMLElement>;
+  /** Customize the root element. (Must accept ref forwarding and props forwarding!). */
+  as?: React.ElementType;
+  /** Element which will act as boundary when opening the popover. */
+  boundaryRef?: RefObject<HTMLElement>;
+  /** Content. */
+  children: ReactNode;
+  /** Element to focus when opening the popover. */
+  focusElement?: RefObject<HTMLElement>;
+  /** Reference to the parent element that triggered the popover (will get back focus on close or else fallback on the anchor element). */
+  parentElement?: RefObject<HTMLElement>;
+  /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
+  usePortal?: boolean;
+  /** The element in which the focus trap should be set. Default to popover. */
+  focusTrapZoneElement?: RefObject<HTMLElement>;
+  /** On close callback (on click away or Escape pressed). */
+  onClose?(): void;
+}
+/**
+ * Popover component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Popover: Comp<PopoverProps, HTMLDivElement>;
+//#endregion
+export { Popover, PopoverProps };

package/_internal/components/popover/Popover.js

@@ -0,0 +1,86 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useFocus } from "../../hooks/useFocus.js";
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { ThemeProvider } from "../../utils/theme/ThemeContext.js";
+import { DOCUMENT } from "../../constants.js";
+import { ClickAwayProvider } from "../../utils/ClickAwayProvider/ClickAwayProvider.js";
+import { Portal } from "../../utils/Portal/Portal.js";
+import { useCallbackOnEscape } from "../../hooks/useCallbackOnEscape.js";
+import { useFocusTrap } from "../../hooks/useFocusTrap.js";
+import { skipRender } from "../../utils/react/skipRender.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, Popover as Popover$1 } from "../../packages/lumx-core/src/js/components/Popover/index.js";
+import { useRestoreFocusOnClose } from "../../hooks/useRestoreFocusOnClose.js";
+import { usePopoverStyle } from "./usePopoverStyle.js";
+import { useRef } from "react";
+//#region src/components/popover/Popover.tsx
+var _InnerPopover = forwardRef((props, ref) => {
+	const { anchorRef, as, children, className, closeMode = DEFAULT_PROPS.closeMode, closeOnClickAway, closeOnEscape, elevation = DEFAULT_PROPS.elevation, focusElement, hasArrow, isOpen, onClose, parentElement, usePortal = DEFAULT_PROPS.usePortal, focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose, withFocusTrap, boundaryRef, fitToAnchorWidth, fitWithinViewportHeight, focusTrapZoneElement, width, minWidth, maxWidth, height, minHeight, maxHeight, offset, placement = DEFAULT_PROPS.placement, style, theme, zIndex = DEFAULT_PROPS.zIndex, ...forwardedProps } = props;
+	const popoverRef = useRef(null);
+	const { styles, isPositioned, position, setArrowElement, setPopperElement, popperElement } = usePopoverStyle({
+		offset,
+		hasArrow,
+		fitToAnchorWidth,
+		fitWithinViewportHeight,
+		width,
+		minWidth,
+		maxWidth,
+		height,
+		minHeight,
+		maxHeight,
+		boundaryRef,
+		anchorRef,
+		placement,
+		style,
+		zIndex
+	});
+	const unmountSentinel = useRestoreFocusOnClose({
+		focusAnchorOnClose,
+		anchorRef,
+		parentElement
+	}, popperElement, isOpen);
+	const focusZoneElement = focusTrapZoneElement?.current || popoverRef?.current;
+	useCallbackOnEscape(onClose, isOpen && closeOnEscape);
+	/** Only set focus within if the focus trap is disabled as they interfere with one another. */
+	useFocus(focusElement?.current, !withFocusTrap && isOpen && isPositioned);
+	useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement?.current);
+	const clickAwayRefs = useRef([popoverRef, anchorRef]);
+	const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
+	return Popover$1({
+		...forwardedProps,
+		as,
+		children,
+		className,
+		closeMode,
+		elevation,
+		hasArrow,
+		isOpen,
+		position,
+		popoverStyle: styles.popover,
+		arrowStyle: styles.arrow,
+		theme,
+		ref: mergedRefs,
+		arrowRef: setArrowElement,
+		usePortal,
+		clickAwayCallback: closeOnClickAway && onClose,
+		clickAwayRefs,
+		unmountSentinel
+	}, {
+		Portal,
+		ClickAwayProvider,
+		ThemeProvider
+	});
+});
+_InnerPopover.displayName = COMPONENT_NAME;
+/**
+* Popover component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Popover = skipRender(() => Boolean(DOCUMENT), _InnerPopover);
+Popover.displayName = COMPONENT_NAME;
+Popover.className = CLASSNAME;
+Popover.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Popover };

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

@@ -0,0 +1,3 @@
+import { Placement } from "../../packages/lumx-core/src/js/components/Popover/constants.js";
+import { Elevation, Offset, PopoverHeight, PopoverWidth } from "../../packages/lumx-core/src/js/components/Popover/types.js";
+import { Popover, PopoverProps } from "./Popover.js";

package/_internal/components/popover/usePopoverStyle.js

@@ -0,0 +1,82 @@
+import { autoUpdate } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { useFloating } from "../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+import { IS_BROWSER } from "../../constants.js";
+import { parseAutoPlacement } from "../../packages/lumx-core/src/js/components/Popover/utils/parseAutoPlacement.js";
+import { parseFitWidth } from "../../packages/lumx-core/src/js/components/Popover/utils/parseFitWidth.js";
+import { buildPopoverMiddleware } from "../../packages/lumx-core/src/js/components/Popover/utils/buildPopoverMiddleware.js";
+import { computeArrowStyles } from "../../packages/lumx-core/src/js/components/Popover/utils/computeArrowStyles.js";
+import { getFloatingPlacement } from "../../packages/lumx-core/src/js/components/Popover/utils/getFloatingPlacement.js";
+import { useMemo, useState } from "react";
+//#region src/components/popover/usePopoverStyle.tsx
+function usePopoverStyle({ offset, hasArrow, fitToAnchorWidth, fitWithinViewportHeight, width, minWidth, maxWidth, height, minHeight, maxHeight, boundaryRef, anchorRef, placement, style, zIndex }) {
+	const [popperElement, setPopperElement] = useState(null);
+	const [arrowElement, setArrowElement] = useState(null);
+	const parsedPlacement = parseAutoPlacement(placement);
+	const fitWidth = parseFitWidth(fitToAnchorWidth);
+	const boundary = boundaryRef?.current ?? void 0;
+	const middleware = useMemo(() => buildPopoverMiddleware({
+		offset,
+		hasArrow,
+		fitWidth,
+		fitWithinViewportHeight,
+		width,
+		minWidth,
+		maxWidth,
+		height,
+		minHeight,
+		maxHeight,
+		boundary,
+		parsedPlacement,
+		arrowElement
+	}), [
+		offset,
+		hasArrow,
+		fitWidth,
+		fitWithinViewportHeight,
+		width,
+		minWidth,
+		maxWidth,
+		height,
+		minHeight,
+		maxHeight,
+		boundary,
+		parsedPlacement,
+		arrowElement
+	]);
+	const anchorElement = anchorRef.current;
+	const { floatingStyles, placement: resolvedPlacement, isPositioned, middlewareData } = useFloating({
+		placement: getFloatingPlacement(parsedPlacement),
+		...IS_BROWSER ? {
+			whileElementsMounted: autoUpdate,
+			elements: {
+				reference: anchorElement,
+				floating: popperElement
+			}
+		} : {},
+		middleware
+	});
+	const position = resolvedPlacement ?? placement;
+	return {
+		styles: {
+			arrow: useMemo(() => computeArrowStyles(middlewareData.arrow), [middlewareData.arrow]),
+			popover: useMemo(() => {
+				return {
+					...style,
+					...floatingStyles,
+					zIndex
+				};
+			}, [
+				style,
+				floatingStyles,
+				zIndex
+			])
+		},
+		isPositioned,
+		position,
+		setArrowElement,
+		setPopperElement,
+		popperElement
+	};
+}
+//#endregion
+export { usePopoverStyle };

package/_internal/components/popover-dialog/PopoverDialog.d.ts

@@ -0,0 +1,22 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { PopoverProps } from "../../packages/lumx-core/src/js/components/Popover/index.js";
+import { PopoverProps as PopoverProps$1 } from "../popover/Popover.js";
+import { PopoverDialogProps as PopoverDialogProps$1 } from "../../packages/lumx-core/src/js/components/PopoverDialog/index.js";
+
+//#region src/components/popover-dialog/PopoverDialog.d.ts
+/**
+ * PopoverDialog props.
+ * The PopoverDialog has the same props as the Popover but requires an accessible label.
+ */
+type PopoverDialogProps = PopoverProps$1 & Omit<PopoverDialogProps$1, keyof PopoverProps>;
+/**
+ * PopoverDialog component.
+ * Defines a popover that acts like a dialog:
+ * - Has a dialog aria role
+ * - Sets a focus trap within the popover
+ * - Closes on click away and escape
+ * - Resets heading level context to 2
+ */
+declare const PopoverDialog: Comp<PopoverDialogProps, HTMLDivElement>;
+//#endregion
+export { PopoverDialog, PopoverDialogProps };

package/_internal/components/popover-dialog/PopoverDialog.js

@@ -0,0 +1,42 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { Popover } from "../popover/Popover.js";
+import { HeadingLevelProvider } from "../heading/HeadingLevelProvider.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from "../../packages/lumx-core/src/js/components/PopoverDialog/index.js";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/popover-dialog/PopoverDialog.tsx
+/**
+* PopoverDialog component.
+* Defines a popover that acts like a dialog:
+* - Has a dialog aria role
+* - Sets a focus trap within the popover
+* - Closes on click away and escape
+* - Resets heading level context to 2
+*/
+var PopoverDialog = forwardRef((props, ref) => {
+	const { children, "aria-label": ariaLabel, label = ariaLabel, className, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx(Popover, {
+		...forwardedProps,
+		ref,
+		className: classNames.join(className, CLASSNAME),
+		role: "dialog",
+		"aria-modal": "true",
+		/**
+		* If a label is set, set as aria-label.
+		* If it is undefined, the label can be set using the `aria-label` and `aria-labelledby` props
+		*/
+		"aria-label": label,
+		closeOnClickAway: true,
+		closeOnEscape: true,
+		withFocusTrap: true,
+		children: /* @__PURE__ */ jsx(HeadingLevelProvider, {
+			level: 2,
+			children
+		})
+	});
+});
+PopoverDialog.displayName = COMPONENT_NAME;
+PopoverDialog.className = CLASSNAME;
+PopoverDialog.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { PopoverDialog };

package/_internal/components/popover-dialog/index.d.ts

@@ -0,0 +1 @@
+import { PopoverDialog, PopoverDialogProps } from "./PopoverDialog.js";

package/_internal/components/post-block/PostBlock.d.ts

@@ -0,0 +1,44 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ThumbnailProps } from "../thumbnail/Thumbnail.js";
+import { index_d_exports as index_d_exports$1 } from "../../../index.js";
+import { ReactNode } from "react";
+
+//#region src/components/post-block/PostBlock.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface PostBlockProps extends index_d_exports.GenericProps, index_d_exports.HasTheme {
+  /** Action toolbar content. */
+  actions?: ReactNode;
+  /** Attachment content. */
+  attachments?: ReactNode;
+  /** Author content. */
+  author?: ReactNode;
+  /** Metadata content. */
+  meta?: ReactNode;
+  /** Orientation. */
+  orientation?: index_d_exports$1.Orientation;
+  /** Tag content. */
+  tags?: ReactNode;
+  /** Content (string, or sanitized html). */
+  text?: string | {
+    __html: string;
+  };
+  /** Thumbnail. */
+  thumbnailProps?: ThumbnailProps;
+  /** Title. */
+  title: string;
+  /** On click callback. */
+  onClick?(): void;
+}
+/**
+ * PostBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const PostBlock: Comp<PostBlockProps, HTMLDivElement>;
+//#endregion
+export { PostBlock, PostBlockProps };

package/_internal/components/post-block/PostBlock.js

@@ -0,0 +1,92 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { Thumbnail } from "../thumbnail/Thumbnail.js";
+import { ThumbnailVariant } from "../thumbnail/types.js";
+import { src_exports } from "../../../index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/post-block/PostBlock.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "PostBlock";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-post-block";
+var { block, element } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { orientation: src_exports.Orientation.horizontal };
+/**
+* PostBlock component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var PostBlock = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { actions, attachments, author, className, meta, onClick, orientation = DEFAULT_PROPS.orientation, tags, text, theme = defaultTheme, thumbnailProps, title, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classNames.join(className, block({
+			[`orientation-${orientation}`]: Boolean(orientation),
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		...forwardedProps,
+		children: [thumbnailProps && /* @__PURE__ */ jsx("div", {
+			className: element("thumbnail"),
+			children: /* @__PURE__ */ jsx(Thumbnail, {
+				...thumbnailProps,
+				theme,
+				variant: ThumbnailVariant.rounded
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: element("wrapper"),
+			children: [
+				author && /* @__PURE__ */ jsx("div", {
+					className: element("author"),
+					children: author
+				}),
+				title && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: element("title"),
+					onClick,
+					children: title
+				}),
+				meta && /* @__PURE__ */ jsx("span", {
+					className: element("meta"),
+					children: meta
+				}),
+				typeof text === "string" ? /* @__PURE__ */ jsx("p", {
+					className: element("text"),
+					children: text
+				}) : /* @__PURE__ */ jsx("p", {
+					dangerouslySetInnerHTML: text,
+					className: element("text")
+				}),
+				attachments && /* @__PURE__ */ jsx("div", {
+					className: element("attachments"),
+					children: attachments
+				}),
+				(tags || actions) && /* @__PURE__ */ jsxs("div", {
+					className: element("toolbar"),
+					children: [tags && /* @__PURE__ */ jsx("div", {
+						className: element("tags"),
+						children: tags
+					}), actions && /* @__PURE__ */ jsx("div", {
+						className: element("actions"),
+						children: actions
+					})]
+				})
+			]
+		})]
+	});
+});
+PostBlock.displayName = COMPONENT_NAME;
+PostBlock.className = CLASSNAME;
+PostBlock.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { PostBlock };

package/_internal/components/post-block/index.d.ts

@@ -0,0 +1 @@
+import { PostBlock, PostBlockProps } from "./PostBlock.js";

package/_internal/components/progress/Progress.d.ts

@@ -0,0 +1,30 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+
+//#region src/components/progress/Progress.d.ts
+/**
+ * Progress variants.
+ */
+declare const ProgressVariant: {
+  readonly linear: "linear";
+  readonly circular: "circular";
+};
+type ProgressVariant = index_d_exports.ValueOf<typeof ProgressVariant>;
+/**
+ * Defines the props of the component.
+ */
+interface ProgressProps extends index_d_exports.GenericProps, index_d_exports.HasTheme {
+  /** Progress variant. */
+  variant?: ProgressVariant;
+}
+/**
+ * Progress component.
+ *
+ * @deprecated use `ProgressLinear` and `ProgressCircular` instead.
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Progress: Comp<ProgressProps, HTMLDivElement>;
+//#endregion
+export { Progress, ProgressProps, ProgressVariant };

package/_internal/components/progress/Progress.js

@@ -0,0 +1,54 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { ProgressLinear } from "./ProgressLinear.js";
+import { ProgressCircular } from "./ProgressCircular.js";
+import { src_exports } from "../../../index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/progress/Progress.tsx
+/**
+* Progress variants.
+*/
+var ProgressVariant = {
+	linear: "linear",
+	circular: "circular"
+};
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Progress";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-progress";
+var { block } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { variant: ProgressVariant.circular };
+/**
+* Progress component.
+*
+* @deprecated use `ProgressLinear` and `ProgressCircular` instead.
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Progress = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { className, theme = defaultTheme, variant = DEFAULT_PROPS.variant, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: classNames.join(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			[`variant-${variant}`]: Boolean(variant)
+		})),
+		children: [variant === ProgressVariant.circular && /* @__PURE__ */ jsx(ProgressCircular, { theme }), variant === ProgressVariant.linear && /* @__PURE__ */ jsx(ProgressLinear, { theme })]
+	});
+});
+Progress.displayName = COMPONENT_NAME;
+Progress.className = CLASSNAME;
+Progress.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Progress, ProgressVariant };

package/_internal/components/progress/ProgressCircular.d.ts

@@ -0,0 +1,20 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ProgressCircularProps as ProgressCircularProps$1, ProgressCircularSize } from "../../packages/lumx-core/src/js/components/ProgressCircular/index.js";
+
+//#region src/components/progress/ProgressCircular.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ProgressCircularProps extends index_d_exports.GenericProps, ReactToJSX<ProgressCircularProps$1> {}
+/**
+ * ProgressCircular component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ProgressCircular: Comp<ProgressCircularProps, HTMLDivElement>;
+//#endregion
+export { ProgressCircular, ProgressCircularProps };