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

package/_internal/components/image-lightbox/internal/useAnimateScroll.js

@@ -0,0 +1,40 @@
+import React from "react";
+//#region src/components/image-lightbox/internal/useAnimateScroll.ts
+/** Maintains the scroll position centered relative to the original scroll area's dimensions when the content scales. */
+function useAnimateScroll(scrollAreaRef) {
+	return React.useMemo(() => {
+		let animationFrame = null;
+		return function animate(centerPoint, initialScrollAreaSize) {
+			const scrollArea = scrollAreaRef.current;
+			if (!scrollArea) return;
+			if (animationFrame) cancelAnimationFrame(animationFrame);
+			const clientHeightRatio = centerPoint?.y ? centerPoint.y / scrollArea.clientHeight : .5;
+			const clientWidthRatio = centerPoint?.x ? centerPoint.x / scrollArea.clientWidth : .5;
+			const initialScrollHeight = initialScrollAreaSize?.height || scrollArea.scrollHeight;
+			const initialScrollWidth = initialScrollAreaSize?.width || scrollArea.scrollWidth;
+			const heightRatio = (scrollArea.scrollTop + scrollArea.clientHeight * clientHeightRatio) / initialScrollHeight;
+			const widthRatio = (scrollArea.scrollLeft + scrollArea.clientWidth * clientWidthRatio) / initialScrollWidth;
+			let prevScrollHeight = 0;
+			let prevScrollWidth = 0;
+			function nextFrame() {
+				const { scrollHeight, scrollWidth, clientHeight, clientWidth } = scrollArea;
+				if (scrollHeight === prevScrollHeight && scrollWidth === prevScrollWidth) {
+					animationFrame = null;
+					return;
+				}
+				const top = heightRatio * scrollHeight - clientHeight * clientHeightRatio;
+				const left = widthRatio * scrollWidth - clientWidth * clientWidthRatio;
+				scrollArea.scrollTo({
+					top,
+					left
+				});
+				prevScrollHeight = scrollHeight;
+				prevScrollWidth = scrollWidth;
+				animationFrame = requestAnimationFrame(nextFrame);
+			}
+			animationFrame = requestAnimationFrame(nextFrame);
+		};
+	}, [scrollAreaRef]);
+}
+//#endregion
+export { useAnimateScroll };

package/_internal/components/image-lightbox/internal/usePointerZoom.js

@@ -0,0 +1,98 @@
+import React from "react";
+//#region src/components/image-lightbox/internal/usePointerZoom.ts
+/**
+* Listen to mouse wheel + ctrl and multi-pointer pinch to zoom
+*/
+function usePointerZoom(scrollAreaRef, onScaleChange, animateScroll) {
+	const [isPointerZooming, setPointerZooming] = React.useState(false);
+	React.useEffect(() => {
+		const scrollArea = scrollAreaRef.current;
+		if (!scrollArea || !onScaleChange) return;
+		let animationFrame;
+		let zoomStateTimeoutId;
+		function updateScaleOnNextFrame(newScale, mousePosition) {
+			if (animationFrame) cancelAnimationFrame(animationFrame);
+			if (zoomStateTimeoutId) clearTimeout(zoomStateTimeoutId);
+			function nextFrame() {
+				setPointerZooming(true);
+				onScaleChange?.(newScale);
+				animationFrame = null;
+				zoomStateTimeoutId = setTimeout(() => setPointerZooming(false), 100);
+			}
+			animationFrame = requestAnimationFrame(nextFrame);
+			animateScroll(mousePosition, {
+				width: scrollArea.scrollWidth,
+				height: scrollArea.scrollHeight
+			});
+		}
+		function onWheel(event) {
+			if (!event.ctrlKey) return;
+			event.preventDefault();
+			updateScaleOnNextFrame(Math.exp(-event.deltaY / 50), {
+				x: event.clientX,
+				y: event.clientY
+			});
+		}
+		const activePointers = {};
+		let prevDistance = null;
+		let previousCenterPoint = null;
+		function onPointerDown(event) {
+			activePointers[event.pointerId] = event;
+		}
+		function onPointerMove(event) {
+			if (activePointers[event.pointerId]) activePointers[event.pointerId] = event;
+			const pointers = Object.values(activePointers);
+			if (pointers[0]?.pointerId !== event.pointerId) return;
+			const centerPoint = {
+				x: pointers.reduce((x, { clientX }) => x + clientX, 0) / pointers.length,
+				y: pointers.reduce((y, { clientY }) => y + clientY, 0) / pointers.length
+			};
+			const deltaCenterPoint = previousCenterPoint && {
+				left: previousCenterPoint.x - centerPoint.x,
+				top: previousCenterPoint.y - centerPoint.y
+			};
+			if (deltaCenterPoint) scrollArea.scrollBy({
+				top: deltaCenterPoint.top / 2,
+				left: deltaCenterPoint.left / 2
+			});
+			if (pointers.length === 2) {
+				const [pointer1, pointer2] = pointers;
+				const distance = Math.hypot(pointer2.clientX - pointer1.clientX, pointer2.clientY - pointer1.clientY);
+				if (prevDistance && deltaCenterPoint) {
+					const delta = prevDistance - distance;
+					const absDelta = Math.abs(delta);
+					if (absDelta > Math.abs(deltaCenterPoint.left) && absDelta > Math.abs(deltaCenterPoint.top)) updateScaleOnNextFrame(Math.exp(-delta / 100), centerPoint);
+				}
+				prevDistance = distance;
+			}
+			previousCenterPoint = centerPoint;
+		}
+		function onPointerUp(event) {
+			prevDistance = null;
+			previousCenterPoint = null;
+			delete activePointers[event.pointerId];
+		}
+		scrollArea.addEventListener("wheel", onWheel, { passive: false });
+		const isMultiTouch = navigator.maxTouchPoints >= 2;
+		if (isMultiTouch) {
+			scrollArea.addEventListener("pointerdown", onPointerDown);
+			scrollArea.addEventListener("pointermove", onPointerMove);
+			scrollArea.addEventListener("pointerup", onPointerUp);
+		}
+		return () => {
+			scrollArea.removeEventListener("wheel", onWheel);
+			if (isMultiTouch) {
+				scrollArea.removeEventListener("pointerdown", onPointerDown);
+				scrollArea.removeEventListener("pointermove", onPointerMove);
+				scrollArea.removeEventListener("pointerup", onPointerUp);
+			}
+		};
+	}, [
+		animateScroll,
+		onScaleChange,
+		scrollAreaRef
+	]);
+	return isPointerZooming;
+}
+//#endregion
+export { usePointerZoom };

package/_internal/components/image-lightbox/types.d.ts

@@ -0,0 +1,33 @@
+import { index_d_exports } from "../../utils/type/index.js";
+import { IconButtonProps } from "../button/IconButton.js";
+import { ThumbnailProps } from "../thumbnail/Thumbnail.js";
+import { ImageCaptionMetadata } from "../image-block/ImageCaption.js";
+import { LightboxProps } from "../lightbox/Lightbox.js";
+import { SlideshowProps } from "../slideshow/Slideshow.js";
+//#region src/components/image-lightbox/types.d.ts
+type InheritedSlideShowProps = Pick<SlideshowProps, 'slideshowControlsProps' | 'slideGroupLabel'>;
+interface ZoomButtonProps {
+  /** Zoom in button props */
+  zoomInButtonProps?: IconButtonProps;
+  /** Zoom out button props */
+  zoomOutButtonProps?: IconButtonProps;
+}
+type InheritedThumbnailProps = Pick<ThumbnailProps, 'image' | 'alt' | 'imgProps' | 'imgRef' | 'loadingPlaceholderImageRef'>;
+type InheritedImageMetadata = Pick<ImageCaptionMetadata, 'title' | 'description' | 'tags'>;
+type ImageProps = InheritedThumbnailProps & InheritedImageMetadata;
+interface ImagesProps {
+  /** Index of the active image to show on open */
+  activeImageIndex?: number;
+  /** List of images to display */
+  images: Array<ImageProps>;
+  /** Ref of the active image when the lightbox is open */
+  activeImageRef?: React.Ref<HTMLImageElement>;
+}
+type InheritedLightboxProps = Pick<LightboxProps, 'isOpen' | 'parentElement' | 'onClose' | 'closeButtonProps' | 'aria-label' | 'aria-labelledby'>;
+type ForwardedProps = React.ComponentPropsWithoutRef<'div'>;
+/**
+ * ImageLightbox component props
+ */
+interface ImageLightboxProps extends index_d_exports.HasClassName, ZoomButtonProps, ImagesProps, InheritedSlideShowProps, InheritedLightboxProps, ForwardedProps {}
+//#endregion
+export { ImageLightboxProps };

package/_internal/components/image-lightbox/useImageLightbox.d.ts

@@ -0,0 +1,29 @@
+import { ImageLightboxProps } from "./types.js";
+import React from "react";
+
+//#region src/components/image-lightbox/useImageLightbox.d.ts
+/** Subset of the ImageLightboxProps managed by the useImageLightbox hook */
+type ManagedProps = Pick<ImageLightboxProps, 'isOpen' | 'images' | 'parentElement' | 'activeImageRef' | 'onClose' | 'activeImageIndex'>;
+type TriggerOptions = Pick<ImageLightboxProps, 'activeImageIndex'>;
+/**
+ * Set up an ImageLightbox with images and triggers.
+ *
+ * - Associate a trigger with the lightbox to properly focus the trigger on close
+ * - Associate a trigger with an image to display on open
+ * - Automatically provide a view transition between an image trigger and the displayed image on open & close
+ *
+ * @param props Images to display in the image lightbox
+ */
+declare function useImageLightbox<P extends Partial<ImageLightboxProps>>(props: P): {
+  /**
+   * Generates trigger props
+   * @param index Provide an index to choose which image to display when the image lightbox opens.
+   * */
+  getTriggerProps: (options?: TriggerOptions) => {
+    onClick: (ev?: React.MouseEvent) => void;
+    ref: React.Ref<any>;
+  }; /** Props to forward to the ImageLightbox */
+  imageLightboxProps: ManagedProps & P;
+};
+//#endregion
+export { useImageLightbox };

package/_internal/components/image-lightbox/useImageLightbox.js

@@ -0,0 +1,102 @@
+import { CLASSNAME } from "./constants.js";
+import { startViewTransition } from "../../utils/browser/DOM/startViewTransition.js";
+import { findImage } from "../../utils/browser/DOM/findImage.js";
+import React from "react";
+import memoize from "lodash/memoize.js";
+//#region src/components/image-lightbox/useImageLightbox.tsx
+var EMPTY_PROPS = {
+	isOpen: false,
+	images: [],
+	parentElement: React.createRef()
+};
+/**
+* Set up an ImageLightbox with images and triggers.
+*
+* - Associate a trigger with the lightbox to properly focus the trigger on close
+* - Associate a trigger with an image to display on open
+* - Automatically provide a view transition between an image trigger and the displayed image on open & close
+*
+* @param props Images to display in the image lightbox
+*/
+function useImageLightbox(props) {
+	const propsRef = React.useRef(props);
+	React.useEffect(() => {
+		propsRef.current = props;
+	}, [props]);
+	const imageRefsRef = React.useRef([]);
+	const currentImageRef = React.useRef(null);
+	const [imageLightboxProps, setImageLightboxProps] = React.useState(() => ({
+		...EMPTY_PROPS,
+		...props
+	}));
+	return {
+		getTriggerProps: React.useMemo(() => {
+			const triggerImageRefs = {};
+			async function close() {
+				const currentImage = currentImageRef.current;
+				if (!currentImage) return;
+				await startViewTransition({
+					changes() {
+						setImageLightboxProps((prevProps) => ({
+							...prevProps,
+							isOpen: false
+						}));
+					},
+					viewTransitionName: {
+						source: currentImageRef,
+						target: triggerImageRefs[imageRefsRef.current.findIndex((imageRef) => imageRef.current === currentImage)],
+						name: CLASSNAME
+					}
+				});
+			}
+			async function open(triggerElement, { activeImageIndex } = {}) {
+				const triggerImage = triggerImageRefs[activeImageIndex]?.current || findImage(triggerElement);
+				const images = propsRef.current?.images?.map((image, idx) => {
+					let imgRef = imageRefsRef.current[idx];
+					if (!imgRef) {
+						imgRef = React.createRef();
+						imageRefsRef.current[idx] = imgRef;
+					}
+					return {
+						loadingPlaceholderImageRef: triggerImage && idx === activeImageIndex ? { current: triggerImage } : void 0,
+						...image,
+						imgRef
+					};
+				});
+				await startViewTransition({
+					changes: () => {
+						setImageLightboxProps((prevProps) => ({
+							...prevProps,
+							...propsRef.current,
+							activeImageRef: currentImageRef,
+							parentElement: { current: triggerElement },
+							isOpen: true,
+							onClose: () => {
+								close();
+								propsRef.current?.onClose?.();
+							},
+							images,
+							activeImageIndex: activeImageIndex || 0
+						}));
+					},
+					viewTransitionName: {
+						source: triggerImage,
+						target: currentImageRef,
+						name: CLASSNAME
+					}
+				});
+			}
+			return memoize((options) => ({
+				ref(element) {
+					if (options?.activeImageIndex !== void 0 && element) triggerImageRefs[options.activeImageIndex] = { current: findImage(element) };
+				},
+				onClick(e) {
+					open(e?.target, options);
+				}
+			}));
+		}, []),
+		imageLightboxProps
+	};
+}
+//#endregion
+export { useImageLightbox };

package/_internal/components/inline-list/InlineList.d.ts

@@ -0,0 +1,25 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { InlineListProps as InlineListProps$1 } from "../../packages/lumx-core/src/js/components/InlineList/index.js";
+
+//#region src/components/inline-list/InlineList.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface InlineListProps extends index_d_exports.GenericProps, ReactToJSX<InlineListProps$1, 'items'> {
+  /**
+   * Children
+   */
+  children?: React.ReactNode;
+}
+/**
+ * InlineList component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const InlineList: Comp<InlineListProps, HTMLUListElement>;
+//#endregion
+export { InlineList, InlineListProps };

package/_internal/components/inline-list/InlineList.js

@@ -0,0 +1,24 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, InlineList as InlineList$1 } from "../../packages/lumx-core/src/js/components/InlineList/index.js";
+import { Children } from "react";
+//#region src/components/inline-list/InlineList.tsx
+/**
+* InlineList component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var InlineList = forwardRef((props, ref) => {
+	const { children, ...rest } = props;
+	return InlineList$1({
+		...rest,
+		ref,
+		items: Children.toArray(children)
+	});
+});
+InlineList.displayName = COMPONENT_NAME;
+InlineList.className = CLASSNAME;
+InlineList.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { InlineList };

package/_internal/components/inline-list/index.d.ts

@@ -0,0 +1 @@
+import { InlineList, InlineListProps } from "./InlineList.js";

package/_internal/components/input-helper/InputHelper.d.ts

@@ -0,0 +1,17 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { InputHelperProps as InputHelperProps$1 } from "../../packages/lumx-core/src/js/components/InputHelper/index.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/input-helper/InputHelper.d.ts
+interface InputHelperProps extends ReactToJSX<InputHelperProps$1>, GenericProps {}
+/**
+ * InputHelper component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const InputHelper: Comp<InputHelperProps, HTMLParagraphElement>;
+//#endregion
+export { InputHelper, InputHelperProps };

package/_internal/components/input-helper/InputHelper.js

@@ -0,0 +1,25 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { InputHelper as InputHelper$1 } from "../../packages/lumx-core/src/js/components/InputHelper/index.js";
+import { src_exports } from "../../../index.js";
+//#region src/components/input-helper/InputHelper.tsx
+/**
+* InputHelper component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var InputHelper = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	return InputHelper$1({
+		...props,
+		ref,
+		theme: props.theme || defaultTheme
+	});
+});
+InputHelper.displayName = InputHelper$1.displayName;
+InputHelper.className = InputHelper$1.className;
+InputHelper.defaultProps = InputHelper$1.defaultProps;
+//#endregion
+export { InputHelper };

package/_internal/components/input-helper/index.d.ts

@@ -0,0 +1 @@
+import { InputHelper, InputHelperProps } from "./InputHelper.js";

package/_internal/components/input-label/InputLabel.d.ts

@@ -0,0 +1,17 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { InputLabelProps as InputLabelProps$1 } from "../../packages/lumx-core/src/js/components/InputLabel/index.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/input-label/InputLabel.d.ts
+interface InputLabelProps extends ReactToJSX<InputLabelProps$1>, GenericProps {}
+/**
+ * InputLabel component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const InputLabel: Comp<InputLabelProps, HTMLLabelElement>;
+//#endregion
+export { InputLabel, InputLabelProps };

package/_internal/components/input-label/InputLabel.js

@@ -0,0 +1,25 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { InputLabel as InputLabel$1 } from "../../packages/lumx-core/src/js/components/InputLabel/index.js";
+import { src_exports } from "../../../index.js";
+//#region src/components/input-label/InputLabel.tsx
+/**
+* InputLabel component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var InputLabel = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	return InputLabel$1({
+		...props,
+		ref,
+		theme: props.theme || defaultTheme
+	});
+});
+InputLabel.displayName = InputLabel$1.displayName;
+InputLabel.className = InputLabel$1.className;
+InputLabel.defaultProps = InputLabel$1.defaultProps;
+//#endregion
+export { InputLabel };

package/_internal/components/input-label/index.d.ts

@@ -0,0 +1 @@
+import { InputLabel, InputLabelProps } from "./InputLabel.js";

package/_internal/components/lightbox/Lightbox.d.ts

@@ -0,0 +1,33 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { IconButtonProps } from "../button/IconButton.js";
+import { BaseLightboxProps } from "../../packages/lumx-core/src/js/components/Lightbox/index.js";
+import { RefObject } from "react";
+
+//#region src/components/lightbox/Lightbox.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface LightboxProps extends index_d_exports.GenericProps, ReactToJSX<BaseLightboxProps> {
+  /** Props to pass to the close button (minus those already set by the Lightbox props). */
+  closeButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
+  /** Reference to the element that triggered modal opening to set focus on. */
+  parentElement: RefObject<any>;
+  /** Reference to the element that should get the focus when the lightbox opens. By default, the close button or the lightbox itself will take focus. */
+  focusElement?: RefObject<HTMLElement>;
+  /** On close callback. */
+  onClose?(): void;
+  /** Children */
+  children?: React.ReactNode;
+}
+/**
+ * Lightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Lightbox: Comp<LightboxProps, HTMLDivElement>;
+//#endregion
+export { Lightbox, LightboxProps };

package/_internal/components/lightbox/Lightbox.js

@@ -0,0 +1,69 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { mergeRefs } from "../../utils/react/mergeRefs.js";
+import { ThemeProvider } from "../../utils/theme/ThemeContext.js";
+import { IconButton } from "../button/IconButton.js";
+import { DIALOG_TRANSITION_DURATION, 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 { useDisableBodyScroll } from "../../hooks/useDisableBodyScroll.js";
+import { useTransitionVisibility } from "../../hooks/useTransitionVisibility.js";
+import { HeadingLevelProvider } from "../heading/HeadingLevelProvider.js";
+import { CLASSNAME, COMPONENT_NAME, Lightbox as Lightbox$1 } from "../../packages/lumx-core/src/js/components/Lightbox/index.js";
+import { useEffect, useRef } from "react";
+//#region src/components/lightbox/Lightbox.tsx
+/**
+* Lightbox component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Lightbox = forwardRef((props, ref) => {
+	const { children, className, closeButtonProps, isOpen, onClose, parentElement, focusElement, preventAutoClose, theme, zIndex, ...forwardedProps } = props;
+	if (!DOCUMENT) return null;
+	const childrenRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const closeButtonRef = useRef(null);
+	useDisableBodyScroll(isOpen && wrapperRef.current);
+	const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);
+	useFocusTrap(isOpen && wrapperRef.current, focusElement?.current || closeButtonRef.current || wrapperRef.current);
+	const previousOpen = useRef(isOpen);
+	useEffect(() => {
+		if (isOpen !== previousOpen.current) {
+			previousOpen.current = isOpen;
+			if (!isOpen && parentElement && parentElement.current) parentElement.current.focus();
+		}
+	}, [isOpen, parentElement]);
+	useCallbackOnEscape(onClose);
+	const clickAwayRefs = useRef([wrapperRef]);
+	if (!isOpen && !isVisible) return null;
+	return Lightbox$1({
+		ClickAwayProvider,
+		HeadingLevelProvider,
+		IconButton,
+		parentElement,
+		Portal,
+		ThemeProvider,
+		children,
+		childrenRef,
+		className,
+		clickAwayRefs,
+		closeButtonProps,
+		closeButtonRef,
+		focusElement,
+		isOpen,
+		isVisible,
+		ref: mergeRefs(ref, wrapperRef),
+		theme,
+		zIndex,
+		preventAutoClose,
+		handleClose: onClose,
+		...forwardedProps
+	});
+});
+Lightbox.displayName = COMPONENT_NAME;
+Lightbox.className = CLASSNAME;
+//#endregion
+export { Lightbox };

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

@@ -0,0 +1 @@
+import { Lightbox, LightboxProps } from "./Lightbox.js";

package/_internal/components/link/Link.d.ts

@@ -0,0 +1,35 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { LinkProps as LinkProps$1 } from "../../packages/lumx-core/src/js/components/Link/index.js";
+
+//#region src/components/link/Link.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface LinkProps extends index_d_exports.GenericProps, ReactToJSX<LinkProps$1> {
+  /**
+   * Left icon (SVG path).
+   * @deprecated Instead, simply nest `<Icon />` in the children
+   */
+  leftIcon?: string;
+  /** Click handler. */
+  onClick?: (event: React.MouseEvent) => void;
+  /**
+   * Right icon (SVG path).
+   * @deprecated Instead, simply nest `<Icon />` in the children
+   */
+  rightIcon?: string;
+  /** Children */
+  children?: React.ReactNode;
+}
+/**
+ * Link component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
+//#endregion
+export { Link, LinkProps };

package/_internal/components/link/Link.js

@@ -0,0 +1,45 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { Icon } from "../icon/Icon.js";
+import { wrapChildrenIconWithSpaces } from "../../utils/react/wrapChildrenIconWithSpaces.js";
+import { CLASSNAME, COMPONENT_NAME, Link as Link$1 } from "../../packages/lumx-core/src/js/components/Link/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/link/Link.tsx
+var { element } = classNames.bem(CLASSNAME);
+/**
+* Link component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Link = forwardRef((props, ref) => {
+	const { disabledStateProps, otherProps } = useDisableStateProps(props);
+	const { children, leftIcon, rightIcon, linkAs, onClick, ...forwardedProps } = otherProps;
+	return Link$1({
+		ref,
+		...disabledStateProps,
+		...forwardedProps,
+		linkAs,
+		handleClick: onClick,
+		children: wrapChildrenIconWithSpaces(/* @__PURE__ */ jsxs(Fragment, { children: [
+			leftIcon && /* @__PURE__ */ jsx(Icon, {
+				icon: leftIcon,
+				className: element("left-icon")
+			}),
+			children && /* @__PURE__ */ jsx("span", {
+				className: element("content"),
+				children
+			}),
+			rightIcon && /* @__PURE__ */ jsx(Icon, {
+				icon: rightIcon,
+				className: element("right-icon")
+			})
+		] }))
+	});
+});
+Link.displayName = COMPONENT_NAME;
+Link.className = CLASSNAME;
+//#endregion
+export { Link };

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

@@ -0,0 +1 @@
+import { Link, LinkProps } from "./Link.js";