@lumx/react 3.19.0 → 3.19.1-alpha.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.19.0",
-        "@lumx/icons": "^3.19.0",
+        "@lumx/core": "^3.19.1-alpha.0",
+        "@lumx/icons": "^3.19.1-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -105,5 +105,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.19.0"
+    "version": "3.19.1-alpha.0"
 }

package/src/components/alert-dialog/AlertDialog.tsx

@@ -15,7 +15,7 @@ import {
     ButtonProps,
 } from '@lumx/react';
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/autocomplete/Autocomplete.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
 
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { mdiClose } from '@lumx/icons';
 
 import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 

package/src/components/avatar/Avatar.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
 
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/badge/Badge.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { ColorPalette } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/badge/BadgeWrapper.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { GenericProps } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/button/Button.test.tsx

@@ -78,9 +78,10 @@ describe(`<${Button.displayName}>`, () => {
         it('should render disabled link', async () => {
             const onClick = jest.fn();
             const { button } = setup({ children: 'Label', disabled: true, href: 'https://example.com', onClick });
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
-            expect(button).toHaveAttribute('disabled');
+            expect(screen.queryByRole('link')).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-disabled', 'true');
+            // Simulate standard disabled state (not focusable)
+            expect(button).toHaveAttribute('tabindex', '-1');
             await userEvent.click(button);
             expect(onClick).not.toHaveBeenCalled();
         });
@@ -102,8 +103,7 @@ describe(`<${Button.displayName}>`, () => {
                 onClick,
             });
             expect(button).toHaveAccessibleName('Label');
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(screen.queryByRole('link')).toBeInTheDocument();
             expect(button).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(button);
             expect(onClick).not.toHaveBeenCalled();

package/src/components/button/Button.tsx

@@ -5,7 +5,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import { Emphasis, Icon, Size, Theme, Text, ThemeProvider } from '@lumx/react';
 import { isComponent } from '@lumx/react/utils/type';
-import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
+import { getBasicClass, getRootClassName } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/button/ButtonGroup.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/button/ButtonRoot.tsx

@@ -1,17 +1,15 @@
 import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
 
-import isEmpty from 'lodash/isEmpty';
-
 import classNames from 'classnames';
 
 import { ColorPalette, Emphasis, Size, 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 { renderLink } from '@lumx/react/utils/react/renderLink';
+import { handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
+import { useDisableStateProps } from '@lumx/react/utils/disabled';
 
 type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 
@@ -107,18 +105,14 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
         color,
         emphasis,
         hasBackground,
-        href,
         isSelected,
         isActive,
         isFocused,
         isHovered,
         linkAs,
-        name,
         size,
-        target,
         theme,
         variant,
-        type = 'button',
         fullWidth,
         ...forwardedProps
     } = otherProps;
@@ -139,7 +133,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
             color: adaptedColor,
             emphasis,
             isSelected,
-            isDisabled: isAnyDisabled,
+            isDisabled: props.isDisabled || props['aria-disabled'],
             isActive,
             isFocused,
             isHovered,
@@ -151,42 +145,18 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
         }),
     );
 
-    /**
-     * If the linkAs prop is used, we use the linkAs component instead of a <button>.
-     * If there is an href attribute, we display an <a> instead of a <button>.
-     *
-     * However, in any case, if the component is disabled, we returned a <button> since disabled is not compatible with <a>.
-     */
-    if ((linkAs || !isEmpty(props.href)) && !isAnyDisabled) {
-        return renderLink(
-            {
-                linkAs,
-                ...forwardedProps,
-                'aria-label': ariaLabel,
-                href,
-                target,
-                className: buttonClassName,
-                ref: ref as RefObject<HTMLAnchorElement>,
-            },
-            children,
-        );
-    }
     return (
-        <button
+        <RawClickable
+            as={linkAs || forwardedProps.href ? 'a' : 'button'}
             {...forwardedProps}
             {...disabledStateProps}
             aria-disabled={isAnyDisabled}
             aria-label={ariaLabel}
             ref={ref as RefObject<HTMLButtonElement>}
             className={buttonClassName}
-            name={name}
-            type={
-                // eslint-disable-next-line react/button-has-type
-                type
-            }
         >
             {children}
-        </button>
+        </RawClickable>
     );
 });
 ButtonRoot.displayName = COMPONENT_NAME;

package/src/components/button/IconButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Emphasis, Icon, Size, Theme, ThemeProvider, Tooltip, TooltipProps } from '@lumx/react';
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/checkbox/Checkbox.tsx

@@ -6,7 +6,7 @@ import { mdiCheck, mdiMinus } from '@lumx/icons';
 
 import { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/chip/Chip.tsx

@@ -7,8 +7,8 @@ import { ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { onEnterPressed } from '@lumx/react/utils/browser/event';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { onEnterPressed } from '@lumx/core/js/utils';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';

package/src/components/chip/ChipGroup.tsx

@@ -2,9 +2,9 @@ import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { HorizontalAlignment } from '@lumx/react/components';
+import { HorizontalAlignment } from '@lumx/core/js/constants';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';

package/src/components/comment-block/CommentBlock.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
 import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/date-picker/DatePickerControlled.tsx

@@ -21,7 +21,7 @@ import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
 import { Locale } from '@lumx/react/utils/locale/types';
 import { usePreviousValue } from '@lumx/react/hooks/usePreviousValue';
 import { getYearDisplayName } from '@lumx/react/utils/date/getYearDisplayName';
-import { onEnterPressed } from '@lumx/react/utils/browser/event';
+import { onEnterPressed } from '@lumx/core/js/utils';
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
 import { VISUALLY_HIDDEN } from '@lumx/react/constants';

package/src/components/date-picker/constants.ts

@@ -1,4 +1,4 @@
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 
 /**
  * Component display name.

package/src/components/dialog/Dialog.tsx

@@ -11,7 +11,7 @@ import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserv
 
 import { GenericProps, isComponent } from '@lumx/react/utils/type';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

package/src/components/divider/Divider.tsx

@@ -4,7 +4,7 @@ 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 { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/drag-handle/DragHandle.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { mdiDragVertical } from '@lumx/icons';
 import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/dropdown/Dropdown.tsx

@@ -6,7 +6,7 @@ import { List, ListProps } from '@lumx/react/components/list/List';
 import { Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
 import { GenericProps, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { Offset, Placement } from '@lumx/react/components/popover/constants';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -8,7 +8,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { GenericProps, HasCloseMode, HasTheme, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

package/src/components/flag/Flag.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { ColorPalette, Icon, Size, Theme, Text } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/flex-box/FlexBox.tsx

@@ -3,11 +3,10 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import castArray from 'lodash/castArray';
 
-import { Alignment, Orientation } from '@lumx/react';
+import { Alignment, Orientation, HorizontalAlignment, Size, VerticalAlignment } from '@lumx/core/js/constants';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { HorizontalAlignment, Size, VerticalAlignment } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
 export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;

package/src/components/generic-block/GenericBlock.tsx

@@ -5,7 +5,7 @@ import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
 
 import { Comp, isComponentType } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
 import { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';

package/src/components/grid/Grid.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Alignment, Orientation, Size } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;

package/src/components/grid/GridItem.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Alignment } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';

package/src/components/grid-column/GridColumn.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import { Size } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;

package/src/components/heading/Heading.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { HeadingElement } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { Text, TextProps } from '../text';

package/src/components/heading/constants.ts

@@ -1,4 +1,4 @@
-import { Typography } from '..';
+import { Typography } from '@lumx/core/js/constants';
 
 /** The maximum authorized heading level. */
 export const MAX_HEADING_LEVEL = 6;

package/src/components/icon/Icon.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { mdiAlertCircle } from '@lumx/icons';
 import { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 

package/src/components/image-block/ImageBlock.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
 
 import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/image-lightbox/constants.ts

@@ -1,4 +1,4 @@
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 
 /**
  * Component display name.

package/src/components/inline-list/InlineList.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { ColorVariant, ColorWithVariants, Typography } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { fontColorClass, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
+import { fontColorClass, getRootClassName, getTypographyClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/input-helper/InputHelper.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Kind, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/input-label/InputLabel.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Theme, Typography } from '@lumx/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { getTypographyClassName } from '@lumx/react/utils/className';
+import { getTypographyClassName } from '@lumx/core/js/utils/className';
 import { render } from '@testing-library/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { InputLabel, InputLabelProps } from './InputLabel';

package/src/components/input-label/InputLabel.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Theme, Typography } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses, getTypographyClassName } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses, getTypographyClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 

package/src/components/lightbox/Lightbox.tsx

@@ -6,7 +6,7 @@ import { mdiClose } from '@lumx/icons';
 import { HeadingLevelProvider, IconButton, IconButtonProps } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';

package/src/components/link/Link.test.tsx

@@ -85,9 +85,10 @@ describe(`<${Link.displayName}>`, () => {
         it('should render disabled link', async () => {
             const onClick = jest.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
-            expect(link).toHaveAttribute('disabled');
+            expect(screen.queryByRole('link')).toBeInTheDocument();
+            expect(link).toHaveAttribute('aria-disabled');
+            // Simulate standard disabled state (not focusable)
+            expect(link).toHaveAttribute('tabindex', '-1');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();
         });
@@ -95,7 +96,9 @@ describe(`<${Link.displayName}>`, () => {
         it('should render aria-disabled button', async () => {
             const onClick = jest.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onClick });
-            expect(link).toHaveAttribute('aria-disabled');
+            expect(screen.queryByRole('button')).toBeInTheDocument();
+            expect(link).toHaveAttribute('aria-disabled', 'true');
+            expect(link).not.toHaveAttribute('tabindex');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();
         });
@@ -109,8 +112,7 @@ describe(`<${Link.displayName}>`, () => {
                 onClick,
             });
             expect(link).toHaveAccessibleName('Label');
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(screen.queryByRole('link')).toBeInTheDocument();
             expect(link).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();

package/src/components/link/Link.tsx

@@ -9,11 +9,12 @@ import {
     getTypographyClassName,
     handleBasicClasses,
     resolveColorWithVariants,
-} from '@lumx/react/utils/className';
+} from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
+import { useDisableStateProps } from '@lumx/react/utils/disabled';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 
@@ -67,38 +68,26 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+    const { disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         children,
         className,
         color: propColor,
         colorVariant: propColorVariant,
-        href,
         leftIcon,
-        linkAs,
         rightIcon,
-        target,
         typography,
+        linkAs,
         ...forwardedProps
     } = otherProps;
     const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
-    const isLink = linkAs || href;
-    const Component = isLink && !isAnyDisabled ? linkAs || 'a' : 'button';
-    const baseProps: React.ComponentProps<typeof Component> = {};
-    if (Component === 'button') {
-        baseProps.type = 'button';
-        Object.assign(baseProps, disabledStateProps);
-    } else if (isLink) {
-        baseProps.href = href;
-        baseProps.target = target;
-    }
-
     return (
-        <Component
-            ref={ref}
+        <RawClickable
+            ref={ref as any}
+            as={linkAs || forwardedProps.href ? 'a' : 'button'}
             {...forwardedProps}
-            {...baseProps}
+            {...disabledStateProps}
             className={classNames(
                 className,
                 handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),
@@ -112,7 +101,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
                     {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}
                 </>,
             )}
-        </Component>
+        </RawClickable>
     );
 });
 Link.displayName = COMPONENT_NAME;