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

package/_internal/components/slideshow/SlideshowControls.js

@@ -0,0 +1,139 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { IconButton } from "../button/IconButton.js";
+import { WINDOW } from "../../constants.js";
+import { useRovingTabIndexContainer } from "../../hooks/useRovingTabIndexContainer.js";
+import { DEFAULT_OPTIONS, useSlideshowControls } from "../../hooks/useSlideshowControls.js";
+import { useSwipeNavigate } from "./useSwipeNavigate.js";
+import { usePaginationVisibleRange } from "./usePaginationVisibleRange.js";
+import { src_exports } from "../../../index.js";
+import React, { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+import { mdiChevronLeft } from "@lumx/icons/esm/chevron-left.js";
+import { mdiChevronRight } from "@lumx/icons/esm/chevron-right.js";
+import range from "lodash/range.js";
+import { mdiPlayCircleOutline } from "@lumx/icons/esm/play-circle-outline.js";
+import { mdiPauseCircleOutline } from "@lumx/icons/esm/pause-circle-outline.js";
+//#region src/components/slideshow/SlideshowControls.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SlideshowControls";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-slideshow-controls";
+var { block, element } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { activeIndex: 0 };
+/**
+* SlideshowControls component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var InternalSlideshowControls = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { activeIndex = DEFAULT_PROPS.activeIndex, className, nextButtonProps, onNextClick, onPaginationClick, onPreviousClick, parentRef, previousButtonProps, paginationProps, slidesCount, theme = defaultTheme, isAutoPlaying = false, playButtonProps, paginationItemLabel, paginationItemProps, ...forwardedProps } = props;
+	let parent;
+	if (WINDOW) parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;
+	const paginationRef = React.useRef(null);
+	useSwipeNavigate(parent, useCallback(() => onNextClick?.(false), [onNextClick]), useCallback(() => onPreviousClick?.(false), [onPreviousClick]));
+	/**
+	* Add roving tab index pattern to pagination items and activate slide on focus.
+	*/
+	useRovingTabIndexContainer({
+		containerRef: paginationRef,
+		itemSelector: "button",
+		onItemFocused: (el) => {
+			el.click();
+		}
+	});
+	const visibleRange = usePaginationVisibleRange(activeIndex, slidesCount);
+	const wrapperStyle = { transform: `translateX(-${12 * visibleRange.min}px)` };
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: classNames.join(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			"has-infinite-pagination": slidesCount > 5
+		})),
+		children: [
+			/* @__PURE__ */ jsx(IconButton, {
+				...previousButtonProps,
+				icon: mdiChevronLeft,
+				className: element("navigation"),
+				color: theme === src_exports.Theme.dark ? "light" : "dark",
+				emphasis: src_exports.Emphasis.low,
+				onClick: () => onPreviousClick?.()
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: paginationRef,
+				className: element("pagination"),
+				children: /* @__PURE__ */ jsx("div", {
+					className: element("pagination-items"),
+					style: wrapperStyle,
+					role: "tablist",
+					...paginationProps,
+					children: useMemo(() => range(slidesCount).map((index) => {
+						const isOnEdge = index !== 0 && index !== slidesCount - 1 && (index === visibleRange.min || index === visibleRange.max);
+						const isActive = activeIndex === index;
+						const isOutRange = index < visibleRange.min || index > visibleRange.max;
+						const { className: itemClassName = void 0, label = void 0, ...itemProps } = paginationItemProps ? paginationItemProps(index) : {};
+						const ariaLabel = label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
+						return /* @__PURE__ */ jsx("button", {
+							className: classNames.join(element("pagination-item", {
+								"is-active": isActive,
+								"is-on-edge": isOnEdge,
+								"is-out-range": isOutRange
+							}), itemClassName),
+							type: "button",
+							tabIndex: isActive ? void 0 : -1,
+							role: "tab",
+							"aria-selected": isActive,
+							onClick: () => onPaginationClick?.(index),
+							"aria-label": ariaLabel,
+							...itemProps
+						}, index);
+					}), [
+						slidesCount,
+						visibleRange.min,
+						visibleRange.max,
+						activeIndex,
+						paginationItemProps,
+						paginationItemLabel,
+						onPaginationClick
+					])
+				})
+			}),
+			playButtonProps ? /* @__PURE__ */ jsx(IconButton, {
+				...playButtonProps,
+				icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
+				className: element("play"),
+				color: theme === src_exports.Theme.dark ? "light" : "dark",
+				emphasis: src_exports.Emphasis.low
+			}) : null,
+			/* @__PURE__ */ jsx(IconButton, {
+				...nextButtonProps,
+				icon: mdiChevronRight,
+				className: element("navigation"),
+				color: theme === src_exports.Theme.dark ? "light" : "dark",
+				emphasis: src_exports.Emphasis.low,
+				onClick: () => onNextClick?.()
+			})
+		]
+	});
+});
+InternalSlideshowControls.displayName = COMPONENT_NAME;
+InternalSlideshowControls.className = CLASSNAME;
+InternalSlideshowControls.defaultProps = DEFAULT_PROPS;
+var SlideshowControls = Object.assign(InternalSlideshowControls, {
+	useSlideshowControls,
+	useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
+});
+//#endregion
+export { SlideshowControls };

package/_internal/components/slideshow/SlideshowItem.d.ts

@@ -0,0 +1,23 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+
+//#region src/components/slideshow/SlideshowItem.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SlideshowItemProps extends index_d_exports.GenericProps {
+  /** interval in which slides are automatically shown */
+  interval?: number;
+  /** Children */
+  children?: React.ReactNode;
+}
+/**
+ * SlideshowItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement>;
+//#endregion
+export { SlideshowItem, SlideshowItemProps };

package/_internal/components/slideshow/SlideshowItem.js

@@ -0,0 +1,32 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/slideshow/SlideshowItem.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SlideshowItem";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-slideshow-item";
+/**
+* SlideshowItem component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var SlideshowItem = forwardRef((props, ref) => {
+	const { className, children, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames.join(className, CLASSNAME),
+		...forwardedProps,
+		children
+	});
+});
+SlideshowItem.displayName = COMPONENT_NAME;
+SlideshowItem.className = CLASSNAME;
+//#endregion
+export { SlideshowItem };

package/_internal/components/slideshow/SlideshowItemGroup.js

@@ -0,0 +1,44 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { mergeRefs } from "../../utils/react/mergeRefs.js";
+import { useSlideFocusManagement } from "./useSlideFocusManagement.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/slideshow/SlideshowItemGroup.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SlideshowItemGroup";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-slideshow-item-group";
+var buildSlideShowGroupId = (slidesId, index) => `${slidesId}-slide-${index}`;
+/**
+* SlideshowItemGroup component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var SlideshowItemGroup = forwardRef((props, ref) => {
+	const { className, children, role = "group", label, isDisplayed, ...forwardedProps } = props;
+	const groupRef = React.useRef(null);
+	useSlideFocusManagement({
+		isSlideDisplayed: isDisplayed,
+		slideRef: groupRef
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs(groupRef, ref),
+		role,
+		className: classNames.join(className, CLASSNAME),
+		"aria-roledescription": "slide",
+		"aria-label": label,
+		...forwardedProps,
+		children
+	});
+});
+SlideshowItemGroup.displayName = COMPONENT_NAME;
+SlideshowItemGroup.className = CLASSNAME;
+//#endregion
+export { SlideshowItemGroup, buildSlideShowGroupId };

package/_internal/components/slideshow/constants.d.ts

@@ -0,0 +1,13 @@
+import { ValueOf } from "@lumx/core/js/types";
+
+//#region src/components/slideshow/constants.d.ts
+/**
+ * Slide mode
+ */
+declare const SlideMode: {
+  /** Move slides with CSS transform translate */readonly transformTranslate: "transform-translate"; /** Move slides native scroll snap (available only on supported browsers) */
+  readonly scrollSnap: "scroll-snap";
+};
+type SlideMode = ValueOf<typeof SlideMode>;
+//#endregion
+export { SlideMode };

package/_internal/components/slideshow/constants.js

@@ -0,0 +1,16 @@
+//#region src/components/slideshow/constants.ts
+/**
+* Autoplay default interval in ms.
+*/
+var AUTOPLAY_DEFAULT_INTERVAL = 5e3;
+/**
+* Slide mode
+*/
+var SlideMode = {
+	/** Move slides with CSS transform translate */
+	transformTranslate: "transform-translate",
+	/** Move slides native scroll snap (available only on supported browsers) */
+	scrollSnap: "scroll-snap"
+};
+//#endregion
+export { AUTOPLAY_DEFAULT_INTERVAL, SlideMode };

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

@@ -0,0 +1,4 @@
+import { Slideshow, SlideshowProps } from "./Slideshow.js";
+import { SlideshowItem, SlideshowItemProps } from "./SlideshowItem.js";
+import { SlideshowControls, SlideshowControlsProps } from "./SlideshowControls.js";
+import { Slides, SlidesProps } from "./Slides.js";

package/_internal/components/slideshow/usePaginationVisibleRange.js

@@ -0,0 +1,41 @@
+import { useMemo, useRef } from "react";
+//#region src/components/slideshow/usePaginationVisibleRange.ts
+/**
+* Calculate the currently visible pagination "bullet" range.
+*/
+function usePaginationVisibleRange(activeIndex, slideCount) {
+	const previousVisibleRangeRef = useRef();
+	return useMemo(() => {
+		const lastSlide = slideCount - 1;
+		const { current: previousVisibleRange } = previousVisibleRangeRef;
+		let newVisibleRange;
+		if (activeIndex === previousVisibleRange?.max && activeIndex < lastSlide) newVisibleRange = {
+			min: previousVisibleRange.min + 1,
+			max: previousVisibleRange.max + 1
+		};
+		else if (activeIndex === previousVisibleRange?.min && activeIndex > 0) newVisibleRange = {
+			min: previousVisibleRange.min - 1,
+			max: previousVisibleRange.max - 1
+		};
+		else {
+			const deltaItems = 4;
+			let min = activeIndex - 2;
+			let max = activeIndex + 2;
+			if (activeIndex > lastSlide - 2) {
+				min = lastSlide - deltaItems;
+				max = lastSlide;
+			} else if (activeIndex < deltaItems) {
+				min = 0;
+				max = deltaItems;
+			}
+			newVisibleRange = {
+				min,
+				max
+			};
+		}
+		previousVisibleRangeRef.current = newVisibleRange;
+		return newVisibleRange;
+	}, [activeIndex, slideCount]);
+}
+//#endregion
+export { usePaginationVisibleRange };

package/_internal/components/slideshow/useSlideFocusManagement.js

@@ -0,0 +1,64 @@
+import { getFocusableElements } from "../../packages/lumx-core/src/js/utils/focus/getFocusableElements.js";
+import { useEffect } from "react";
+//#region src/components/slideshow/useSlideFocusManagement.tsx
+/**
+* Classname set on elements whose focus was blocked.
+* This is to easily find elements that have been tempered with,
+* and not elements whose focus was already initially blocked.
+* */
+var BLOCKED_FOCUS_CLASSNAME = "focus-blocked";
+/**
+* Manage how slides must behave when visible or not.
+* When not visible, they should be hidden from screen readers and not focusable.
+*/
+var useSlideFocusManagement = ({ isSlideDisplayed, slideRef }) => {
+	useEffect(() => {
+		const element = slideRef?.current;
+		if (!element) return;
+		/**
+		* Display given slide to screen readers and, if focus was blocked, restore focus on elements.
+		*/
+		const enableSlide = () => {
+			element.setAttribute("aria-hidden", "false");
+			element.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`).forEach((focusableElement) => {
+				focusableElement.removeAttribute("tabindex");
+				focusableElement.classList.remove(BLOCKED_FOCUS_CLASSNAME);
+			});
+		};
+		/**
+		* Hide given slide from screen readers and block focus on all focusable elements within.
+		*/
+		const blockSlide = () => {
+			element.setAttribute("aria-hidden", "true");
+			getFocusableElements(element).forEach((focusableElement) => {
+				focusableElement.setAttribute("tabindex", "-1");
+				focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
+			});
+		};
+		const handleDisplay = () => {
+			if (!element) return;
+			if (isSlideDisplayed) enableSlide();
+			else blockSlide();
+		};
+		const callback = (mutationsList) => {
+			if (element) {
+				for (const mutation of mutationsList) if (mutation.type === "childList") handleDisplay();
+			}
+		};
+		const observer = new MutationObserver(callback);
+		if (element) {
+			handleDisplay();
+			/** If slide is hidden, start observing for elements to block focus  */
+			if (!isSlideDisplayed) observer.observe(element, {
+				attributes: true,
+				childList: true,
+				subtree: true
+			});
+		}
+		return () => {
+			if (!isSlideDisplayed) observer.disconnect();
+		};
+	}, [isSlideDisplayed, slideRef]);
+};
+//#endregion
+export { useSlideFocusManagement };

package/_internal/components/slideshow/useSlideScroll.js

@@ -0,0 +1,57 @@
+import { isReducedMotion } from "../../utils/browser/isReducedMotion.js";
+import { onScrollEnd } from "../../utils/browser/onScrollEnd.js";
+import React from "react";
+//#region src/components/slideshow/useSlideScroll.ts
+/**
+* Hook to handle scroll synchronization for the Slideshow component.
+* It syncs the scroll position with the active index and vice versa.
+*/
+var useSlideScroll = ({ enabled, activeIndex, wrapperRef, onChange }) => {
+	const isAutoScrollRef = React.useRef(false);
+	const isFromScrollRef = React.useRef(false);
+	React.useEffect(() => {
+		const wrapper = wrapperRef.current;
+		if (!enabled || !wrapper) return;
+		if (isFromScrollRef.current) return;
+		const targetElement = wrapper.children[activeIndex];
+		if (!targetElement) return;
+		let newScrollLeft = targetElement.offsetLeft;
+		if (targetElement.offsetParent !== wrapper) newScrollLeft -= wrapper.offsetLeft + wrapper.clientLeft;
+		if (Math.abs(wrapper.scrollLeft - newScrollLeft) < 1) return;
+		isAutoScrollRef.current = true;
+		wrapper.scrollTo({
+			left: newScrollLeft,
+			behavior: !isReducedMotion() ? "smooth" : void 0
+		});
+	}, [
+		activeIndex,
+		enabled,
+		wrapperRef
+	]);
+	React.useEffect(() => {
+		const wrapper = wrapperRef.current;
+		if (!enabled || !wrapper) return void 0;
+		const controller = new AbortController();
+		const { signal } = controller;
+		const handleScroll = () => {
+			if (isAutoScrollRef.current) return;
+			const { scrollLeft, clientWidth } = wrapper;
+			const newIndex = Math.round(scrollLeft / clientWidth);
+			isFromScrollRef.current = true;
+			onChange?.(newIndex);
+		};
+		const reset = () => {
+			isAutoScrollRef.current = false;
+			isFromScrollRef.current = false;
+		};
+		wrapper.addEventListener("scroll", handleScroll, { signal });
+		onScrollEnd(wrapper, reset, { signal });
+		return () => controller.abort();
+	}, [
+		enabled,
+		onChange,
+		wrapperRef
+	]);
+};
+//#endregion
+export { useSlideScroll };

package/_internal/components/slideshow/useSwipeNavigate.js

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+import { detectHorizontalSwipe } from "@lumx/core/js/utils";
+//#region src/components/slideshow/useSwipeNavigate.ts
+var isTouchDevice = () => "ontouchstart" in window;
+/**
+* Listen swipe to navigate left and right.
+*/
+function useSwipeNavigate(element, onNext, onPrevious) {
+	useEffect(() => {
+		if (!element || !isTouchDevice()) return void 0;
+		return detectHorizontalSwipe(element, (swipe) => {
+			(swipe === "right" ? onPrevious : onNext)?.();
+		});
+	}, [
+		onPrevious,
+		onNext,
+		element
+	]);
+}
+//#endregion
+export { useSwipeNavigate };

package/_internal/components/switch/Switch.d.ts

@@ -0,0 +1,24 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { SwitchProps as SwitchProps$1 } from "../../packages/lumx-core/src/js/components/Switch/index.js";
+import React from "react";
+
+//#region src/components/switch/Switch.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SwitchProps extends index_d_exports.GenericProps, ReactToJSX<SwitchProps$1, 'inputId' | 'label'> {
+  /** On change callback. */
+  onChange?(isChecked: boolean, value?: string, name?: string, event?: React.ChangeEvent): void;
+}
+/**
+ * Switch component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Switch: Comp<SwitchProps, HTMLDivElement>;
+//#endregion
+export { Switch, SwitchProps };

package/_internal/components/switch/Switch.js

@@ -0,0 +1,54 @@
+import { useId } from "../../hooks/useId.js";
+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, Switch as Switch$1 } from "../../packages/lumx-core/src/js/components/Switch/index.js";
+import { src_exports } from "../../../index.js";
+import React from "react";
+//#region src/components/switch/Switch.tsx
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { position: src_exports.Alignment.left };
+/**
+* Switch component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Switch = forwardRef((props, ref) => {
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { checked, children, className, helper, id, inputRef, isChecked = checked, name, onChange, position = DEFAULT_PROPS.position, theme = defaultTheme, value, inputProps = {}, ...forwardedProps } = otherProps;
+	const localInputRef = React.useRef(null);
+	const generatedInputId = useId();
+	const inputId = id || generatedInputId;
+	return Switch$1({
+		ref,
+		className,
+		helper,
+		inputRef: useMergeRefs(inputRef, localInputRef),
+		isChecked,
+		label: children,
+		name,
+		handleChange: onChange,
+		position,
+		theme,
+		value,
+		inputProps: {
+			...inputProps,
+			...disabledStateProps,
+			readOnly: inputProps.readOnly || isAnyDisabled
+		},
+		...forwardedProps,
+		isDisabled: isAnyDisabled,
+		inputId
+	});
+});
+Switch.displayName = COMPONENT_NAME;
+Switch.className = CLASSNAME;
+Switch.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Switch };

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

@@ -0,0 +1 @@
+import { Switch, SwitchProps } from "./Switch.js";

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

package/_internal/components/table/Table.js

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

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

package/_internal/components/table/TableBody.js

@@ -0,0 +1,22 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { CLASSNAME, COMPONENT_NAME, TableBody as TableBody$1 } from "../../packages/lumx-core/src/js/components/Table/TableBody.js";
+//#region src/components/table/TableBody.tsx
+/**
+* TableBody component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var TableBody = forwardRef((props, ref) => {
+	const { children, ...otherProps } = props;
+	return TableBody$1({
+		ref,
+		children,
+		...otherProps
+	});
+});
+TableBody.displayName = COMPONENT_NAME;
+TableBody.className = CLASSNAME;
+//#endregion
+export { TableBody };

package/_internal/components/table/TableCell.d.ts

@@ -0,0 +1,23 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { TableCellProps as TableCellProps$1, TableCellVariant, ThOrder } from "../../packages/lumx-core/src/js/components/Table/TableCell.js";
+
+//#region src/components/table/TableCell.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TableCellProps extends index_d_exports.GenericProps, ReactToJSX<TableCellProps$1> {
+  /** On header cell click callback. */
+  onHeaderClick?: () => void;
+}
+/**
+ * TableCell component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const TableCell: Comp<TableCellProps, HTMLTableCellElement>;
+//#endregion
+export { TableCell, TableCellProps };