@cube-dev/ui-kit 0.0.0-canary-855d62e → 0.0.0-canary-29fafcf

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

@@ -0,0 +1,66 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * 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

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

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

@@ -0,0 +1,586 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * 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

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