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

package/_internal/components/text-field/TextField.d.ts

@@ -0,0 +1,46 @@
+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 { TextFieldProps as TextFieldProps$1, TextFieldPropsToOverride } from "../../packages/lumx-core/src/js/components/TextField/TextField.js";
+import { InputLabelProps } from "../input-label/InputLabel.js";
+import { Ref, SyntheticEvent } from "react";
+
+//#region src/components/text-field/TextField.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TextFieldProps extends index_d_exports.GenericProps, ReactToJSX<TextFieldProps$1, TextFieldPropsToOverride> {
+  /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
+  clearButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+  /** Reference to the <input> or <textarea> element. */
+  inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;
+  /** Additional label props. */
+  labelProps?: InputLabelProps;
+  /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */
+  minimumRows?: number;
+  /** Native input name property. */
+  name?: string;
+  /** Reference to the wrapper. */
+  textFieldRef?: Ref<HTMLDivElement>;
+  /** Native input type (only when `multiline` is disabled). */
+  type?: React.ComponentProps<'input'>['type'];
+  /** On blur callback. */
+  onBlur?(event: React.FocusEvent): void;
+  /** On change callback. */
+  onChange(value: string, name?: string, event?: SyntheticEvent): void;
+  /** On clear callback. */
+  onClear?(event?: SyntheticEvent): void;
+  /** On focus callback. */
+  onFocus?(event: React.FocusEvent): void;
+}
+/**
+ * TextField component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const TextField: Comp<TextFieldProps, HTMLDivElement>;
+//#endregion
+export { TextField, TextFieldProps };

package/_internal/components/text-field/TextField.js

@@ -0,0 +1,122 @@
+import { useId } from "../../hooks/useId.js";
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { mergeRefs } from "../../utils/react/mergeRefs.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { IconButton } from "../button/IconButton.js";
+import { CLASSNAME, COMPONENT_NAME } from "../../packages/lumx-core/src/js/components/TextField/constants.js";
+import { TextField as TextField$1, generateAccessibilityIds } from "../../packages/lumx-core/src/js/components/TextField/TextField.js";
+import { RawInputText } from "./RawInputText.js";
+import { RawInputTextarea } from "./RawInputTextarea.js";
+import { Theme } from "@lumx/core/js/constants";
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text-field/TextField.tsx
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { type: "text" };
+/**
+* TextField component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var TextField = forwardRef((props, ref) => {
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+	const defaultTheme = useTheme() || Theme.light;
+	const { chips, className, clearButtonProps, error, forceFocusStyle, hasError, helper, icon, id, inputRef: inputRefProps, isRequired, isValid, label, labelProps, maxLength, minimumRows, multiline, name, onBlur, onChange, onClear, onFocus, placeholder, textFieldRef, theme = defaultTheme, type = DEFAULT_PROPS.type, value, afterElement, ...forwardedProps } = otherProps;
+	const generatedTextFieldId = useId();
+	const textFieldId = id || generatedTextFieldId;
+	/** Keep a clean local input ref to manage focus */
+	const localInputRef = useRef(null);
+	/** Merge prop input ref and local input ref */
+	const inputRef = mergeRefs(localInputRef, inputRefProps);
+	const { helperId, errorId, describedById, labelId } = generateAccessibilityIds(helper, error, generatedTextFieldId, forwardedProps["aria-describedby"], label);
+	const [isFocus, setFocus] = useState(false);
+	/**
+	* Function triggered when the Clear Button is clicked.
+	* The idea is to execute the `onChange` callback with an empty string
+	* and remove focus from the clear button.
+	* @param evt On clear event.
+	*/
+	const handleClear = (evt) => {
+		evt?.nativeEvent.preventDefault();
+		evt?.nativeEvent.stopPropagation();
+		(evt?.currentTarget).blur();
+		onChange("");
+		if (onClear) onClear(evt);
+		/** Use local inputRef in case the prop input ref is a `mergeRefs` function. */
+		const inputElement = localInputRef;
+		if (inputElement && inputElement.current) inputElement.current.focus();
+	};
+	const inputProps = {
+		id: textFieldId,
+		ref: inputRef,
+		...disabledStateProps,
+		...forwardedProps,
+		required: isRequired,
+		maxLength,
+		onBlur(evt) {
+			setFocus(false);
+			onBlur?.(evt);
+		},
+		onFocus(evt) {
+			setFocus(true);
+			onFocus?.(evt);
+		},
+		placeholder,
+		value,
+		onChange,
+		name,
+		"aria-invalid": hasError || void 0,
+		"aria-describedby": describedById,
+		readOnly: forwardedProps.readOnly || disabledStateProps["aria-disabled"],
+		theme
+	};
+	return TextField$1({
+		ref,
+		chips,
+		className,
+		forceFocusStyle,
+		icon,
+		isValid,
+		label,
+		labelProps,
+		isAnyDisabled,
+		input: multiline ? /* @__PURE__ */ jsx(RawInputTextarea, {
+			...inputProps,
+			minimumRows
+		}) : /* @__PURE__ */ jsx(RawInputText, {
+			type,
+			...inputProps
+		}),
+		id: textFieldId,
+		afterElement,
+		hasError,
+		helperId,
+		labelId,
+		multiline,
+		maxLength,
+		isRequired,
+		errorId,
+		placeholder,
+		textFieldRef,
+		value,
+		theme,
+		error,
+		helper,
+		IconButton,
+		isFocus,
+		clearButtonProps: clearButtonProps ? {
+			...clearButtonProps,
+			onClick: handleClear
+		} : void 0
+	});
+});
+TextField.displayName = COMPONENT_NAME;
+TextField.className = CLASSNAME;
+TextField.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { TextField };

package/_internal/components/text-field/index.d.ts

@@ -0,0 +1,3 @@
+import { TextField, TextFieldProps } from "./TextField.js";
+import { RawInputText, RawInputTextProps } from "./RawInputText.js";
+import { RawInputTextarea, RawInputTextareaProps } from "./RawInputTextarea.js";

package/_internal/components/text-field/useFitRowsToContent.js

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+//#region src/components/text-field/useFitRowsToContent.ts
+/**
+* Fit textarea rows to its content
+*/
+function useFitRowsToContent(minimumRows, textareaRef, value) {
+	const [rows, setRows] = useState(minimumRows);
+	React.useLayoutEffect(() => {
+		const { current: textarea } = textareaRef;
+		if (!textarea) return;
+		const previousRows = textarea.rows;
+		textarea.rows = minimumRows;
+		const rowHeight = textarea.clientHeight / minimumRows;
+		textarea.rows = 1;
+		const { scrollHeight } = textarea;
+		textarea.rows = previousRows;
+		const requiredRows = rowHeight > 0 ? Math.ceil(scrollHeight / rowHeight) : minimumRows;
+		setRows(Math.max(requiredRows, minimumRows));
+	}, [
+		value,
+		minimumRows,
+		textareaRef
+	]);
+	return rows;
+}
+//#endregion
+export { useFitRowsToContent };

package/_internal/components/thumbnail/Thumbnail.d.ts

@@ -0,0 +1,31 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ThumbnailProps as ThumbnailProps$1 } from "../../packages/lumx-core/src/js/components/Thumbnail/index.js";
+import { FocusPoint } from "./types.js";
+import React, { ReactElement } from "react";
+
+//#region src/components/thumbnail/Thumbnail.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ThumbnailProps extends index_d_exports.GenericProps, ReactToJSX<ThumbnailProps$1, 'loadingState' | 'isAnyDisabled' | 'focusPointStyle' | 'disabledStateProps' | 'badge'> {
+  /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */
+  focusPoint?: FocusPoint;
+  /** Badge. */
+  badge?: ReactElement | index_d_exports.Falsy;
+  /** On click callback. */
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  /** On key press callback. */
+  onKeyPress?: React.KeyboardEventHandler<HTMLDivElement>;
+}
+/**
+ * Thumbnail component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Thumbnail: Comp<ThumbnailProps, HTMLElement>;
+//#endregion
+export { Thumbnail, ThumbnailProps };

package/_internal/components/thumbnail/Thumbnail.js

@@ -0,0 +1,45 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, Thumbnail as Thumbnail$1, element } from "../../packages/lumx-core/src/js/components/Thumbnail/index.js";
+import { useImageLoad } from "./useImageLoad.js";
+import { useFocusPointStyle } from "./useFocusPointStyle.js";
+import { src_exports } from "../../../index.js";
+import React, { useState } from "react";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/thumbnail/Thumbnail.tsx
+/**
+* Thumbnail component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Thumbnail = forwardRef((props, ref) => {
+	const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { badge, focusPoint, image, imgRef: propImgRef, onClick, onKeyPress, ...forwardedProps } = otherProps;
+	const [imgElement, setImgElement] = useState();
+	const loadingState = useImageLoad(image, imgElement);
+	const focusPointStyle = useFocusPointStyle(props, imgElement, loadingState === "isLoaded");
+	return Thumbnail$1({
+		ref,
+		...forwardedProps,
+		theme: forwardedProps.theme || defaultTheme,
+		isAnyDisabled,
+		disabledStateProps,
+		focusPointStyle,
+		loadingState,
+		imgRef: useMergeRefs(setImgElement, propImgRef),
+		handleClick: onClick,
+		handleKeyPress: onKeyPress,
+		image,
+		badge: badge && React.cloneElement(badge, { className: classNames.join(element("badge"), badge.props.className) })
+	});
+});
+Thumbnail.displayName = COMPONENT_NAME;
+Thumbnail.className = CLASSNAME;
+Thumbnail.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Thumbnail };

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

@@ -0,0 +1,3 @@
+import { FocusPoint, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailSize, ThumbnailVariant } from "./types.js";
+import { Thumbnail, ThumbnailProps } from "./Thumbnail.js";
+import { useFocusPointStyle } from "./useFocusPointStyle.js";

package/_internal/components/thumbnail/types.d.ts

@@ -0,0 +1,49 @@
+import { index_d_exports } from "../../utils/type/index.js";
+import { index_d_exports as index_d_exports$1 } from "../../../index.js";
+import React from "react";
+
+//#region src/components/thumbnail/types.d.ts
+/**
+ *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
+ */
+type FocusPoint = {
+  x?: number;
+  y?: number;
+};
+/**
+ * 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
+ */
+declare const ThumbnailAspectRatio: Record<string, index_d_exports$1.AspectRatio>;
+/**
+ *  Thumbnail sizes.
+ */
+type ThumbnailSize = Extract<index_d_exports$1.Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Thumbnail variants.
+ */
+declare const ThumbnailVariant: {
+  readonly squared: "squared";
+  readonly rounded: "rounded";
+};
+type ThumbnailVariant = index_d_exports.ValueOf<typeof ThumbnailVariant>;
+/**
+ * Thumbnail object fit.
+ */
+declare const ThumbnailObjectFit: {
+  readonly cover: "cover";
+  readonly contain: "contain";
+};
+type ThumbnailObjectFit = index_d_exports.ValueOf<typeof ThumbnailObjectFit>;
+//#endregion
+export { FocusPoint, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailSize, ThumbnailVariant };

package/_internal/components/thumbnail/types.js

@@ -0,0 +1,23 @@
+import { src_exports } from "../../../index.js";
+//#region src/components/thumbnail/types.ts
+/**
+* All available aspect ratios.
+* @deprecated
+*/
+var ThumbnailAspectRatio = { ...src_exports.AspectRatio };
+/**
+* Thumbnail variants.
+*/
+var ThumbnailVariant = {
+	squared: "squared",
+	rounded: "rounded"
+};
+/**
+* Thumbnail object fit.
+*/
+var ThumbnailObjectFit = {
+	cover: "cover",
+	contain: "contain"
+};
+//#endregion
+export { ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant };

package/_internal/components/thumbnail/useFocusPointStyle.d.ts

@@ -0,0 +1,15 @@
+import { ThumbnailProps } from "./Thumbnail.js";
+import { CSSProperties } from "react";
+
+//#region src/components/thumbnail/useFocusPointStyle.d.ts
+declare const useFocusPointStyle: ({
+  image,
+  aspectRatio,
+  focusPoint,
+  imgProps: {
+    width,
+    height
+  }
+}: ThumbnailProps, element: HTMLImageElement | undefined, isLoaded: boolean) => CSSProperties;
+//#endregion
+export { useFocusPointStyle };

package/_internal/components/thumbnail/useFocusPointStyle.js

@@ -0,0 +1,53 @@
+import { calculateFocusPointStyle, getImageSize } from "../../packages/lumx-core/src/js/components/Thumbnail/utils.js";
+import { useEffect, useMemo, useState } from "react";
+//#region src/components/thumbnail/useFocusPointStyle.tsx
+var useFocusPointStyle = ({ image, aspectRatio, focusPoint, imgProps: { width, height } = {} }, element, isLoaded) => {
+	const imageSize = useMemo(() => getImageSize({
+		image,
+		aspectRatio,
+		focusPoint,
+		width: typeof width === "number" ? width : void 0,
+		height: typeof height === "number" ? height : void 0,
+		element,
+		isLoaded
+	}), [
+		aspectRatio,
+		element,
+		focusPoint,
+		height,
+		image,
+		isLoaded,
+		width
+	]);
+	const [containerSize, setContainerSize] = useState(void 0);
+	useEffect(function updateContainerSize() {
+		const cWidth = element?.offsetWidth;
+		const cHeight = element?.offsetHeight;
+		if (cWidth && cHeight) setContainerSize((oldContainerSize) => oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight ? oldContainerSize : {
+			width: cWidth,
+			height: cHeight
+		});
+		else if (imageSize) requestAnimationFrame(updateContainerSize);
+	}, [
+		element?.offsetHeight,
+		element?.offsetWidth,
+		imageSize
+	]);
+	return useMemo(() => calculateFocusPointStyle({
+		image,
+		aspectRatio,
+		focusPoint,
+		element,
+		imageSize,
+		containerSize
+	}), [
+		aspectRatio,
+		containerSize,
+		element,
+		focusPoint,
+		image,
+		imageSize
+	]);
+};
+//#endregion
+export { useFocusPointStyle };

package/_internal/components/thumbnail/useImageLoad.js

@@ -0,0 +1,23 @@
+import { getImageLoadingState } from "../../packages/lumx-core/src/js/components/Thumbnail/utils.js";
+import { useEffect, useState } from "react";
+//#region src/components/thumbnail/useImageLoad.ts
+function useImageLoad(imageURL, imgRef) {
+	const [state, setState] = useState(getImageLoadingState(imgRef));
+	useEffect(() => {
+		setState(getImageLoadingState(imgRef));
+	}, [imageURL, imgRef]);
+	useEffect(() => {
+		const img = imgRef;
+		if (!img) return void 0;
+		const update = (event) => setState(getImageLoadingState(img, event));
+		img.addEventListener("load", update);
+		img.addEventListener("error", update);
+		return () => {
+			img.removeEventListener("load", update);
+			img.removeEventListener("error", update);
+		};
+	}, [imgRef, imgRef?.src]);
+	return state;
+}
+//#endregion
+export { useImageLoad };

package/_internal/components/time-picker-field/TimePickerField.d.ts

@@ -0,0 +1,38 @@
+import { SingleSelectTextFieldProps } from "../select-text-field/SelectTextField.js";
+import { TimeOfDay } from "../../packages/lumx-core/src/js/utils/time/buildTimeList.js";
+import { CLASSNAME, COMPONENT_NAME, TimePickerFieldOwnedSelectProps, TimePickerFieldWrapperProps } from "../../packages/lumx-core/src/js/components/TimePickerField/index.js";
+import { HasClassName, HasTheme } from "@lumx/core/js/types";
+import React, { SyntheticEvent } from "react";
+
+//#region src/components/time-picker-field/TimePickerField.d.ts
+/**
+ * Inherited SelectTextField props (less the parts owned by TimePickerField).
+ */
+type InheritedSelectTextFieldProps = Omit<SingleSelectTextFieldProps<TimeOfDay>, TimePickerFieldOwnedSelectProps | 'onChange'>;
+/**
+ * `TimePickerField` props.
+ */
+interface TimePickerFieldProps extends HasClassName, HasTheme, InheritedSelectTextFieldProps, TimePickerFieldWrapperProps {
+  /**
+   * Change handler. Called with a new `Date` whose date part is inherited from
+   * the previous `value` (or today, if none) and whose time-of-day matches the
+   * user selection. May also be called with `undefined` when the field is
+   * cleared.
+   */
+  onChange(value: Date | undefined, name?: string, event?: SyntheticEvent): void;
+}
+/**
+ * A select-style picker for choosing a time of day. Wraps `SelectTextField`
+ * with a generated list of times built from `step`, `minTime`, and `maxTime`.
+ *
+ * Out-of-range options (strictly before `minTime` or after `maxTime`) remain
+ * visible in the dropdown but are rendered as disabled.
+ *
+ * Free-form typed input (e.g. `"10:30 PM"`, `"14"`, `"930"`) is parsed on blur.
+ *
+ * @param props Component props.
+ * @return React element.
+ */
+declare const TimePickerField: React.FC<TimePickerFieldProps>;
+//#endregion
+export { TimePickerField, TimePickerFieldProps };

package/_internal/components/time-picker-field/TimePickerField.js

@@ -0,0 +1,103 @@
+import { getCurrentLocale } from "../../packages/lumx-core/src/js/utils/locale/getCurrentLocale.js";
+import { SelectTextField } from "../select-text-field/index.js";
+import { COMPONENT_NAME, DEFAULT_PROPS, TimePickerField as TimePickerField$1 } from "../../packages/lumx-core/src/js/components/TimePickerField/index.js";
+import { formatTime } from "../../packages/lumx-core/src/js/utils/time/formatTime.js";
+import { getDateAtTime } from "../../packages/lumx-core/src/js/utils/time/getDateAtTime.js";
+import { buildTimeList } from "../../packages/lumx-core/src/js/utils/time/buildTimeList.js";
+import { parseTimeInput } from "../../packages/lumx-core/src/js/utils/time/parseTimeInput.js";
+import { snapTimeToBounds } from "../../packages/lumx-core/src/js/utils/time/snapTimeToBounds.js";
+import { isDateOnTime } from "../../packages/lumx-core/src/js/utils/time/isDateOnTime.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+//#region src/components/time-picker-field/TimePickerField.tsx
+/**
+* A select-style picker for choosing a time of day. Wraps `SelectTextField`
+* with a generated list of times built from `step`, `minTime`, and `maxTime`.
+*
+* Out-of-range options (strictly before `minTime` or after `maxTime`) remain
+* visible in the dropdown but are rendered as disabled.
+*
+* Free-form typed input (e.g. `"10:30 PM"`, `"14"`, `"930"`) is parsed on blur.
+*
+* @param props Component props.
+* @return React element.
+*/
+var TimePickerField = (props) => {
+	const { value, onChange, locale = getCurrentLocale(), step = DEFAULT_PROPS.step, minTime, maxTime, boundsMode = DEFAULT_PROPS.boundsMode, className, theme, translations, name, ...forwardedProps } = props;
+	const timeList = useMemo(() => buildTimeList({
+		step,
+		minTime,
+		maxTime,
+		locale
+	}), [
+		step,
+		minTime,
+		maxTime,
+		locale
+	]);
+	const [searchValue, handleSearch] = useState("");
+	const selectedOption = useMemo(() => {
+		if (!value) return void 0;
+		return {
+			hour: value.getHours(),
+			minute: value.getMinutes(),
+			name: formatTime(value, locale)
+		};
+	}, [value, locale]);
+	useEffect(() => {
+		if (boundsMode !== "enforce" || !value) return;
+		const clamped = snapTimeToBounds({
+			hour: value.getHours(),
+			minute: value.getMinutes()
+		}, minTime, maxTime);
+		if (clamped.hour !== value.getHours() || clamped.minute !== value.getMinutes()) onChange(getDateAtTime(clamped, value), name);
+	}, [
+		boundsMode,
+		value,
+		minTime,
+		maxTime,
+		onChange,
+		name
+	]);
+	const handleChange = useCallback((next) => {
+		onChange(next ? getDateAtTime(next, value) : void 0, name);
+	}, [
+		name,
+		onChange,
+		value
+	]);
+	const handleBlur = useCallback(() => {
+		if (!searchValue) return;
+		const parsed = parseTimeInput(searchValue);
+		handleSearch("");
+		if (!parsed) return;
+		const time = snapTimeToBounds(parsed, minTime, maxTime);
+		if (value && isDateOnTime(value, time)) return;
+		onChange(getDateAtTime(time, value), name);
+	}, [
+		maxTime,
+		minTime,
+		name,
+		onChange,
+		searchValue,
+		value
+	]);
+	const searchInputValue = value ? formatTime(value, locale) : void 0;
+	return TimePickerField$1({
+		...forwardedProps,
+		value: selectedOption,
+		options: timeList,
+		translations,
+		className,
+		theme,
+		handleChange,
+		handleSearch,
+		handleBlur,
+		searchInputValue
+	}, {
+		SelectTextField,
+		Option: SelectTextField.Option
+	});
+};
+TimePickerField.displayName = COMPONENT_NAME;
+//#endregion
+export { TimePickerField };

package/_internal/components/time-picker-field/index.d.ts

@@ -0,0 +1,2 @@
+import { CLASSNAME, COMPONENT_NAME } from "../../packages/lumx-core/src/js/components/TimePickerField/index.js";
+import { TimePickerField, TimePickerFieldProps } from "./TimePickerField.js";

package/_internal/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,28 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ToolbarProps as ToolbarProps$1 } from "../../packages/lumx-core/src/js/components/Toolbar/index.js";
+import { ReactNode } from "react";
+
+//#region src/components/toolbar/Toolbar.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ToolbarProps extends index_d_exports.GenericProps, ReactToJSX<ToolbarProps$1> {
+  /** After content (placed after the label). */
+  after?: ReactNode;
+  /** Before content (placed before the label). */
+  before?: ReactNode;
+  /** Label content. */
+  label?: ReactNode;
+}
+/**
+ * Toolbar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Toolbar: Comp<ToolbarProps, HTMLDivElement>;
+//#endregion
+export { Toolbar, ToolbarProps };

package/_internal/components/toolbar/Toolbar.js

@@ -0,0 +1,21 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { CLASSNAME, DEFAULT_PROPS, TOOLBAR_NAME, Toolbar as Toolbar$1 } from "../../packages/lumx-core/src/js/components/Toolbar/index.js";
+//#region src/components/toolbar/Toolbar.tsx
+/**
+* Toolbar component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Toolbar = forwardRef((props, ref) => {
+	return Toolbar$1({
+		ref,
+		...props
+	});
+});
+Toolbar.displayName = TOOLBAR_NAME;
+Toolbar.className = CLASSNAME;
+Toolbar.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Toolbar };

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

@@ -0,0 +1 @@
+import { Toolbar, ToolbarProps } from "./Toolbar.js";