@lumx/react 3.10.1-alpha.7 → 3.10.1-alpha.8

package/src/components/side-navigation/SideNavigation.tsx

@@ -3,7 +3,8 @@ import React, { Children, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { SideNavigationItem, Theme } from '@lumx/react';
-import { type GenericProps, type HasTheme, isComponentType, type ComponentClassName } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -23,7 +24,7 @@ const COMPONENT_NAME = 'SideNavigation';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-side-navigation';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * SideNavigation component.
@@ -35,7 +36,7 @@ const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-side-navigati
 export const SideNavigation = forwardRef<SideNavigationProps, HTMLUListElement>((props, ref) => {
     const defaultTheme = useTheme();
     const { children, className, theme = defaultTheme, ...forwardedProps } = props;
-    const content = Children.toArray(children).filter(isComponentType(SideNavigationItem));
+    const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
 
     return (
         <ul

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -1,16 +1,16 @@
 import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
-import { type GenericProps, type HasCloseMode, isComponentType, type ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import { renderLink } from '@lumx/react/utils/renderLink';
-import { renderButtonOrLink } from '@lumx/react/utils/renderButtonOrLink';
+import { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { renderLink } from '@lumx/react/utils/react/renderLink';
+import { renderButtonOrLink } from '@lumx/react/utils/react/renderButtonOrLink';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { isEmpty } from '@lumx/react/utils/collection/isEmpty';
 
 /**
  * Defines the props of the component.
@@ -49,7 +49,7 @@ const COMPONENT_NAME = 'SideNavigationItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-side-navigation-item';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -84,7 +84,7 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
         ...forwardedProps
     } = props;
 
-    const content = children && Children.toArray(children).filter(isComponentType(SideNavigationItem));
+    const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
     const hasContent = !isEmpty(content);
     const shouldSplitActions = Boolean(onActionClick);
     const showChildren = hasContent && isOpen;

package/src/components/skeleton/SkeletonCircle.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -28,7 +28,7 @@ const COMPONENT_NAME = 'SkeletonCircle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-skeleton-circle';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * SkeletonCircle component.

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import type { GenericProps, HasTheme, ValueOf, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -42,7 +42,7 @@ const COMPONENT_NAME = 'SkeletonRectangle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-skeleton-rectangle';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * SkeletonRectangle component.

package/src/components/skeleton/SkeletonTypography.stories.tsx

@@ -6,21 +6,16 @@ export default { title: 'LumX components/skeleton/Skeleton Typography' };
 
 const colors = Object.values(ColorPalette);
 
-export const TextTypography = ({ theme }: any) => (
+export const TextTypography = () => (
     <>
-        <SkeletonTypography
-            theme={theme}
-            typography={Typography.title}
-            width="30%"
-            className="lumx-spacing-margin-bottom"
-        />
-        <SkeletonTypography theme={theme} typography={Typography.body1} />
-        <SkeletonTypography theme={theme} typography={Typography.body1} />
-        <SkeletonTypography theme={theme} typography={Typography.body1} />
-        <SkeletonTypography theme={theme} typography={Typography.body1} width="70%" />
+        <SkeletonTypography typography={Typography.title} width="30%" className="lumx-spacing-margin-bottom" />
+        <SkeletonTypography typography={Typography.body1} />
+        <SkeletonTypography typography={Typography.body1} />
+        <SkeletonTypography typography={Typography.body1} />
+        <SkeletonTypography typography={Typography.body1} width="70%" />
         Colors:
         {colors.map((color) => (
-            <SkeletonTypography key={color} color={color} theme={theme} typography={Typography.body1} />
+            <SkeletonTypography key={color} color={color} typography={Typography.body1} />
         ))}
     </>
 );

package/src/components/skeleton/SkeletonTypography.tsx

@@ -3,8 +3,8 @@ import React, { CSSProperties } from 'react';
 import classNames from 'classnames';
 
 import { Theme, TypographyInterface, ColorPalette } from '@lumx/react';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -30,7 +30,7 @@ const COMPONENT_NAME = 'SkeletonTypography';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-skeleton-typography';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * SkeletonTypography component.

package/src/components/slider/Slider.tsx

@@ -5,9 +5,9 @@ import classNames from 'classnames';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 import useEventCallback from '@lumx/react/hooks/useEventCallback';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import { clamp } from '@lumx/react/utils/clamp';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { clamp } from '@lumx/react/utils/number/clamp';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -50,7 +50,7 @@ const COMPONENT_NAME = 'Slider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-slider';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/slider/index.ts

@@ -1,2 +1,2 @@
 export * from './Slider';
-export { clamp } from '@lumx/react/utils/clamp';
+export { clamp } from '@lumx/react/utils/number/clamp';

package/src/components/slideshow/Slides.tsx

@@ -1,13 +1,13 @@
 import React, { Children, CSSProperties } from 'react';
 
+import chunk from 'lodash/chunk';
 import classNames from 'classnames';
 
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { chunk } from '@lumx/react/utils/collection/chunk';
 
 import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 
@@ -37,6 +37,8 @@ export interface SlidesProps extends GenericProps, HasTheme {
      * Receives the group position starting from 1 and the total number of groups.
      * */
     slideGroupLabel?: (groupPosition: number, groupTotal: number) => string;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -47,7 +49,7 @@ const COMPONENT_NAME = 'Slideshow';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-slideshow';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Slides component.

package/src/components/slideshow/Slideshow.stories.tsx

@@ -15,7 +15,7 @@ export default {
     },
 };
 
-export const Simple = ({ theme, images = Object.values(LANDSCAPE_IMAGES), ...props }: any) => {
+export const Simple = ({ images = Object.values(LANDSCAPE_IMAGES), ...props }: any) => {
     return (
         <Slideshow
             aria-label="Simple carousel example"
@@ -23,7 +23,6 @@ export const Simple = ({ theme, images = Object.values(LANDSCAPE_IMAGES), ...pro
                 nextButtonProps: { label: 'Next' },
                 previousButtonProps: { label: 'Previous' },
             }}
-            theme={theme}
             {...props}
             style={{ width: '50%' }}
             slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
@@ -34,7 +33,6 @@ export const Simple = ({ theme, images = Object.values(LANDSCAPE_IMAGES), ...pro
                         thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
                         image={image}
                         alt=""
-                        theme={theme}
                     />
                 </SlideshowItem>
             ))}

package/src/components/slideshow/Slideshow.tsx

@@ -4,7 +4,7 @@ import { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps }
 import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { GenericProps } from '@lumx/react/utils/type';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -37,6 +37,8 @@ export interface SlideshowProps
         >;
     /** Callback when slide changes */
     onChange?(index: number): void;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -26,7 +26,7 @@ export const Simple = () => {
     );
 };
 
-export const ControllingSlideshow = ({ images = Object.values(LANDSCAPE_IMAGES), theme }: any) => {
+export const ControllingSlideshow = ({ images = Object.values(LANDSCAPE_IMAGES) }: any) => {
     const {
         activeIndex: currentIndex,
         slideshowId,
@@ -61,7 +61,6 @@ export const ControllingSlideshow = ({ images = Object.values(LANDSCAPE_IMAGES),
             activeIndex={currentIndex}
             id={slideshowId}
             ref={setSlideshow}
-            theme={theme}
             isAutoPlaying={isAutoPlaying}
             slidesId={slideshowSlidesId}
             toggleAutoPlay={toggleAutoPlay}
@@ -76,7 +75,6 @@ export const ControllingSlideshow = ({ images = Object.values(LANDSCAPE_IMAGES),
                         onPreviousClick={onPreviousClick}
                         slidesCount={slidesCount}
                         parentRef={slideshow}
-                        theme={theme}
                         isAutoPlaying={isAutoPlaying}
                         nextButtonProps={{ label: 'Next', 'aria-controls': slideshowSlidesId }}
                         previousButtonProps={{ label: 'Previous', 'aria-controls': slideshowSlidesId }}
@@ -96,7 +94,6 @@ export const ControllingSlideshow = ({ images = Object.values(LANDSCAPE_IMAGES),
                         thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
                         image={image}
                         alt=""
-                        theme={theme}
                     />
                 </SlideshowItem>
             ))}

package/src/components/slideshow/SlideshowControls.tsx

@@ -1,11 +1,12 @@
 import React, { RefObject, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
+import range from 'lodash/range';
 
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { WINDOW } from '@lumx/react/constants';
 import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';
@@ -15,7 +16,6 @@ import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useSwipeNavigate } from './useSwipeNavigate';
 import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants';
 import { usePaginationVisibleRange } from './usePaginationVisibleRange';
-import { range } from '@lumx/react/utils/collection/range';
 
 /**
  * Defines the props of the component.
@@ -65,7 +65,7 @@ const COMPONENT_NAME = 'SlideshowControls';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-slideshow-controls';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/slideshow/SlideshowItem.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -11,6 +12,8 @@ import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 export interface SlideshowItemProps extends GenericProps {
     /** interval in which slides are automatically shown */
     interval?: number;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -21,7 +24,7 @@ const COMPONENT_NAME = 'SlideshowItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-slideshow-item';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * SlideshowItem component.

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
 import classNames from 'classnames';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useSlideFocusManagement } from './useSlideFocusManagement';
 
@@ -13,6 +14,7 @@ export interface SlideshowItemGroupProps extends GenericProps {
     role?: 'tabpanel' | 'group';
     label?: string;
     isDisplayed?: boolean;
+    children?: React.ReactNode;
 }
 
 /**
@@ -23,7 +25,7 @@ const COMPONENT_NAME = 'SlideshowItemGroup';
 /**
  * Component default class name and class prefix.
  */
-export const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-slideshow-item-group';
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 export const buildSlideShowGroupId = (slidesId: string, index: number) => `${slidesId}-slide-${index}`;
 

package/src/components/switch/Switch.test.tsx

@@ -69,7 +69,7 @@ describe(`<${Switch.displayName}>`, () => {
             expect(helper).toHaveAttribute('id');
 
             expect(label).toBeInTheDocument();
-            expect(label).toHaveTextContent(props.children);
+            expect(label).toHaveTextContent(props.children as string);
             expect(label).toHaveAttribute('for', id);
 
             expect(input).toHaveAttribute('id', id);

package/src/components/switch/Switch.tsx

@@ -1,10 +1,11 @@
 import React, { Children, InputHTMLAttributes, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
 
 import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -29,6 +30,8 @@ export interface SwitchProps extends GenericProps, HasTheme {
     onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
     /** optional props for input */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -39,7 +42,7 @@ const COMPONENT_NAME = 'Switch';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-switch';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -126,7 +129,7 @@ export const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {
                     <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>
                         {children}
                     </InputLabel>
-                    {helper && (
+                    {!isEmpty(helper) && (
                         <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>
                             {helper}
                         </InputHelper>

package/src/components/table/Table.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -16,6 +16,8 @@ export interface TableProps extends GenericProps, HasTheme {
     hasBefore?: boolean;
     /** Whether the table has dividers or not. */
     hasDividers?: boolean;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -26,7 +28,7 @@ const COMPONENT_NAME = 'Table';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-table';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/table/TableBody.tsx

@@ -2,13 +2,17 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import type { ComponentClassName, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
  */
-export type TableBodyProps = GenericProps;
+export interface TableBodyProps extends GenericProps {
+    /** Children */
+    children?: React.ReactNode;
+}
 
 /**
  * Component display name.
@@ -18,7 +22,7 @@ const COMPONENT_NAME = 'TableBody';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<'Table', typeof COMPONENT_NAME> = 'lumx-table__body';
+const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
 
 /**
  * TableBody component.

package/src/components/table/TableCell.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
 import { Icon, Size } from '@lumx/react';
-import type { ComponentClassName, GenericProps, ValueOf } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -34,6 +34,8 @@ export interface TableCellProps extends GenericProps {
     variant?: TableCellVariant;
     /** On header cell click callback. */
     onHeaderClick?(): void;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -44,7 +46,7 @@ const COMPONENT_NAME = 'TableCell';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<'Table', typeof COMPONENT_NAME> = 'lumx-table__cell';
+const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
 
 /**
  * Component default props.

package/src/components/table/TableHeader.tsx

@@ -2,13 +2,17 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import type { ComponentClassName, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
  */
-export type TableHeaderProps = GenericProps;
+export interface TableHeaderProps extends GenericProps {
+    /** Children */
+    children?: React.ReactNode;
+}
 
 /**
  * Component display name.
@@ -18,7 +22,7 @@ const COMPONENT_NAME = 'TableHeader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<'Table', typeof COMPONENT_NAME> = 'lumx-table__header';
+const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
 
 /**
  * Component default props.

package/src/components/table/TableRow.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import type { ComponentClassName, GenericProps } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -16,6 +16,8 @@ export interface TableRowProps extends GenericProps {
     isDisabled?: boolean;
     /** Whether the component is selected or not. */
     isSelected?: boolean;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -26,7 +28,7 @@ const COMPONENT_NAME = 'TableRow';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<'Table', typeof COMPONENT_NAME> = 'lumx-table__row';
+const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
 
 /**
  * Component default props.

package/src/components/tabs/TabList.tsx

@@ -6,7 +6,7 @@ import { Alignment, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 

package/src/components/tabs/TabPanel.tsx

@@ -16,6 +16,8 @@ export interface TabPanelProps extends GenericProps {
     id?: string;
     /** Whether the tab is active or not. */
     isActive?: boolean;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**