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

package/_internal/components/date-picker/DatePickerControlled.js

@@ -0,0 +1,177 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { Button } from "../button/Button.js";
+import { IconButton } from "../button/IconButton.js";
+import { Text } from "../text/Text.js";
+import { TextField } from "../text-field/TextField.js";
+import { FlexBox } from "../flex-box/FlexBox.js";
+import { addMonthResetDay } from "../../utils/date/addMonthResetDay.js";
+import { CLASSNAME } from "./constants.js";
+import { getMonthCalendar } from "../../utils/date/getMonthCalendar.js";
+import { isSameDay } from "../../utils/date/isSameDay.js";
+import { getCurrentLocale } from "../../packages/lumx-core/src/js/utils/locale/getCurrentLocale.js";
+import { parseLocale } from "../../utils/locale/parseLocale.js";
+import { usePreviousValue } from "../../hooks/usePreviousValue.js";
+import { getYearDisplayName } from "../../utils/date/getYearDisplayName.js";
+import { formatDayNumber } from "../../utils/date/formatDayNumber.js";
+import { Toolbar } from "../toolbar/Toolbar.js";
+import { src_exports } from "../../../index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { classNames, onEnterPressed } from "@lumx/core/js/utils";
+import { mdiChevronLeft } from "@lumx/icons/esm/chevron-left.js";
+import { mdiChevronRight } from "@lumx/icons/esm/chevron-right.js";
+//#region src/components/date-picker/DatePickerControlled.tsx
+var { element } = classNames.bem(CLASSNAME);
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "DatePickerControlled";
+/**
+* DatePickerControlled component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var DatePickerControlled = forwardRef((props, ref) => {
+	const { locale = getCurrentLocale(), maxDate, minDate, nextButtonProps, onChange, onNextMonthChange, onPrevMonthChange, previousButtonProps, selectedMonth, todayOrSelectedDateRef, value, onMonthChange, style } = props;
+	const { weeks, weekDays } = React.useMemo(() => {
+		return getMonthCalendar(parseLocale(locale), selectedMonth, minDate, maxDate);
+	}, [
+		locale,
+		minDate,
+		maxDate,
+		selectedMonth
+	]);
+	const selectedYear = selectedMonth.getFullYear();
+	const formattedYear = selectedMonth.toLocaleDateString(locale, { year: "numeric" }).slice(0, 4);
+	const [currentYear, setCurrentYear] = React.useState(String(selectedYear));
+	const updateMonthOffset = React.useCallback((newYearValue) => {
+		const yearNumber = Number(newYearValue);
+		if (yearNumber < 0 && yearNumber >= 9999) return;
+		const offset = (yearNumber - selectedMonth.getFullYear()) * 12;
+		onMonthChange?.(addMonthResetDay(selectedMonth, offset));
+	}, [selectedMonth, onMonthChange]);
+	const onYearChange = React.useCallback((newYearValue, _, event) => {
+		setCurrentYear(newYearValue);
+		const inputType = (event?.nativeEvent)?.inputType;
+		if (!inputType || inputType === "insertReplacementText") updateMonthOffset(newYearValue);
+	}, [updateMonthOffset]);
+	const updateYear = React.useCallback(() => {
+		updateMonthOffset(currentYear);
+	}, [updateMonthOffset, currentYear]);
+	const updateYearOnEnterPressed = React.useMemo(() => onEnterPressed(updateYear), [updateYear]);
+	const monthYear = selectedMonth.toLocaleDateString(locale, {
+		year: "numeric",
+		month: "long"
+	});
+	React.useEffect(() => {
+		setCurrentYear(String(selectedYear));
+	}, [selectedYear]);
+	const prevSelectedMonth = usePreviousValue(selectedMonth);
+	const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);
+	const [labelAriaLive, setLabelAriaLive] = React.useState();
+	React.useEffect(() => {
+		if (monthHasChanged) setLabelAriaLive("polite");
+	}, [monthHasChanged]);
+	const yearLabel = getYearDisplayName(locale);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: `${CLASSNAME}`,
+		style,
+		children: [/* @__PURE__ */ jsx(Toolbar, {
+			className: element("toolbar"),
+			after: /* @__PURE__ */ jsx(IconButton, {
+				...nextButtonProps,
+				emphasis: src_exports.Emphasis.low,
+				icon: mdiChevronRight,
+				onClick: onNextMonthChange
+			}),
+			before: /* @__PURE__ */ jsx(IconButton, {
+				...previousButtonProps,
+				emphasis: src_exports.Emphasis.low,
+				icon: mdiChevronLeft,
+				onClick: onPrevMonthChange
+			}),
+			label: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-live": labelAriaLive,
+				className: onMonthChange ? classNames.visuallyHidden() : void 0,
+				dir: "auto",
+				children: monthYear
+			}), onMonthChange && /* @__PURE__ */ jsx(FlexBox, {
+				className: element("month"),
+				orientation: "horizontal",
+				hAlign: "center",
+				gap: "regular",
+				vAlign: "center",
+				dir: "auto",
+				children: RegExp(`(.*)(${formattedYear})(.*)`).exec(monthYear)?.slice(1).filter((part) => part !== "").map((part) => part === formattedYear ? /* @__PURE__ */ jsx(TextField, {
+					value: currentYear,
+					"aria-label": yearLabel,
+					onChange: onYearChange,
+					type: "number",
+					max: 9999,
+					min: 0,
+					onBlur: updateYear,
+					onKeyPress: updateYearOnEnterPressed,
+					className: element("year")
+				}, "year") : /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					children: part
+				}, part))
+			})] })
+		}), /* @__PURE__ */ jsxs("div", {
+			className: element("calendar"),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: classNames.join(element("week-days"), element("days-wrapper")),
+				children: weekDays.map(({ letter, number, long }) => /* @__PURE__ */ jsxs("div", {
+					className: element("day-wrapper"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: element("week-day"),
+						"aria-hidden": true,
+						children: letter.toLocaleUpperCase()
+					}), /* @__PURE__ */ jsx("span", {
+						className: "visually-hidden",
+						children: long
+					})]
+				}, number))
+			}), /* @__PURE__ */ jsx("div", {
+				className: classNames.join(element("month-days"), element("days-wrapper")),
+				children: weeks.flatMap((week, weekIndex) => {
+					return weekDays.map((weekDay, dayIndex) => {
+						const { date, isOutOfRange } = week[weekDay.number] || {};
+						const key = `${weekIndex}-${dayIndex}`;
+						const isToday = !isOutOfRange && date && isSameDay(date, /* @__PURE__ */ new Date());
+						const isSelected = date && value && isSameDay(value, date);
+						return /* @__PURE__ */ jsx("div", {
+							className: element("day-wrapper"),
+							children: date && /* @__PURE__ */ jsxs(Button, {
+								ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
+								className: element("month-day", { "is-today": isToday }),
+								disabled: isOutOfRange,
+								isSelected,
+								emphasis: "low",
+								onClick: () => onChange(date),
+								children: [/* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									children: formatDayNumber(locale, date)
+								}), /* @__PURE__ */ jsx("span", {
+									className: classNames.visuallyHidden(),
+									children: date.toLocaleDateString(locale, {
+										day: "numeric",
+										month: "long",
+										year: "numeric"
+									})
+								})]
+							})
+						}, key);
+					});
+				})
+			})]
+		})]
+	});
+});
+DatePickerControlled.displayName = COMPONENT_NAME;
+DatePickerControlled.className = CLASSNAME;
+//#endregion
+export { DatePickerControlled };

package/_internal/components/date-picker/DatePickerField.d.ts

@@ -0,0 +1,38 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { IconButtonProps } from "../button/IconButton.js";
+import { TextFieldProps } from "../text-field/TextField.js";
+import { SyntheticEvent } from "react";
+
+//#region src/components/date-picker/DatePickerField.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface DatePickerFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'>, index_d_exports.GenericProps {
+  /** Default month. */
+  defaultMonth?: Date;
+  /** Locale (language or region) to use. */
+  locale?: string;
+  /** Date after which dates can't be selected. */
+  maxDate?: Date;
+  /** Date before which dates can't be selected. */
+  minDate?: Date;
+  /** Props to pass to the next month button (minus those already set by the DatePickerControlled props). */
+  nextButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+  /** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */
+  previousButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+  /** Currently selected date. */
+  value: Date | undefined;
+  /** On change callback. */
+  onChange(value: Date | undefined, name?: string, event?: SyntheticEvent): void;
+}
+/**
+ * DatePickerField component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement>;
+//#endregion
+export { DatePickerField, DatePickerFieldProps };

package/_internal/components/date-picker/DatePickerField.js

@@ -0,0 +1,83 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { TextField } from "../text-field/TextField.js";
+import { Placement } from "../../packages/lumx-core/src/js/components/Popover/constants.js";
+import { getCurrentLocale } from "../../packages/lumx-core/src/js/utils/locale/getCurrentLocale.js";
+import { DatePicker } from "./DatePicker.js";
+import { useBooleanState } from "../../hooks/useBooleanState.js";
+import { PopoverDialog } from "../popover-dialog/PopoverDialog.js";
+import React, { useCallback, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/date-picker/DatePickerField.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "DatePickerField";
+/**
+* DatePickerField component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var DatePickerField = forwardRef((props, ref) => {
+	const { disabledStateProps, otherProps } = useDisableStateProps(props);
+	const { defaultMonth, locale = getCurrentLocale(), maxDate, minDate, name, nextButtonProps, onChange, previousButtonProps, value, ...forwardedProps } = otherProps;
+	const anchorRef = useRef(null);
+	const [isOpen, close, , toggleOpen] = useBooleanState(false);
+	const handleKeyboardNav = useCallback((evt) => {
+		if (evt.key === "Enter" || evt.key === " ") toggleOpen();
+	}, [toggleOpen]);
+	const onTextFieldChange = useCallback((textFieldValue, textFieldName, event) => {
+		if (!textFieldValue) onChange(void 0, textFieldName, event);
+	}, [onChange]);
+	const onDatePickerChange = useCallback((newDate) => {
+		onChange(newDate, name);
+		close();
+	}, [
+		name,
+		onChange,
+		close
+	]);
+	const textFieldValue = value?.toLocaleDateString(locale, {
+		year: "numeric",
+		month: "long",
+		day: "numeric"
+	}) || "";
+	const todayOrSelectedDateRef = React.useRef(null);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TextField, {
+		ref,
+		...forwardedProps,
+		name,
+		forceFocusStyle: isOpen,
+		textFieldRef: anchorRef,
+		value: textFieldValue,
+		onClick: toggleOpen,
+		onChange: onTextFieldChange,
+		onKeyPress: handleKeyboardNav,
+		...disabledStateProps,
+		readOnly: true,
+		"aria-haspopup": "dialog"
+	}), isOpen ? /* @__PURE__ */ jsx(PopoverDialog, {
+		"aria-label": forwardedProps.label,
+		anchorRef,
+		placement: Placement.BOTTOM_START,
+		isOpen,
+		onClose: close,
+		focusElement: todayOrSelectedDateRef,
+		children: /* @__PURE__ */ jsx(DatePicker, {
+			locale,
+			maxDate,
+			minDate,
+			value,
+			todayOrSelectedDateRef,
+			onChange: onDatePickerChange,
+			defaultMonth,
+			nextButtonProps,
+			previousButtonProps
+		})
+	}) : null] });
+});
+DatePickerField.displayName = COMPONENT_NAME;
+//#endregion
+export { DatePickerField };

package/_internal/components/date-picker/constants.js

@@ -0,0 +1,11 @@
+//#region src/components/date-picker/constants.ts
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "DatePicker";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-date-picker";
+//#endregion
+export { CLASSNAME, COMPONENT_NAME };

package/_internal/components/date-picker/index.d.ts

@@ -0,0 +1,4 @@
+import { DatePickerProps } from "./types.js";
+import { DatePicker } from "./DatePicker.js";
+import { DatePickerControlled, DatePickerControlledProps } from "./DatePickerControlled.js";
+import { DatePickerField, DatePickerFieldProps } from "./DatePickerField.js";

package/_internal/components/date-picker/types.d.ts

@@ -0,0 +1,30 @@
+import { index_d_exports } from "../../utils/type/index.js";
+import { IconButtonProps } from "../button/IconButton.js";
+import { Ref } from "react";
+
+//#region src/components/date-picker/types.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface DatePickerProps extends index_d_exports.GenericProps {
+  /** Default month. */
+  defaultMonth?: Date;
+  /** Locale (language or region) to use. */
+  locale?: string;
+  /** Date after which dates can't be selected. */
+  maxDate?: Date;
+  /** Date before which dates can't be selected. */
+  minDate?: Date;
+  /** Props to pass to the next month button (minus those already set by the DatePickerControlled props). */
+  nextButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+  /** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */
+  previousButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+  /** Reference to the <button> element corresponding to the current date or the selected date. */
+  todayOrSelectedDateRef?: Ref<HTMLButtonElement>;
+  /** Currently selected date. */
+  value: Date | undefined;
+  /** On change callback. */
+  onChange(value: Date | undefined): void;
+}
+//#endregion
+export { DatePickerProps };

package/_internal/components/dialog/Dialog.d.ts

@@ -0,0 +1,47 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { BaseDialogProps, DialogSizes } from "../../packages/lumx-core/src/js/components/Dialog/index.js";
+import React, { Ref, RefObject } from "react";
+
+//#region src/components/dialog/Dialog.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface DialogProps extends index_d_exports.GenericProps, index_d_exports.HasCloseMode, BaseDialogProps {
+  /** Reference to the parent element that triggered modal opening (will get back focus on close). */
+  parentElement?: RefObject<HTMLElement>;
+  /** Reference to the dialog content element. */
+  contentRef?: Ref<HTMLDivElement>;
+  /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */
+  focusElement?: RefObject<HTMLElement>;
+  /** Whether to keep the dialog open on clickaway or escape press. */
+  preventAutoClose?: boolean;
+  /** Whether to keep the dialog open on escape press. */
+  preventCloseOnEscape?: boolean;
+  /** Whether to keep the dialog open on clickaway. */
+  preventCloseOnClick?: boolean;
+  /** Size variant. */
+  size?: DialogSizes;
+  /** Z-axis position. */
+  zIndex?: number;
+  /** Z-axis position. */
+  dialogProps?: index_d_exports.GenericProps;
+  /** On close callback. */
+  onClose?(): void;
+  /** Callback called when the open animation starts and the close animation finishes. */
+  onVisibilityChange?(isVisible: boolean): void;
+  /** whether to disable the scroll on the body or not */
+  disableBodyScroll?: boolean;
+  /** Children */
+  children?: React.ReactNode;
+}
+/**
+ * Dialog component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Dialog: Comp<DialogProps, HTMLDivElement>;
+//#endregion
+export { Dialog, DialogProps };

package/_internal/components/dialog/Dialog.js

@@ -0,0 +1,110 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { mergeRefs } from "../../utils/react/mergeRefs.js";
+import { ThemeProvider } from "../../utils/theme/ThemeContext.js";
+import { isComponent } from "../../utils/type/isComponent.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 { partitionMulti } from "../../utils/partitionMulti.js";
+import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
+import { useDisableBodyScroll } from "../../hooks/useDisableBodyScroll.js";
+import { useTransitionVisibility } from "../../hooks/useTransitionVisibility.js";
+import { CLASSNAME, COMPONENT_NAME, Dialog as Dialog$1 } from "../../packages/lumx-core/src/js/components/Dialog/index.js";
+import { HeadingLevelProvider } from "../heading/HeadingLevelProvider.js";
+import { ProgressCircular } from "../progress/ProgressCircular.js";
+import { src_exports } from "../../../index.js";
+import React, { Children, useMemo, useRef, useState } from "react";
+//#region src/components/dialog/Dialog.tsx
+var isHeader = isComponent("header");
+var isFooter = isComponent("footer");
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	closeMode: "unmount",
+	size: src_exports.Size.big,
+	disableBodyScroll: true
+};
+/**
+* Dialog component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Dialog = forwardRef((props, ref) => {
+	if (!DOCUMENT) return null;
+	const { children, className, closeMode = DEFAULT_PROPS.closeMode, header, focusElement, forceFooterDivider, forceHeaderDivider, footer, isLoading, isOpen, onClose, parentElement, contentRef, preventAutoClose, size = DEFAULT_PROPS.size, zIndex, dialogProps, onVisibilityChange, disableBodyScroll = DEFAULT_PROPS.disableBodyScroll, preventCloseOnClick, preventCloseOnEscape, ...forwardedProps } = props;
+	const previousOpen = React.useRef(isOpen);
+	React.useEffect(() => {
+		if (isOpen !== previousOpen.current) {
+			previousOpen.current = isOpen;
+			if (!isOpen && parentElement && parentElement.current) parentElement.current.focus();
+		}
+	}, [isOpen, parentElement]);
+	useCallbackOnEscape(onClose, isOpen && !(preventAutoClose || preventCloseOnEscape));
+	const wrapperRef = useRef(null);
+	/**
+	* Since the `contentRef` comes from the parent and is optional,
+	* we need to create a stable contentRef that will always be available.
+	*/
+	const localContentRef = useRef(null);
+	useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);
+	useDisableBodyScroll(disableBodyScroll && isOpen && localContentRef.current);
+	const [sentinelTop, setSentinelTop] = useState(null);
+	const [sentinelBottom, setSentinelBottom] = useState(null);
+	const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], { threshold: [0, 1] });
+	const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);
+	const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);
+	const [[headerChild], [footerChild], content] = useMemo(() => partitionMulti(Children.toArray(children), [isHeader, isFooter]), [children]);
+	const headerChildProps = headerChild?.props;
+	const headerChildContent = headerChildProps?.children;
+	const footerChildProps = footerChild?.props;
+	const footerChildContent = footerChildProps?.children;
+	const clickAwayRefs = useRef([wrapperRef]);
+	const rootRef = useRef(null);
+	const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
+	const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
+	return isOpen || isVisible || closeMode === "hide" ? Dialog$1({
+		ClickAwayProvider,
+		HeadingLevelProvider,
+		Portal,
+		ThemeProvider,
+		className,
+		clickAwayRefs,
+		content,
+		contentRef: mergeRefs(localContentRef, contentRef),
+		dialogProps,
+		footer,
+		footerChildContent,
+		footerChildProps,
+		forceFooterDivider,
+		forceHeaderDivider,
+		handleClose: onClose,
+		hasBottomIntersection,
+		hasTopIntersection,
+		header,
+		headerChildContent,
+		ProgressCircular,
+		headerChildProps,
+		isLoading,
+		isOpen,
+		isVisible,
+		ref: mergeRefs(rootRef, ref),
+		rootRef,
+		setSentinelBottom,
+		setSentinelTop,
+		shouldPreventCloseOnClickAway,
+		size,
+		wrapperRef,
+		zIndex,
+		...forwardedProps
+	}) : null;
+});
+Dialog.displayName = COMPONENT_NAME;
+Dialog.className = CLASSNAME;
+Dialog.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Dialog };

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

@@ -0,0 +1,2 @@
+import { DialogSizes } from "../../packages/lumx-core/src/js/components/Dialog/index.js";
+import { Dialog, DialogProps } from "./Dialog.js";

package/_internal/components/divider/Divider.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 { DividerProps as DividerProps$1 } from "../../packages/lumx-core/src/js/components/Divider/index.js";
+
+//#region src/components/divider/Divider.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface DividerProps extends index_d_exports.GenericProps, ReactToJSX<DividerProps$1> {}
+/**
+ * Divider component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Divider: Comp<DividerProps, HTMLHRElement>;
+//#endregion
+export { Divider, DividerProps };

package/_internal/components/divider/Divider.js

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

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

@@ -0,0 +1 @@
+import { Divider, DividerProps } from "./Divider.js";

package/_internal/components/drag-handle/DragHandle.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 { DragHandleProps as DragHandleProps$1 } from "../../packages/lumx-core/src/js/components/DragHandle/index.js";
+
+//#region src/components/drag-handle/DragHandle.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface DragHandleProps extends index_d_exports.GenericProps, ReactToJSX<DragHandleProps$1> {}
+/**
+ * DragHandle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const DragHandle: Comp<DragHandleProps, HTMLDivElement>;
+//#endregion
+export { DragHandle, DragHandleProps };

package/_internal/components/drag-handle/DragHandle.js

@@ -0,0 +1,29 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { CLASSNAME, COMPONENT_NAME, DragHandle as DragHandle$1 } from "../../packages/lumx-core/src/js/components/DragHandle/index.js";
+//#region src/components/drag-handle/DragHandle.tsx
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* DragHandle component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var DragHandle = forwardRef((props, ref) => {
+	const defaultTheme = useTheme();
+	const { theme = defaultTheme, ...otherProps } = props;
+	return DragHandle$1({
+		ref,
+		theme,
+		...otherProps
+	});
+});
+DragHandle.displayName = COMPONENT_NAME;
+DragHandle.className = CLASSNAME;
+DragHandle.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { DragHandle };

package/_internal/components/drag-handle/index.d.ts

@@ -0,0 +1 @@
+import { DragHandle, DragHandleProps } from "./DragHandle.js";