@cube-dev/ui-kit 0.114.0 → 0.116.0

package/es/components/content/HotKeys/HotKeys.js

@@ -1,66 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, Fragment } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty/index.js';
-import { useKeySymbols } from '../../../utils/react/useKeySymbols.js';
-import { Space } from '../../layout/Space.js';
-import { Text } from '../Text.js';
-const StyledHotKeys = tasty(Space, {
-    qa: 'HotKeys',
-    role: 'group',
-    'aria-label': 'Keyboard shortcuts',
-    styles: {
-        display: 'inline-flex',
-        flow: 'row',
-        gap: '1x',
-        placeSelf: 'center',
-    },
-});
-const KeyElement = tasty({
-    as: 'kbd',
-    role: 'text',
-    styles: {
-        display: 'inline-flex',
-        placeContent: 'center',
-        placeItems: 'center start',
-        radius: '1r',
-        preset: 'tag',
-        boxSizing: 'border-box',
-        width: '2.5x max-content max-content',
-        height: 'min-content',
-        textAlign: 'left',
-        whiteSpace: 'nowrap',
-        padding: '0 (.5x - 1bw)',
-        color: {
-            '': '#dark.65',
-            'type=primary': '#white',
-            'type=inherit': 'currentColor',
-        },
-        fill: {
-            '': '#dark.04',
-            'type=primary | type=inherit': '#clear',
-        },
-        border: {
-            '': true,
-            'type=primary': '#white',
-            'type=inherit': 'currentColor',
-        },
-    },
-});
-function HotKeys(props, ref) {
-    const { children: keys, type, ...otherProps } = props;
-    const parsedKeys = useKeySymbols(keys);
-    const styles = extractStyles(otherProps, CONTAINER_STYLES);
-    return (_jsx(StyledHotKeys, { qa: "HotKeys", ...filterBaseProps(otherProps, { eventProps: true, labelable: true }), ref: ref, styles: styles, children: parsedKeys.map((keyGroup, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && (_jsx(Text, { color: "#dark-03", role: "separator", "aria-hidden": "true", children: "or" })), _jsx(Space, { flow: "row", gap: "0.25x", role: "group", "aria-label": `Key combination ${groupIndex + 1}`, children: keyGroup.map((key, keyIndex) => (_jsx(KeyElement, { "data-type": type, as: "kbd", role: "text", "aria-label": `Key ${key}`, children: key }, keyIndex))) })] }, groupIndex))) }));
-}
-const _HotKeys = forwardRef(HotKeys);
-_HotKeys.displayName = 'HotKeys';
-export { _HotKeys as HotKeys };
-
-        

package/es/components/content/HotKeys/index.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-export { HotKeys } from './HotKeys.js';
-
-        

package/es/components/content/Item/Item.js

@@ -1,586 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, isValidElement, useMemo, } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { useWarn } from '../../../_internal/hooks/use-warn.js';
-import { DANGER_CARD_STYLES, DANGER_CLEAR_STYLES, DANGER_ITEM_STYLES, DANGER_LINK_STYLES, DANGER_NEUTRAL_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DANGER_SECONDARY_STYLES, DEFAULT_CARD_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_ITEM_STYLES, DEFAULT_LINK_STYLES, DEFAULT_NEUTRAL_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, DEFAULT_SECONDARY_STYLES, NOTE_CARD_STYLES, NOTE_CLEAR_STYLES, NOTE_ITEM_STYLES, NOTE_LINK_STYLES, NOTE_NEUTRAL_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, NOTE_SECONDARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_ITEM_STYLES, SPECIAL_LINK_STYLES, SPECIAL_NEUTRAL_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SPECIAL_SECONDARY_STYLES, SUCCESS_CARD_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_ITEM_STYLES, SUCCESS_LINK_STYLES, SUCCESS_NEUTRAL_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, SUCCESS_SECONDARY_STYLES, WARNING_CARD_STYLES, WARNING_CLEAR_STYLES, WARNING_ITEM_STYLES, WARNING_LINK_STYLES, WARNING_NEUTRAL_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES, WARNING_SECONDARY_STYLES, } from '../../../data/item-themes.js';
-import { CheckIcon } from '../../../icons/CheckIcon.js';
-import { LoadingIcon } from '../../../icons/LoadingIcon.js';
-import { CONTAINER_STYLES, tasty, } from '../../../tasty/index.js';
-import { mergeProps, resolveIcon } from '../../../utils/react/index.js';
-import { ItemAction } from '../../actions/ItemAction/index.js';
-import { ItemActionProvider } from '../../actions/ItemActionContext.js';
-import { IconSwitch } from '../../helpers/IconSwitch/IconSwitch.js';
-import { highlightText } from '../highlightText.js';
-import { HotKeys } from '../HotKeys/index.js';
-import { ItemBadge } from '../ItemBadge/index.js';
-import { useAutoTooltip } from '../use-auto-tooltip.js';
-const ITEM_SIZE_VALUES = [
-    'xsmall',
-    'small',
-    'medium',
-    'large',
-    'xlarge',
-    'inline',
-];
-const DEFAULT_ICON_STYLES = {
-    $: '>',
-    display: 'grid',
-    placeItems: 'center',
-    placeContent: 'stretch',
-    aspectRatio: '1 / 1',
-    width: '($size - 2bw)',
-    opacity: {
-        '': 1,
-        'checkbox & selected': 1,
-        'checkbox & !selected': 0,
-        'checkbox & !selected & hovered': 0.4,
-    },
-};
-const ADDITION_STYLES = {
-    $: '>',
-    display: 'grid',
-    flow: 'column',
-    placeItems: 'center',
-    placeContent: 'stretch',
-};
-const ACTIONS_EVENT_HANDLERS = {
-    onClick: (e) => e.stopPropagation(),
-    onPointerDown: (e) => e.stopPropagation(),
-    onPointerUp: (e) => e.stopPropagation(),
-    onMouseDown: (e) => e.stopPropagation(),
-    onMouseUp: (e) => e.stopPropagation(),
-    onKeyDown: (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.stopPropagation();
-        }
-    },
-};
-const ItemElement = tasty({
-    as: 'div',
-    styles: {
-        '@interacted': 'active | :hover | :focus | :focus-within | :has([data-pressed])',
-        display: 'inline-grid',
-        flow: 'column dense',
-        gap: 0,
-        outline: 0,
-        placeItems: 'stretch',
-        placeContent: 'stretch',
-        gridTemplate: {
-            '': '"icon prefix label suffix rightIcon actions" auto "icon prefix label suffix rightIcon actions" auto / max-content max-content 1sf max-content max-content max-content',
-            'description=inline': '"icon prefix description suffix rightIcon actions" auto / max-content max-content 1sf max-content max-content max-content',
-            'description=inline & has-label': '"icon prefix label suffix rightIcon actions" auto "icon prefix description suffix rightIcon actions" auto / max-content max-content 1sf max-content max-content max-content',
-            'description=block': '"icon prefix label suffix rightIcon actions" auto "description description description description description description" auto / max-content max-content 1sf max-content max-content max-content',
-        },
-        // Prevent items from shrinking inside vertical flex layouts (Menu, ListBox, etc)
-        flexShrink: {
-            '': 'initial',
-            'menuitem | listboxitem': 0,
-        },
-        position: 'relative',
-        padding: {
-            '': 0,
-            'type=card': '.5x',
-        },
-        margin: 0,
-        radius: {
-            '': true,
-            'shape=card': '1cr',
-            'shape=button': true,
-            'shape=sharp': '0',
-            'shape=pill': 'round',
-        },
-        height: {
-            '': 'min $size',
-            'size=inline': '(1lh + 2bw)',
-        },
-        width: {
-            '': 'min $size',
-            'has-icon & has-right-icon': 'min ($size * 2)',
-            'size=inline': 'min (1lh + 2bw)',
-        },
-        border: '#clear',
-        fill: {
-            '': '#dark.0',
-            'hovered | focused': '#dark.03',
-            selected: '#dark.09',
-            'selected & (hovered | focused)': '#dark.12',
-            pressed: '#dark.09',
-            disabled: '#clear',
-        },
-        color: {
-            '': '#dark-02',
-            hovered: '#dark-02',
-            pressed: '#dark',
-            disabled: '#dark-04',
-        },
-        preset: {
-            '': 't3',
-            '!type=item': 't3m',
-            'size=xsmall': 't4',
-            'size=xlarge': 't2',
-            'size=inline': 'inline',
-            '!type=item & (size=medium | size=small | size=large)': 't3m',
-            '!type=item & size=xlarge': 't2m',
-            '(type=header | type=card) & (size=xsmall | size=small | size=medium)': 'h6',
-            '(type=header | type=card) & size=large': 'h5',
-            '(type=header | type=card) & size=xlarge': 'h4',
-        },
-        boxSizing: 'border-box',
-        transition: 'theme',
-        reset: 'button',
-        appearance: 'none',
-        touchAction: 'manipulation',
-        textDecoration: 'none',
-        outlineOffset: 1,
-        cursor: {
-            '': 'inherit',
-            ':is(a)': 'pointer',
-            ':is(button) | listboxitem | menuitem': '$pointer',
-            disabled: 'not-allowed',
-        },
-        $size: {
-            '': '$size-md',
-            'size=xsmall': '$size-xs',
-            'size=small': '$size-sm',
-            'size=medium': '$size-md',
-            'size=large': '$size-lg',
-            'size=xlarge': '$size-xl',
-            'size=inline': '(1lh + 2bw)',
-        },
-        '$inline-padding': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',
-        '$block-padding': {
-            '': '.5x',
-            'size=xsmall | size=small': '.25x',
-            'size=inline': 0,
-        },
-        '$inline-compensation': '.5x',
-        '$min-inline-padding': '(1x - 1bw)',
-        '$label-padding-left': {
-            '': '$inline-padding',
-            'has-start-content': '0',
-        },
-        '$label-padding-right': {
-            '': '$inline-padding',
-            'has-end-content': '0',
-            // Restore padding when actions are hidden AND no other visible end content
-            '!inside-wrapper & !has-suffix & !has-right-icon & auto-hide-actions & !preserve-actions-space & !@interacted': '$inline-padding',
-            'inside-wrapper & !has-suffix & !has-right-icon & !preserve-actions-space & !actions-shown': '$inline-padding',
-        },
-        '$label-padding-bottom': {
-            '': '$block-padding',
-            'description=inline': '0',
-        },
-        '$description-padding-left': {
-            '': '$inline-padding',
-            'has-start-content': 0,
-            'description=block': '($inline-padding - $inline-compensation + 1bw)',
-            'description=block & !has-start-content': '$inline-padding',
-        },
-        '$description-padding-right': {
-            '': '$inline-padding',
-            'has-end-content': 0,
-            'description=block': '($inline-padding - $inline-compensation + 1bw)',
-            'description=block & !has-end-content': '$inline-padding',
-        },
-        '$description-padding-bottom': {
-            '': 0,
-            'has-label & description=inline': '$block-padding',
-            'has-label & description=block': 'max($block-padding, (($size - 4x) / 2) + $block-padding)',
-        },
-        Icon: { ...DEFAULT_ICON_STYLES, gridArea: 'icon' },
-        RightIcon: { ...DEFAULT_ICON_STYLES, gridArea: 'rightIcon' },
-        Label: {
-            $: '>',
-            margin: 0,
-            gridArea: 'label',
-            display: 'block',
-            placeSelf: 'center start',
-            boxSizing: 'border-box',
-            placeContent: 'stretch',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            width: '0 100%',
-            preset: 'inherit',
-            transition: 'padding',
-            padding: '$block-padding $label-padding-right $label-padding-bottom $label-padding-left',
-        },
-        Description: {
-            $: '>',
-            gridArea: 'description',
-            preset: {
-                '': 't4',
-                'type=card | type=header': 't3',
-            },
-            placeSelf: 'center start',
-            boxSizing: 'border-box',
-            color: 'inherit',
-            opacity: {
-                '': 0.75,
-                'type=card | type=header': 1,
-            },
-            overflow: 'hidden',
-            whiteSpace: {
-                '': 'nowrap',
-                'type=card | type=header': 'normal',
-            },
-            textOverflow: 'ellipsis',
-            width: 'initial 100% 100%',
-            textAlign: 'left',
-            padding: '0 $description-padding-right $description-padding-bottom $description-padding-left',
-        },
-        Prefix: {
-            ...ADDITION_STYLES,
-            gridArea: 'prefix',
-            padding: {
-                '': '$inline-padding left',
-                'has-icon': 0,
-            },
-        },
-        Suffix: {
-            ...ADDITION_STYLES,
-            gridArea: 'suffix',
-            padding: {
-                '': '$inline-padding right',
-                'has-right-icon': 0,
-            },
-        },
-        Actions: {
-            $: '>',
-            gridArea: 'actions',
-            display: 'flex',
-            gap: '1bw',
-            placeItems: 'center',
-            placeContent: 'end',
-            placeSelf: 'stretch',
-            padding: {
-                '': '0 $side-padding',
-                'inside-wrapper & !actions-shown': 0,
-            },
-            boxSizing: 'border-box',
-            height: 'min ($size - 2bw)',
-            width: {
-                '': 'fixed ($actions-width, 0px)',
-                'has-actions-content & !auto-hide-actions': 'max calc-size(max-content, size)',
-                'has-actions-content & auto-hide-actions & !preserve-actions-space': 'max 0px',
-                'has-actions-content & auto-hide-actions & (!preserve-actions-space & ((@interacted & !inside-wrapper) | (inside-wrapper & actions-shown)))': 'max calc-size(max-content, size)',
-                'has-actions-content & auto-hide-actions & preserve-actions-space': 'max calc-size(max-content, size)',
-            },
-            opacity: {
-                '': 1,
-                'auto-hide-actions': 0,
-                'auto-hide-actions & ((@interacted & !inside-wrapper) | (inside-wrapper & actions-shown))': 1,
-            },
-            transition: 'width $transition ease-out, opacity $transition ease-out, padding $transition ease-out',
-            interpolateSize: 'allow-keywords',
-            // Size for the action buttons
-            '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',
-            // Side padding for the button
-            '$side-padding': '(($size - $action-size - 2bw) / 2)',
-        },
-    },
-    variants: {
-        // Default theme
-        'default.primary': DEFAULT_PRIMARY_STYLES,
-        'default.secondary': DEFAULT_SECONDARY_STYLES,
-        'default.outline': DEFAULT_OUTLINE_STYLES,
-        'default.neutral': DEFAULT_NEUTRAL_STYLES,
-        'default.clear': DEFAULT_CLEAR_STYLES,
-        'default.link': DEFAULT_LINK_STYLES,
-        'default.item': DEFAULT_ITEM_STYLES,
-        'default.card': DEFAULT_CARD_STYLES,
-        // Danger theme
-        'danger.primary': DANGER_PRIMARY_STYLES,
-        'danger.secondary': DANGER_SECONDARY_STYLES,
-        'danger.outline': DANGER_OUTLINE_STYLES,
-        'danger.neutral': DANGER_NEUTRAL_STYLES,
-        'danger.clear': DANGER_CLEAR_STYLES,
-        'danger.link': DANGER_LINK_STYLES,
-        'danger.item': DANGER_ITEM_STYLES,
-        'danger.card': DANGER_CARD_STYLES,
-        // Success theme
-        'success.primary': SUCCESS_PRIMARY_STYLES,
-        'success.secondary': SUCCESS_SECONDARY_STYLES,
-        'success.outline': SUCCESS_OUTLINE_STYLES,
-        'success.neutral': SUCCESS_NEUTRAL_STYLES,
-        'success.clear': SUCCESS_CLEAR_STYLES,
-        'success.link': SUCCESS_LINK_STYLES,
-        'success.item': SUCCESS_ITEM_STYLES,
-        'success.card': SUCCESS_CARD_STYLES,
-        // Warning theme
-        'warning.primary': WARNING_PRIMARY_STYLES,
-        'warning.secondary': WARNING_SECONDARY_STYLES,
-        'warning.outline': WARNING_OUTLINE_STYLES,
-        'warning.neutral': WARNING_NEUTRAL_STYLES,
-        'warning.clear': WARNING_CLEAR_STYLES,
-        'warning.link': WARNING_LINK_STYLES,
-        'warning.item': WARNING_ITEM_STYLES,
-        'warning.card': WARNING_CARD_STYLES,
-        // Note theme
-        'note.primary': NOTE_PRIMARY_STYLES,
-        'note.secondary': NOTE_SECONDARY_STYLES,
-        'note.outline': NOTE_OUTLINE_STYLES,
-        'note.neutral': NOTE_NEUTRAL_STYLES,
-        'note.clear': NOTE_CLEAR_STYLES,
-        'note.link': NOTE_LINK_STYLES,
-        'note.item': NOTE_ITEM_STYLES,
-        'note.card': NOTE_CARD_STYLES,
-        // Special theme
-        'special.primary': SPECIAL_PRIMARY_STYLES,
-        'special.secondary': SPECIAL_SECONDARY_STYLES,
-        'special.outline': SPECIAL_OUTLINE_STYLES,
-        'special.neutral': SPECIAL_NEUTRAL_STYLES,
-        'special.clear': SPECIAL_CLEAR_STYLES,
-        'special.link': SPECIAL_LINK_STYLES,
-        'special.item': SPECIAL_ITEM_STYLES,
-    },
-    styleProps: CONTAINER_STYLES,
-});
-const Item = (props, ref) => {
-    let { children, size = 'medium', type = 'item', theme = 'default', mods, icon: iconProp, rightIcon: rightIconProp, prefix, suffix, description, descriptionPlacement, labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, style, loadingSlot = 'auto', isLoading = false, actions, autoHideActions = false, preserveActionsSpace = false, disableActionsFocus = false, shape, defaultTooltipPlacement = 'top', level = 3, highlight, highlightCaseSensitive = false, highlightStyles, insideWrapper = false, showActions = false, ...rest } = props;
-    // Determine if Label will be rendered
-    const hasLabel = !!(children || labelProps);
-    // Set default descriptionPlacement based on type
-    // For card/header types, use 'block' only when Label is rendered
-    const finalDescriptionPlacement = descriptionPlacement ??
-        ((type === 'card' || type === 'header') && hasLabel ? 'block' : 'inline');
-    // Set default shape based on type
-    const finalShape = shape ?? (type === 'card' ? 'card' : 'button');
-    // Loading state makes the component disabled
-    const finalIsDisabled = isDisabled === true || (isLoading && isDisabled !== false);
-    // Validate type+theme combinations
-    const STANDARD_THEMES = [
-        'default',
-        'success',
-        'danger',
-        'warning',
-        'note',
-        'special',
-    ];
-    const CARD_THEMES = ['default', 'success', 'danger', 'warning', 'note'];
-    const HEADER_THEMES = ['default'];
-    const isInvalidCombination = (type === 'header' && !HEADER_THEMES.includes(theme)) ||
-        (type === 'card' && !CARD_THEMES.includes(theme)) ||
-        (!['header', 'card'].includes(type) && !STANDARD_THEMES.includes(theme));
-    useWarn(isInvalidCombination, {
-        key: ['Item', 'invalid-type-theme', type, theme],
-        args: [
-            `Item: Invalid type+theme combination. type="${type}" does not support theme="${theme}".` +
-                (type === 'header'
-                    ? ' The "header" type only supports theme: default.'
-                    : type === 'card'
-                        ? ' The "card" type only supports themes: default, success, danger, warning, note.'
-                        : ' Standard types support themes: default, success, danger, warning, note, special.'),
-        ],
-    });
-    // Warn if link type is used with icons or loading state
-    const hasLinkWithIcons = type === 'link' && (iconProp || rightIconProp);
-    const hasLinkWithLoading = type === 'link' && isLoading;
-    const hasLinkRestrictions = hasLinkWithIcons || hasLinkWithLoading;
-    const linkRestrictionMessages = [];
-    if (hasLinkWithIcons) {
-        linkRestrictionMessages.push('icons (`icon` or `rightIcon` props)');
-    }
-    if (hasLinkWithLoading) {
-        linkRestrictionMessages.push('loading state (`isLoading` prop)');
-    }
-    useWarn(hasLinkRestrictions, {
-        key: ['Item', 'link-restrictions'],
-        args: [
-            `Item: The "link" type does not support ${linkRestrictionMessages.join(' or ')}. Remove these props when using type="link".`,
-        ],
-    });
-    // Determine if we should show checkbox instead of icon
-    const hasCheckbox = iconProp === 'checkbox';
-    // Determine if size is custom (number or unrecognized string)
-    const isCustomSize = typeof size === 'number' ||
-        !ITEM_SIZE_VALUES.includes(size);
-    const sizeTokenValue = typeof size === 'number' ? `${size}px` : isCustomSize ? size : undefined;
-    // Base mods for icon resolution (without icon-dependent mods)
-    const baseMods = useMemo(() => ({
-        disabled: finalIsDisabled,
-        selected: isSelected === true,
-        loading: isLoading,
-        ...(!isCustomSize && { size: size }),
-        type,
-        theme,
-        shape: finalShape,
-        ...mods,
-    }), [
-        finalIsDisabled,
-        isSelected,
-        isLoading,
-        size,
-        isCustomSize,
-        type,
-        theme,
-        finalShape,
-        mods,
-    ]);
-    // Resolve dynamic icon props (skip resolution for 'checkbox' special value)
-    const resolvedIcon = useMemo(() => {
-        if (hasCheckbox) {
-            return { content: null, hasSlot: true };
-        }
-        return resolveIcon(iconProp, baseMods);
-    }, [iconProp, baseMods, hasCheckbox]);
-    const resolvedRightIcon = useMemo(() => resolveIcon(rightIconProp, baseMods), [rightIconProp, baseMods]);
-    // Determine which slot to use for loading when "auto" is selected
-    // Must be computed before hasIconSlot/hasRightIconSlot since they depend on it
-    const resolvedLoadingSlot = useMemo(() => {
-        if (loadingSlot !== 'auto')
-            return loadingSlot;
-        // Auto logic: prefer icon if present, then rightIcon, fallback to icon
-        if (resolvedRightIcon.hasSlot && !resolvedIcon.hasSlot)
-            return 'rightIcon';
-        return 'icon'; // fallback
-    }, [loadingSlot, resolvedIcon.hasSlot, resolvedRightIcon.hasSlot]);
-    // Determine if icon slots should render (original slot OR loading state targets this slot)
-    const hasIconSlot = resolvedIcon.hasSlot || (isLoading && resolvedLoadingSlot === 'icon');
-    const hasRightIconSlot = resolvedRightIcon.hasSlot ||
-        (isLoading && resolvedLoadingSlot === 'rightIcon');
-    const showDescription = useMemo(() => {
-        const copyProps = { ...descriptionProps };
-        delete copyProps.id;
-        return !!(description || Object.keys(copyProps).length > 0);
-    }, [description, descriptionProps]);
-    // Apply loading state to appropriate slots
-    const finalIcon = isLoading && resolvedLoadingSlot === 'icon' ? (_jsx(LoadingIcon, {})) : (resolvedIcon.content);
-    const finalRightIcon = isLoading && resolvedLoadingSlot === 'rightIcon' ? (_jsx(LoadingIcon, {})) : (resolvedRightIcon.content);
-    // Generate stable keys for icon transitions based on icon type
-    const iconKey = hasCheckbox
-        ? 'checkbox'
-        : isLoading && resolvedLoadingSlot === 'icon'
-            ? 'loading'
-            : isValidElement(finalIcon)
-                ? finalIcon.type?.displayName ||
-                    finalIcon.type?.name ||
-                    'icon'
-                : finalIcon
-                    ? 'icon'
-                    : 'empty';
-    const rightIconKey = isLoading && resolvedLoadingSlot === 'rightIcon'
-        ? 'loading'
-        : isValidElement(finalRightIcon)
-            ? finalRightIcon.type?.displayName ||
-                finalRightIcon.type?.name ||
-                'icon'
-            : finalRightIcon
-                ? 'icon'
-                : 'empty';
-    const finalPrefix = isLoading && resolvedLoadingSlot === 'prefix' ? _jsx(LoadingIcon, {}) : prefix;
-    // Build final suffix: loading icon, custom suffix, or HotKeys hint
-    const finalSuffix = isLoading && resolvedLoadingSlot === 'suffix' ? (_jsx(LoadingIcon, {})) : (suffix ??
-        (hotkeys ? (_jsx(HotKeys, { ...keyboardShortcutProps, type: type === 'primary' ? 'primary' : 'default', styles: { padding: '1x left', opacity: finalIsDisabled ? 0.5 : 1 }, children: hotkeys })) : undefined));
-    // Register global hotkey if provided
-    useHotkeys(typeof hotkeys === 'string' ? hotkeys.toLowerCase() : '', () => {
-        if (!hotkeys)
-            return;
-        if (finalIsDisabled)
-            return;
-        // Simulate a click on the element so all existing handlers run
-        if (ref && typeof ref === 'object' && ref.current) {
-            ref.current.click();
-        }
-    }, {
-        enableOnContentEditable: true,
-        enabled: !!hotkeys,
-        preventDefault: true,
-        enableOnFormTags: true,
-    }, [hotkeys, finalIsDisabled]);
-    const finalMods = useMemo(() => {
-        return {
-            ...baseMods,
-            'has-icon': hasIconSlot,
-            'has-start-content': !!(hasIconSlot || finalPrefix),
-            'has-end-content': !!(hasRightIconSlot || finalSuffix || actions),
-            'has-right-icon': hasRightIconSlot,
-            'has-label': hasLabel,
-            'has-prefix': !!finalPrefix,
-            'has-suffix': !!finalSuffix,
-            'has-description': showDescription,
-            'has-actions': !!actions,
-            'has-actions-content': !!(actions && actions !== true),
-            'auto-hide-actions': autoHideActions === true,
-            'preserve-actions-space': preserveActionsSpace === true,
-            'inside-wrapper': insideWrapper,
-            'actions-shown': showActions && insideWrapper,
-            checkbox: hasCheckbox,
-            description: showDescription ? finalDescriptionPlacement : 'none',
-        };
-    }, [
-        baseMods,
-        hasIconSlot,
-        hasRightIconSlot,
-        finalPrefix,
-        finalSuffix,
-        showDescription,
-        finalDescriptionPlacement,
-        hasCheckbox,
-        actions,
-        autoHideActions,
-        preserveActionsSpace,
-        hasLabel,
-        showActions,
-        insideWrapper,
-    ]);
-    const { labelProps: finalLabelProps, labelRef, renderWithTooltip, } = useAutoTooltip({
-        tooltip,
-        children,
-        labelProps,
-        isDynamicLabel: !!actions,
-    });
-    // Process children with highlight if applicable
-    const processedChildren = useMemo(() => {
-        if (typeof children === 'string' && highlight) {
-            return highlightText(children, highlight, highlightCaseSensitive, highlightStyles);
-        }
-        return children;
-    }, [children, highlight, highlightCaseSensitive, highlightStyles]);
-    // Render function that creates the item element
-    const renderItemElement = (tooltipTriggerProps, tooltipRef) => {
-        // Use callback ref to merge multiple refs without calling hooks
-        const handleRef = (element) => {
-            // Set the component's forwarded ref
-            if (typeof ref === 'function') {
-                ref(element);
-            }
-            else if (ref) {
-                ref.current = element;
-            }
-            // Set the tooltip ref if provided
-            if (tooltipRef) {
-                tooltipRef.current = element;
-            }
-        };
-        return (_jsxs(ItemElement, { ref: handleRef, variant: theme && type
-                ? `${type === 'header' ? 'default' : theme}.${type === 'header' ? 'item' : type}`
-                : undefined, disabled: finalIsDisabled, "aria-disabled": finalIsDisabled, "aria-selected": isSelected, mods: finalMods, styles: styles, tokens: sizeTokenValue ? { $size: sizeTokenValue } : undefined, type: htmlType, ...mergeProps(rest, tooltipTriggerProps || {}), style: style, children: [hasIconSlot && (_jsx("div", { "data-element": "Icon", children: _jsx(IconSwitch, { noWrapper: true, contentKey: iconKey, children: hasCheckbox ? _jsx(CheckIcon, {}) : finalIcon }) })), finalPrefix && _jsx("div", { "data-element": "Prefix", children: finalPrefix }), children || labelProps
-                    ? (() => {
-                        const LabelTag = type === 'header' || type === 'card'
-                            ? `h${level}`
-                            : 'div';
-                        return (_jsx(LabelTag, { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: processedChildren }));
-                    })()
-                    : null, showDescription ? (_jsx("div", { "data-element": "Description", ...descriptionProps, children: description })) : null, finalSuffix && _jsx("div", { "data-element": "Suffix", children: finalSuffix }), hasRightIconSlot && (_jsx("div", { "data-element": "RightIcon", children: _jsx(IconSwitch, { noWrapper: true, contentKey: rightIconKey, children: finalRightIcon }) })), actions && (_jsx("div", { "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: actions !== true ? (_jsx(ItemActionProvider, { type: type, theme: theme, disableActionsFocus: disableActionsFocus, isDisabled: finalIsDisabled, children: actions })) : null }))] }));
-    };
-    return renderWithTooltip(renderItemElement, defaultTooltipPlacement);
-};
-const _Item = Object.assign(forwardRef(Item), {
-    Action: ItemAction,
-    Badge: ItemBadge,
-});
-export { _Item as Item };
-/**
- * @deprecated Use `Item` instead. This export will be removed in a future version.
- */
-export { _Item as ItemBase };
-
-        

package/es/components/content/Item/index.js

@@ -1,11 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-export * from './Item.js';
-export * from '../ItemBadge/index.js';
-
-