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

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 } 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,7 +35,7 @@ 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

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 } 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.

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import classNames from 'classnames';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } 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';
 
@@ -24,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}`;
 

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 } 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.

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.

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 } 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.

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.

package/src/components/thumbnail/Thumbnail.tsx

@@ -12,8 +12,8 @@ import React, {
 import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';
-import { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { Falsy, GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { mdiImageBroken } from '@lumx/icons';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
@@ -81,7 +81,7 @@ const COMPONENT_NAME = 'Thumbnail';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-thumbnail';
 
 /**
  * Component default props.

package/src/components/toolbar/Toolbar.tsx

@@ -2,8 +2,8 @@ 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 { GenericProps, ComponentClassName } 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 = 'Toolbar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-toolbar';
 
 /**
  * Component default props.

package/src/components/tooltip/Tooltip.tsx

@@ -5,8 +5,8 @@ import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 
 import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
-import { GenericProps, HasCloseMode } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasCloseMode, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
 import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';
@@ -47,7 +47,7 @@ const COMPONENT_NAME = 'Tooltip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-tooltip';
 
 /**
  * Component default props.

package/src/components/uploader/Uploader.tsx

@@ -3,8 +3,8 @@ import React, { MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 import { AspectRatio, Icon, Size, Theme } 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 { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -60,7 +60,7 @@ const COMPONENT_NAME = 'Uploader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-uploader';
 
 /**
  * Component default props.

package/src/components/user-block/UserBlock.tsx

@@ -2,8 +2,8 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { Avatar, ColorPalette, Link, Orientation, 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -54,7 +54,7 @@ const COMPONENT_NAME = 'UserBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-user-block';
 
 /**
  * Component default props.

package/src/utils/className/index.ts

@@ -1,4 +1,3 @@
 export { getBasicClass, handleBasicClasses } from '@lumx/core/js/utils';
-export { getRootClassName } from './getRootClassName';
 export { getTypographyClassName } from './getTypographyClassName';
 export { getFontColorClassName } from './getFontColorClassName';

package/src/utils/className.test.js

@@ -0,0 +1,41 @@
+import { getBasicClass, handleBasicClasses } from './className';
+
+describe(getBasicClass, () => {
+    it('should generate boolean modifier name with boolean prefix', () => {
+        expect(getBasicClass({ prefix: 'prefix', type: 'foo', value: true })).toEqual('prefix--is-foo');
+    });
+    it('should generate boolean modifier name keeping the existing boolean prefix', () => {
+        expect(getBasicClass({ prefix: 'prefix', type: 'isFoo', value: true })).toEqual('prefix--is-foo');
+        expect(getBasicClass({ prefix: 'prefix', type: 'hasFoo', value: true })).toEqual('prefix--has-foo');
+    });
+    it(`should generate string modifier name`, () => {
+        expect(getBasicClass({ prefix: 'prefix', type: 'foo', value: 'bar' })).toEqual('prefix--foo-bar');
+    });
+    it(`should generate number modifier name`, () => {
+        expect(getBasicClass({ prefix: 'prefix', type: 'foo', value: 2 })).toEqual('prefix--foo-2');
+    });
+});
+
+describe(handleBasicClasses, () => {
+    it('should use prefix if there is no modifier', () => {
+        expect(
+            handleBasicClasses({
+                prefix: 'prefix',
+            }),
+        ).toEqual('prefix');
+    });
+    it('should filter falsy modifiers', () => {
+        expect(
+            handleBasicClasses({
+                prefix: 'prefix',
+                theme: 'dark',
+                isModifier: true,
+                isEmpty: '',
+                isNull: null,
+                isUndefined: undefined,
+                isZero: 0,
+                isNumberNotZero: 2,
+            }),
+        ).toEqual('prefix prefix--theme-dark prefix--is-modifier prefix--is-number-not-zero-2');
+    });
+});

package/src/utils/type/Callback.ts

@@ -0,0 +1,4 @@
+/**
+ * Callback function type alias (use for readability)
+ */
+export type Callback = () => void;

package/src/utils/type/Comp.ts

@@ -0,0 +1,14 @@
+import type { ReactElement, Ref } from 'react';
+
+/** LumX Component Type. */
+export type Comp<P, T = HTMLElement> = {
+    (props: P & { ref?: Ref<T> }): ReactElement | null;
+    /** React component type. */
+    readonly $$typeof: symbol;
+    /** Component default props. */
+    defaultProps?: Partial<P>;
+    /** Component name. */
+    displayName?: string;
+    /** Component base class name. */
+    className?: string;
+};

package/src/utils/type/ComponentClassName.ts

@@ -0,0 +1,7 @@
+import type { KebabCase } from './KebabCase';
+
+/** Transform the component name into the lumx class name. */
+export type ComponentClassName<
+    TComponentName extends string,
+    TSubComponentName extends string = '',
+> = `lumx-${KebabCase<TComponentName>}${TSubComponentName extends `${TComponentName}${infer TSubName}` ? `__${KebabCase<TSubName>}` : ''}`;

package/src/utils/type/ComponentRef.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import type { Comp } from './Comp';
+
+/**
+ * Extract ref type for a component or JSX intrinsic element
+ *
+ * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
+ * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
+ */
+export type ComponentRef<C> = C extends keyof JSX.IntrinsicElements
+    ? JSX.IntrinsicElements[C]['ref']
+    : C extends Comp<any, infer T>
+      ? React.Ref<T>
+      : C extends React.JSXElementConstructor<{ ref?: infer R }>
+        ? R
+        : never;

package/src/utils/type/Falsy.ts

@@ -0,0 +1,5 @@
+/**
+ * JS falsy values.
+ * (excluding `NaN` as it can't be distinguished from `number`)
+ */
+export type Falsy = false | undefined | null | 0 | '';