@lumx/react 3.10.1-alpha.4 → 3.10.1-alpha.6

package/src/components/progress-tracker/ProgressTrackerStep.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
 import { Icon, InputHelper, InputLabel, Kind, Size } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTabProviderContext } from '../tabs/state';
@@ -40,7 +40,7 @@ const COMPONENT_NAME = 'ProgressTrackerStep';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-progress-tracker-step';
 
 /**
  * Component default props.

package/src/components/radio-button/RadioButton.tsx

@@ -3,8 +3,8 @@ import React, { ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { 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';
@@ -43,7 +43,7 @@ const COMPONENT_NAME = 'RadioButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-radio-button';
 
 /**
  * Component default props.

package/src/components/radio-button/RadioGroup.tsx

@@ -2,8 +2,7 @@ import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -22,7 +21,7 @@ const COMPONENT_NAME = 'RadioGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-radio-group';
 
 /**
  * RadioGroup component.
@@ -35,16 +34,7 @@ export const RadioGroup = forwardRef<RadioGroupProps, HTMLDivElement>((props, re
     const { children, className, ...forwardedProps } = props;
 
     return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
-        >
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </div>
     );

package/src/components/select/Select.tsx

@@ -8,9 +8,10 @@ import { IconButton } from '@lumx/react/components/button/IconButton';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import type { ComponentClassName } from '@lumx/react/utils/type';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { WithSelectContext } from './WithSelectContext';
@@ -28,7 +29,7 @@ export { SelectVariant };
 const COMPONENT_NAME = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-select';
 
 /** The default value of props. */
 const DEFAULT_PROPS: Partial<SelectProps> = {

package/src/components/select/SelectMultiple.tsx

@@ -7,10 +7,11 @@ import { Size, Theme } from '@lumx/react/components';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import type { ComponentClassName } from '@lumx/react/utils/type';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';
@@ -33,7 +34,7 @@ export interface SelectMultipleProps extends CoreSelectProps {
 const COMPONENT_NAME = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-select';
 
 /** The default value of props. */
 const DEFAULT_PROPS: Partial<SelectMultipleProps> = {

package/src/components/select/WithSelectContext.tsx

@@ -7,8 +7,9 @@ import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { InputHelper } from '@lumx/react/components/input-helper/InputHelper';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import type { ComponentClassName } from '@lumx/react/utils/type';
 
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -18,7 +19,7 @@ import { CoreSelectProps, SelectVariant } from './constants';
 const COMPONENT_NAME = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-select';
 
 /** The default value of props. */
 export const DEFAULT_PROPS: Partial<CoreSelectProps> = {

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

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

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

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
-import { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+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 { useId } from '@lumx/react/hooks/useId';
@@ -49,7 +49,7 @@ const COMPONENT_NAME = 'SideNavigationItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-side-navigation-item';
 
 /**
  * Component default props.
@@ -84,7 +84,7 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
         ...forwardedProps
     } = props;
 
-    const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
+    const content = children && Children.toArray(children).filter(isComponentType(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 { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { 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 = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-skeleton-circle';
 
 /**
  * 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 { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ValueOf, ComponentClassName } from '@lumx/react/utils/type';
+import { 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 = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-skeleton-rectangle';
 
 /**
  * SkeletonRectangle component.

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 { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { 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 = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-skeleton-typography';
 
 /**
  * SkeletonTypography component.

package/src/components/slider/Slider.tsx

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

package/src/components/slideshow/Slides.tsx

@@ -3,8 +3,8 @@ import React, { Children, CSSProperties } from 'react';
 import classNames from 'classnames';
 
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { 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';
@@ -47,7 +47,7 @@ const COMPONENT_NAME = 'Slideshow';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-slideshow';
 
 /**
  * Slides component.

package/src/components/slideshow/SlideshowControls.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { 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';
@@ -65,7 +65,7 @@ const COMPONENT_NAME = 'SlideshowControls';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-slideshow-controls';
 
 /**
  * Component default props.

package/src/components/slideshow/SlideshowItem.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -22,7 +21,7 @@ const COMPONENT_NAME = 'SlideshowItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-slideshow-item';
 
 /**
  * SlideshowItem component.
@@ -34,16 +33,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 export const SlideshowItem = forwardRef<SlideshowItemProps, HTMLDivElement>((props, ref) => {
     const { className, children, ...forwardedProps } = props;
     return (
-        <div
-            ref={ref}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
-            {...forwardedProps}
-        >
+        <div ref={ref} className={classNames(className, CLASSNAME)} {...forwardedProps}>
             {children}
         </div>
     );

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -2,10 +2,8 @@ import React from 'react';
 
 import classNames from 'classnames';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
 import { useSlideFocusManagement } from './useSlideFocusManagement';
 
 /**
@@ -25,7 +23,7 @@ const COMPONENT_NAME = 'SlideshowItemGroup';
 /**
  * Component default class name and class prefix.
  */
-export const CLASSNAME = getRootClassName(COMPONENT_NAME);
+export const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-slideshow-item-group';
 
 export const buildSlideShowGroupId = (slidesId: string, index: number) => `${slidesId}-slide-${index}`;
 
@@ -46,12 +44,7 @@ export const SlideshowItemGroup = forwardRef<SlideshowItemGroupProps, HTMLDivEle
         <div
             ref={mergeRefs(groupRef, ref)}
             role={role}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
+            className={classNames(className, CLASSNAME)}
             aria-roledescription="slide"
             aria-label={label}
             {...forwardedProps}

package/src/components/switch/Switch.tsx

@@ -3,8 +3,8 @@ import React, { Children, InputHTMLAttributes, SyntheticEvent } from 'react';
 import classNames from 'classnames';
 
 import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { 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';
@@ -39,7 +39,7 @@ const COMPONENT_NAME = 'Switch';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-switch';
 
 /**
  * Component default props.

package/src/components/table/Table.tsx

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

package/src/components/table/TableBody.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { ComponentClassName, GenericProps } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -19,7 +18,7 @@ const COMPONENT_NAME = 'TableBody';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
+const CLASSNAME: ComponentClassName<'Table', typeof COMPONENT_NAME> = 'lumx-table__body';
 
 /**
  * TableBody component.
@@ -32,11 +31,7 @@ export const TableBody = forwardRef<TableBodyProps, HTMLTableSectionElement>((pr
     const { children, className, ...forwardedProps } = props;
 
     return (
-        <tbody
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        >
+        <tbody ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </tbody>
     );

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 { GenericProps, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { ComponentClassName, GenericProps, ValueOf } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -44,7 +44,7 @@ const COMPONENT_NAME = 'TableCell';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
+const CLASSNAME: ComponentClassName<'Table', typeof COMPONENT_NAME> = 'lumx-table__cell';
 
 /**
  * Component default props.
@@ -109,10 +109,7 @@ export const TableCell = forwardRef<TableCellProps, HTMLTableCellElement>((props
             )}
 
             {variant === TableCellVariant.body && (
-                <td
-                    {...forwardedProps}
-                    className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }), `${CLASSNAME}--body`)}
-                >
+                <td {...forwardedProps} className={classNames(className, CLASSNAME, `${CLASSNAME}--body`)}>
                     <div className={`${CLASSNAME}-content`}>{children}</div>
                 </td>
             )}

package/src/components/table/TableHeader.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { ComponentClassName, GenericProps } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -19,7 +18,7 @@ const COMPONENT_NAME = 'TableHeader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
+const CLASSNAME: ComponentClassName<'Table', typeof COMPONENT_NAME> = 'lumx-table__header';
 
 /**
  * Component default props.
@@ -37,11 +36,7 @@ export const TableHeader = forwardRef<TableHeaderProps, HTMLTableSectionElement>
     const { children, className, ...forwardedProps } = props;
 
     return (
-        <thead
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        >
+        <thead ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </thead>
     );

package/src/components/table/TableRow.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { ComponentClassName, GenericProps } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -26,7 +26,7 @@ const COMPONENT_NAME = 'TableRow';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
+const CLASSNAME: ComponentClassName<'Table', typeof COMPONENT_NAME> = 'lumx-table__row';
 
 /**
  * Component default props.

package/src/components/text/Text.tsx

@@ -3,13 +3,8 @@ import React, { Children, Fragment } from 'react';
 import classNames from 'classnames';
 
 import { Icon, ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
-import { GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
-import {
-    getFontColorClassName,
-    getRootClassName,
-    handleBasicClasses,
-    getTypographyClassName,
-} from '@lumx/react/utils/className';
+import { type GenericProps, type TextElement, isComponentType, type ComponentClassName } from '@lumx/react/utils/type';
+import { getFontColorClassName, handleBasicClasses, getTypographyClassName } from '@lumx/react/utils/className';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -61,7 +56,7 @@ const COMPONENT_NAME = 'Text';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-text';
 
 /**
  * Component default props.
@@ -131,7 +126,7 @@ export const Text = forwardRef<TextProps>((props, ref) => {
             {children &&
                 Children.toArray(children).map((child, index) => {
                     // Force wrap spaces around icons to make sure they are never stuck against text.
-                    if (isComponent(Icon)(child)) {
+                    if (isComponentType(Icon)(child)) {
                         return <Fragment key={child.key || index}> {child} </Fragment>;
                     }
                     return child;

package/src/components/text-field/TextField.tsx

@@ -15,8 +15,8 @@ import {
     Size,
     Theme,
 } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -91,7 +91,7 @@ const COMPONENT_NAME = 'TextField';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-text-field';
 
 /**
  * Default minimum number of rows in the multiline mode.