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

package/_internal/packages/lumx-core/src/js/components/TextField/TextField.js

@@ -0,0 +1,143 @@
+import { Emphasis, Kind, Size, Theme } 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 { InputLabel } from "../InputLabel/index.js";
+import { InputHelper } from "../InputHelper/index.js";
+import { CLASSNAME } from "./constants.js";
+import { mdiAlertCircle } from "@lumx/icons/esm/alert-circle.js";
+import { mdiCheckCircle } from "@lumx/icons/esm/check-circle.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mdiCloseCircle } from "@lumx/icons/esm/close-circle.js";
+//#region ../lumx-core/src/js/components/TextField/TextField.tsx
+var { block, element } = bem(CLASSNAME);
+/**
+* Generate unique accessibility IDs for helper and error texts.
+* Combines them with any existing aria-describedby in priority order (error > helper > existing).
+*
+* @param helper Helper text content
+* @param error Error text content
+* @param generatedId Unique ID for this text field instance
+* @param existingAriaDescribedBy Existing aria-describedby value to merge
+* @return Object containing helperId, errorId, and combined describedById
+*/
+function generateAccessibilityIds(helper, error, generatedId, existingAriaDescribedBy, label) {
+	const helperId = helper ? `text-field-helper-${generatedId}` : void 0;
+	const errorId = error ? `text-field-error-${generatedId}` : void 0;
+	const labelId = label ? `text-field-label-${generatedId}` : void 0;
+	const describedByIds = [
+		errorId,
+		helperId,
+		existingAriaDescribedBy
+	].filter(Boolean);
+	return {
+		helperId,
+		errorId,
+		describedById: describedByIds.length === 0 ? void 0 : describedByIds.join(" "),
+		labelId
+	};
+}
+/**
+* TextField component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var TextField = (props) => {
+	const { chips, className, clearButtonProps, error, forceFocusStyle, hasError, helper, icon, id: textFieldId, isRequired, isValid, label, labelProps, isAnyDisabled, maxLength, multiline, placeholder, textFieldRef, helperId, errorId, labelId, theme, value, afterElement, input, isFocus, IconButton, ref } = props;
+	const valueLength = (value || "").length;
+	const isNotEmpty = valueLength > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: import_classnames.default(className, block({
+			"has-chips": Boolean(chips),
+			"has-error": !isValid && hasError,
+			"has-icon": Boolean(icon),
+			"has-input": !multiline,
+			"has-input-clear": Boolean(clearButtonProps && isNotEmpty),
+			"has-label": Boolean(label),
+			"has-placeholder": Boolean(placeholder),
+			"has-textarea": multiline,
+			"has-value": Boolean(value),
+			"is-disabled": isAnyDisabled,
+			"is-focus": isFocus || forceFocusStyle,
+			"is-valid": isValid,
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		children: [
+			(label || maxLength) && /* @__PURE__ */ jsxs("div", {
+				className: element("header"),
+				children: [label && InputLabel({
+					...labelProps,
+					id: labelId,
+					htmlFor: textFieldId,
+					className: element("label"),
+					isRequired,
+					theme,
+					children: label
+				}), maxLength && /* @__PURE__ */ jsxs("div", {
+					className: element("char-counter"),
+					children: [/* @__PURE__ */ jsx("span", { children: maxLength - valueLength }), maxLength - valueLength === 0 && Icon({
+						icon: mdiAlertCircle,
+						size: Size.xxs
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: element("wrapper"),
+				ref: textFieldRef,
+				children: [
+					icon && Icon({
+						className: element("input-icon"),
+						color: theme === Theme.dark ? "light" : void 0,
+						icon,
+						size: Size.xs
+					}),
+					chips ? /* @__PURE__ */ jsxs("div", {
+						className: element("chips"),
+						children: [chips, input]
+					}) : /* @__PURE__ */ jsx("div", {
+						className: element("input-wrapper"),
+						children: input
+					}),
+					(isValid || hasError) && Icon({
+						className: element("input-validity"),
+						color: theme === Theme.dark ? "light" : void 0,
+						icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+						size: Size.xxs
+					}),
+					clearButtonProps && isNotEmpty && !isAnyDisabled && /* @__PURE__ */ jsx(IconButton, {
+						"aria-describedby": labelId,
+						...clearButtonProps,
+						className: element("input-clear"),
+						icon: mdiCloseCircle,
+						emphasis: Emphasis.low,
+						size: Size.s,
+						theme,
+						type: "button"
+					}),
+					afterElement && /* @__PURE__ */ jsx("div", {
+						className: element("after-element"),
+						children: afterElement
+					})
+				]
+			}),
+			hasError && error && InputHelper({
+				children: error,
+				className: element("helper"),
+				kind: Kind.error,
+				theme,
+				id: errorId
+			}),
+			helper && InputHelper({
+				className: element("helper"),
+				theme,
+				id: helperId,
+				children: helper
+			})
+		]
+	});
+};
+//#endregion
+export { TextField, generateAccessibilityIds };

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

@@ -0,0 +1,15 @@
+//#region ../lumx-core/src/js/components/TextField/constants.ts
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "TextField";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-text-field";
+/**
+* Input native element class name.
+*/
+var INPUT_NATIVE_CLASSNAME = `${CLASSNAME}__input-native`;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, INPUT_NATIVE_CLASSNAME };

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

@@ -0,0 +1,60 @@
+import { ThumbnailObjectFit, ThumbnailSize, ThumbnailVariant } from "./types.js";
+import { AspectRatio, HorizontalAlignment } from "@lumx/core/js/constants";
+import { CommonRef, GenericProps, HasClassName, HasTheme, JSXElement } from "@lumx/core/js/types";
+import { ImgHTMLAttributes } from "react";
+
+//#region ../lumx-core/src/js/components/Thumbnail/index.d.ts
+type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
+/**
+ * Defines the props of the component.
+ */
+interface ThumbnailProps extends HasTheme, HasClassName {
+  /** Alignment of the thumbnail in it's parent (requires flex parent). */
+  align?: HorizontalAlignment;
+  /** Image alternative text. */
+  alt: string;
+  /** Image aspect ratio. */
+  aspectRatio?: AspectRatio;
+  /** Badge. */
+  badge?: JSXElement;
+  /** Image cross origin resource policy. */
+  crossOrigin?: ImgHTMLProps['crossOrigin'];
+  /** Fallback icon (SVG path) or react node when image fails to load. */
+  fallback?: string | JSXElement;
+  /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */
+  fillHeight?: boolean;
+  /** Image URL. */
+  image: string;
+  loadingState: string;
+  /** Props to inject into the native <img> element. */
+  imgProps?: ImgHTMLProps;
+  /** Reference to the native <img> element. */
+  imgRef?: CommonRef;
+  ref?: CommonRef;
+  /** Set to true to force the display of the loading skeleton. */
+  isLoading?: boolean;
+  /** Set how the image should fit when its aspect ratio is constrained */
+  objectFit?: ThumbnailObjectFit;
+  /** Size variant of the component. */
+  size?: ThumbnailSize;
+  /** Image loading mode. */
+  loading?: 'eager' | 'lazy';
+  /** Ref of an existing placeholder image to display while loading. */
+  loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
+  /** On click callback. */
+  handleClick?: (event: any) => void;
+  /** On key press callback. */
+  handleKeyPress?: (event: any) => void;
+  /** Variant of the component. */
+  variant?: ThumbnailVariant;
+  /** Props to pass to the link wrapping the thumbnail. */
+  linkProps?: GenericProps;
+  focusPointStyle?: GenericProps;
+  disabledStateProps?: GenericProps;
+  isAnyDisabled?: boolean;
+  /** Custom react component for the link (can be used to inject react router Link). */
+  linkAs?: 'a' | any;
+  'aria-label'?: string;
+}
+//#endregion
+export { ThumbnailProps };

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

@@ -0,0 +1,114 @@
+import { RawClickable } from "../RawClickable/index.js";
+import { Icon } from "../Icon/index.js";
+import "./utils.js";
+import { AspectRatio, Size } from "@lumx/core/js/constants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+import { mdiImageBroken } from "@lumx/icons/esm/image-broken.js";
+//#region ../lumx-core/src/js/components/Thumbnail/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Thumbnail";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-thumbnail";
+var { block, element } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	fallback: mdiImageBroken,
+	loading: "lazy"
+};
+/**
+* Thumbnail component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Thumbnail = (props) => {
+	const { align, alt, aspectRatio = AspectRatio.original, badge, className, crossOrigin, ref, fallback = DEFAULT_PROPS.fallback, focusPointStyle, fillHeight, image, imgProps, imgRef: propImgRef, isLoading: isLoadingProp, objectFit, loading = DEFAULT_PROPS.loading, loadingPlaceholderImageRef, isAnyDisabled, disabledStateProps, size, theme, loadingState, variant, linkProps, linkAs, handleClick, handleKeyPress, ...forwardedProps } = props;
+	const isLoading = isLoadingProp || loadingState === "isLoading";
+	const hasError = loadingState === "hasError";
+	const hasIconErrorFallback = hasError && typeof fallback === "string";
+	const hasCustomErrorFallback = hasError && !hasIconErrorFallback;
+	const imageErrorStyle = {};
+	if (hasIconErrorFallback) imageErrorStyle.visibility = "hidden";
+	else if (hasCustomErrorFallback) imageErrorStyle.display = "none";
+	const isLink = Boolean(linkProps?.href || linkAs);
+	const isClickable = !isAnyDisabled && Boolean(isLink || !!handleClick || !!handleKeyPress);
+	const wrapperProps = { ...forwardedProps };
+	if (isClickable) {
+		Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? "a" : "button") }, disabledStateProps);
+		if (isLink) Object.assign(wrapperProps, linkProps);
+		else wrapperProps["aria-label"] = forwardedProps["aria-label"] || alt;
+	}
+	const wrapperClassName = classNames.join(linkProps?.className, className, block({
+		[`align-${align}`]: Boolean(align),
+		[`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
+		[`size-${size}`]: Boolean(size),
+		[`theme-${theme}`]: Boolean(theme),
+		[`variant-${variant}`]: Boolean(variant),
+		"is-clickable": isClickable,
+		"has-error": hasError,
+		"has-icon-error-fallback": hasIconErrorFallback,
+		"has-custom-error-fallback": hasCustomErrorFallback,
+		"is-loading": isLoading,
+		[`object-fit-${objectFit}`]: Boolean(objectFit),
+		"has-badge": !!badge,
+		"fill-height": fillHeight
+	}));
+	const loadingPlaceholderImage = isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current || void 0;
+	const loadingStyle = loadingPlaceholderImage ? { backgroundImage: `url(${loadingPlaceholderImage.src})` } : void 0;
+	const innerImage = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		className: element("background"),
+		children: [/* @__PURE__ */ jsx("img", {
+			width: loadingPlaceholderImage?.naturalWidth,
+			height: loadingPlaceholderImage?.naturalHeight,
+			...imgProps,
+			style: {
+				width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : void 0,
+				...imgProps?.style,
+				...imageErrorStyle,
+				...focusPointStyle,
+				...loadingStyle
+			},
+			ref: propImgRef,
+			className: classNames.join(element("image", {
+				"is-loading": isLoading,
+				"has-defined-size": Boolean(imgProps?.height && imgProps.width)
+			}), imgProps?.className),
+			crossOrigin,
+			src: image,
+			alt,
+			loading
+		}), !isLoading && hasError && /* @__PURE__ */ jsx("span", {
+			className: element("fallback"),
+			children: hasIconErrorFallback ? Icon({
+				icon: fallback,
+				size: Size.xxs,
+				theme
+			}) : fallback
+		})]
+	}), badge] });
+	/** Render `RawClickable` as a function since it is a core component which needs to be treated as such */
+	if (isClickable) return RawClickable({
+		ref,
+		...wrapperProps,
+		className: wrapperClassName,
+		children: innerImage,
+		handleClick,
+		handleKeyPress
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...wrapperProps,
+		className: wrapperClassName,
+		children: innerImage
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, Thumbnail, element };

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

@@ -0,0 +1,39 @@
+import { Size } from "../../constants/enums/index.js";
+import { ValueOf } from "../../types/ValueOf.js";
+//#region ../lumx-core/src/js/components/Thumbnail/types.d.ts
+/**
+ * Loading attribute is not yet supported in typescript, so we need
+ * to add it in order to avoid a ts error.
+ * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
+ */
+declare module 'react' {
+  interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {
+    loading?: 'eager' | 'lazy';
+  }
+}
+/**
+ * All available aspect ratios.
+ * @deprecated
+ */
+/**
+ *  Thumbnail sizes.
+ */
+type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Thumbnail variants.
+ */
+declare const ThumbnailVariant: {
+  readonly squared: "squared";
+  readonly rounded: "rounded";
+};
+type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
+/**
+ * Thumbnail object fit.
+ */
+declare const ThumbnailObjectFit: {
+  readonly cover: "cover";
+  readonly contain: "contain";
+};
+type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;
+//#endregion
+export { ThumbnailObjectFit, ThumbnailSize, ThumbnailVariant };

package/_internal/packages/lumx-core/src/js/components/Thumbnail/utils.d.ts

@@ -0,0 +1 @@
+import { CSSProperties } from "react";

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

@@ -0,0 +1,76 @@
+import { AspectRatio } from "../../constants/enums/index.js";
+//#region ../lumx-core/src/js/components/Thumbnail/utils.ts
+/**
+* Determines the loading state of an HTML image element.
+*
+* @param img - The HTML image element to check
+* @param event - Optional event (load or error) that triggered the state check
+* @returns The current loading state: 'hasError', 'isLoading', or 'isLoaded'
+*/
+function getImageLoadingState(img, event) {
+	if (event?.type === "error" || img?.complete && !img.getAttribute("src")) return "hasError";
+	if (!img || !img.complete) return "isLoading";
+	return "isLoaded";
+}
+/**
+* Gets the natural image size from props or element.
+* Returns undefined if focus point is not applicable or size cannot be determined.
+*
+* @param params - Image size parameters
+* @returns Image size or undefined
+*/
+function getImageSize({ image, aspectRatio, focusPoint, width, height, element, isLoaded }) {
+	if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) return;
+	if (typeof width === "number" && typeof height === "number") return {
+		width,
+		height
+	};
+	if (element && isLoaded) return {
+		width: element.naturalWidth,
+		height: element.naturalHeight
+	};
+}
+/**
+* Calculate shift position to center the focus point in the container.
+*
+* This function computes the percentage offset needed to position an image
+* such that a specific focus point on the image aligns with the center of
+* the container, taking into account the image's scale.
+*
+* @param params - Focus point shift calculation parameters
+* @returns Percentage shift (0-100) for CSS positioning
+*/
+function shiftPosition({ scale, focusPoint, imageSize, containerSize }) {
+	const scaledSize = imageSize / scale;
+	if (scaledSize === containerSize) return 0;
+	const shift = (focusPoint * scaledSize - containerSize / 2) / (scaledSize - containerSize);
+	return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
+}
+/**
+* Calculates CSS style for applying focus point positioning.
+*
+* @param params - Focus point style parameters
+* @returns CSS properties to apply to the image
+*/
+function calculateFocusPointStyle({ image, aspectRatio, focusPoint, element, imageSize, containerSize }) {
+	if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) return {};
+	if (!element || !imageSize) return { visibility: "hidden" };
+	if (!containerSize || !imageSize.height || !imageSize.width) return {};
+	const heightScale = imageSize.height / containerSize.height;
+	const widthScale = imageSize.width / containerSize.width;
+	const scale = Math.min(widthScale, heightScale);
+	const y = shiftPosition({
+		scale,
+		focusPoint: Math.abs((focusPoint?.y || 0) - 1) / 2,
+		imageSize: imageSize.height,
+		containerSize: containerSize.height
+	});
+	return { objectPosition: `${shiftPosition({
+		scale,
+		focusPoint: Math.abs((focusPoint?.x || 0) + 1) / 2,
+		imageSize: imageSize.width,
+		containerSize: containerSize.width
+	})}% ${y}%` };
+}
+//#endregion
+export { calculateFocusPointStyle, getImageLoadingState, getImageSize, shiftPosition };

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

@@ -0,0 +1,70 @@
+import { LumxClassName } from "../../types/LumxClassName.js";
+import { SelectTextFieldTranslations } from "../../utils/select/types.js";
+
+//#region ../lumx-core/src/js/components/TimePickerField/index.d.ts
+/**
+ * Component display name.
+ */
+declare const COMPONENT_NAME = "TimePickerField";
+/**
+ * Component default class name (BEM root).
+ */
+declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * 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 { CLASSNAME, COMPONENT_NAME, TimePickerFieldOwnedSelectProps, TimePickerFieldWrapperProps };

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

@@ -0,0 +1,53 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { jsx } from "react/jsx-runtime";
+//#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"
+};
+/**
+* `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 /* @__PURE__ */ jsx(SelectTextField, {
+		...fowardedProps,
+		className: block([className]),
+		selectionType: "single",
+		options,
+		getOptionId: "name",
+		renderOption: (entry) => /* @__PURE__ */ jsx(Option, { isDisabled: entry.outOfRange }),
+		onChange: handleChange,
+		onSearch: handleSearch,
+		onBlur: handleBlur,
+		filter: "auto",
+		translations
+	});
+};
+TimePickerField.displayName = COMPONENT_NAME;
+TimePickerField.className = CLASSNAME;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, TimePickerField };

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

@@ -0,0 +1,19 @@
+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;
+}
+//#endregion
+export { ToolbarProps };

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

@@ -0,0 +1,51 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Toolbar/index.tsx
+/**
+* Component display name.
+*/
+var TOOLBAR_NAME = "Toolbar";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-toolbar";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* Toolbar component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Toolbar = (props) => {
+	const { after, before, className, label, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			"has-after": Boolean(after),
+			"has-before": Boolean(before),
+			"has-label": Boolean(label)
+		})),
+		children: [
+			before && /* @__PURE__ */ jsx("div", {
+				className: element("before"),
+				children: before
+			}),
+			label && /* @__PURE__ */ jsx("div", {
+				className: element("label"),
+				children: label
+			}),
+			after && /* @__PURE__ */ jsx("div", {
+				className: element("after"),
+				children: after
+			})
+		]
+	});
+};
+//#endregion
+export { CLASSNAME, DEFAULT_PROPS, 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 };