@cube-dev/ui-kit 0.97.0 → 0.98.0

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

@@ -1,24 +1,34 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.0
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, } from 'react';
+import { forwardRef, isValidElement, useMemo, } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { DANGER_CLEAR_STYLES, DANGER_ITEM_STYLES, DANGER_LINK_STYLES, DANGER_NEUTRAL_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DANGER_SECONDARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_ITEM_STYLES, DEFAULT_LINK_STYLES, DEFAULT_NEUTRAL_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, DEFAULT_SECONDARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_ITEM_STYLES, SPECIAL_LINK_STYLES, SPECIAL_NEUTRAL_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SPECIAL_SECONDARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_ITEM_STYLES, SUCCESS_LINK_STYLES, SUCCESS_NEUTRAL_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, SUCCESS_SECONDARY_STYLES, } from '../../../data/item-themes';
+import { useWarn } from '../../../_internal/hooks/use-warn';
+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, 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, } from '../../../data/item-themes';
 import { CheckIcon } from '../../../icons/CheckIcon';
 import { LoadingIcon } from '../../../icons/LoadingIcon';
 import { CONTAINER_STYLES, tasty, } from '../../../tasty';
-import { mergeProps } from '../../../utils/react';
+import { mergeProps, resolveIcon } from '../../../utils/react';
 import { ItemAction } from '../../actions/ItemAction';
 import { ItemActionProvider } from '../../actions/ItemActionContext';
+import { IconSwitch } from '../../helpers/IconSwitch/IconSwitch';
 import { highlightText } from '../highlightText';
 import { HotKeys } from '../HotKeys';
 import { ItemBadge } from '../ItemBadge';
 import { useAutoTooltip } from '../use-auto-tooltip';
+const ITEM_SIZE_VALUES = [
+    'xsmall',
+    'small',
+    'medium',
+    'large',
+    'xlarge',
+    'inline',
+];
 const DEFAULT_ICON_STYLES = {
     $: '>',
     display: 'grid',
@@ -63,7 +73,8 @@ const ItemElement = tasty({
         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 label suffix rightIcon actions" auto "icon prefix description 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)
@@ -72,13 +83,17 @@ const ItemElement = tasty({
             'menuitem | listboxitem': 0,
         },
         position: 'relative',
-        padding: 0,
+        padding: {
+            '': 0,
+            'type=card': '.5x',
+        },
         margin: 0,
         radius: {
             '': true,
             'shape=card': '1cr',
             'shape=button': true,
             'shape=sharp': '0',
+            'shape=pill': 'round',
         },
         height: {
             '': 'min $size',
@@ -106,11 +121,14 @@ const ItemElement = tasty({
         },
         preset: {
             '': 't3',
-            button: 't3m',
+            '!type=item': 't3m',
             'size=xsmall': 't4',
             'size=xlarge': 't2',
-            'size=xlarge & button': 't2m',
-            'size=inline': 'tag',
+            'size=xlarge & !type=item': 't2m',
+            'size=inline': 'inline',
+            '(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',
         textDecoration: 'none',
@@ -118,7 +136,7 @@ const ItemElement = tasty({
         reset: 'button',
         outlineOffset: 1,
         cursor: {
-            '': 'default',
+            '': 'inherit',
             ':is(a)': 'pointer',
             ':is(button) | listboxitem | menuitem': '$pointer',
             disabled: 'not-allowed',
@@ -130,12 +148,9 @@ const ItemElement = tasty({
             'size=medium': '$size-md',
             'size=large': '$size-lg',
             'size=xlarge': '$size-xl',
-            'size=inline': '1lh',
-        },
-        '$inline-padding': {
-            '': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',
-            'size=inline': '.25x',
+            'size=inline': '(1lh + 2bw)',
         },
+        '$inline-padding': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',
         '$block-padding': {
             '': '.5x',
             'size=xsmall | size=small': '.25x',
@@ -168,14 +183,15 @@ const ItemElement = tasty({
             'description=block & !has-end-content': '$inline-padding',
         },
         '$description-padding-bottom': {
-            '': '$block-padding',
-            'description=block': '$bottom-padding',
+            '': 0,
+            'has-label & description=inline': '$block-padding',
+            'has-label & description=block': 'max($block-padding, (($size - 4x) / 2) + $block-padding)',
         },
-        '$bottom-padding': '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',
@@ -185,14 +201,23 @@ const ItemElement = tasty({
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             maxWidth: '100%',
+            preset: 'inherit',
             padding: '$block-padding $label-padding-right $label-padding-bottom $label-padding-left',
         },
         Description: {
             $: '>',
             gridArea: 'description',
-            preset: 't4',
+            preset: {
+                '': 't4',
+                'type=card | type=header': 't3',
+            },
+            placeSelf: 'center start',
+            boxSizing: 'border-box',
             color: 'inherit',
-            opacity: 0.75,
+            opacity: {
+                '': 0.75,
+                'type=card | type=header': 1,
+            },
             overflow: 'hidden',
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
@@ -253,6 +278,7 @@ const ItemElement = tasty({
         '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,
@@ -261,6 +287,7 @@ const ItemElement = tasty({
         '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,
@@ -269,6 +296,7 @@ const ItemElement = tasty({
         'success.clear': SUCCESS_CLEAR_STYLES,
         'success.link': SUCCESS_LINK_STYLES,
         'success.item': SUCCESS_ITEM_STYLES,
+        'success.card': SUCCESS_CARD_STYLES,
         // Special theme
         'special.primary': SPECIAL_PRIMARY_STYLES,
         'special.secondary': SPECIAL_SECONDARY_STYLES,
@@ -277,32 +305,136 @@ const ItemElement = tasty({
         'special.clear': SPECIAL_CLEAR_STYLES,
         'special.link': SPECIAL_LINK_STYLES,
         'special.item': SPECIAL_ITEM_STYLES,
+        // Note theme (card type only)
+        'note.card': NOTE_CARD_STYLES,
     },
     styleProps: CONTAINER_STYLES,
 });
 const Item = (props, ref) => {
-    let { children, size = 'medium', type = 'item', theme = 'default', mods, icon, rightIcon, prefix, suffix, description, descriptionPlacement = 'inline', labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, style, loadingSlot = 'auto', isLoading = false, isCard = false, actions, showActionsOnHover = false, disableActionsFocus = false, isButton = false, shape = 'button', defaultTooltipPlacement = 'top', highlight, highlightCaseSensitive = false, highlightStyles, ...rest } = props;
+    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, showActionsOnHover = false, disableActionsFocus = false, shape, defaultTooltipPlacement = 'top', level = 3, highlight, highlightCaseSensitive = false, highlightStyles, ...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', 'special'];
+    const CARD_THEMES = ['default', 'success', 'danger', '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, note.'
+                        : ' Standard types support themes: default, success, danger, 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 = icon === 'checkbox';
+    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 (rightIcon && !icon)
+        if (resolvedRightIcon.hasSlot && !resolvedIcon.hasSlot)
             return 'rightIcon';
         return 'icon'; // fallback
-    }, [loadingSlot, icon, rightIcon]);
+    }, [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, {}) : icon;
-    const finalRightIcon = isLoading && resolvedLoadingSlot === 'rightIcon' ? (_jsx(LoadingIcon, {})) : (rightIcon);
+    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 ??
@@ -323,13 +455,14 @@ const Item = (props, ref) => {
         preventDefault: true,
         enableOnFormTags: true,
     }, [hotkeys, finalIsDisabled]);
-    mods = useMemo(() => {
+    const finalMods = useMemo(() => {
         return {
-            'has-icon': !!finalIcon,
-            'has-start-content': !!(finalIcon || finalPrefix),
-            'has-end-content': !!(finalRightIcon || finalSuffix || actions),
-            'has-right-icon': !!finalRightIcon,
-            'has-label': !!(children || labelProps),
+            ...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,
@@ -337,37 +470,20 @@ const Item = (props, ref) => {
             'has-actions-content': !!(actions && actions !== true),
             'show-actions-on-hover': showActionsOnHover === true,
             checkbox: hasCheckbox,
-            disabled: finalIsDisabled,
-            selected: isSelected === true,
-            loading: isLoading,
-            card: isCard === true,
-            button: isButton === true,
-            ...(typeof size === 'number' ? {} : { size }),
-            description: showDescription ? descriptionPlacement : 'none',
-            type,
-            theme,
-            shape,
-            ...mods,
+            description: showDescription ? finalDescriptionPlacement : 'none',
         };
     }, [
-        finalIcon,
-        finalRightIcon,
+        baseMods,
+        hasIconSlot,
+        hasRightIconSlot,
         finalPrefix,
         finalSuffix,
         showDescription,
-        descriptionPlacement,
+        finalDescriptionPlacement,
         hasCheckbox,
-        isSelected,
-        isLoading,
-        isCard,
-        isButton,
-        shape,
         actions,
         showActionsOnHover,
-        size,
-        type,
-        theme,
-        mods,
+        hasLabel,
     ]);
     const { labelProps: finalLabelProps, labelRef, renderWithTooltip, } = useAutoTooltip({
         tooltip,
@@ -398,11 +514,14 @@ const Item = (props, ref) => {
                 tooltipRef.current = element;
             }
         };
-        // Merge custom size style with provided style
-        const finalStyle = typeof size === 'number'
-            ? { ...style, '--size': `${size}px` }
-            : style;
-        return (_jsxs(ItemElement, { ref: handleRef, variant: theme && type ? `${theme}.${type}` : undefined, disabled: finalIsDisabled, "aria-disabled": finalIsDisabled, "aria-selected": isSelected, mods: mods, styles: styles, type: htmlType, ...mergeProps(rest, tooltipTriggerProps || {}), style: finalStyle, children: [finalIcon && (_jsx("div", { "data-element": "Icon", children: hasCheckbox ? _jsx(CheckIcon, {}) : finalIcon })), finalPrefix && _jsx("div", { "data-element": "Prefix", children: finalPrefix }), children || labelProps ? (_jsx("div", { "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 }), finalRightIcon && _jsx("div", { "data-element": "RightIcon", children: finalRightIcon }), actions && (_jsx("div", { "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: actions !== true ? (_jsx(ItemActionProvider, { type: type, theme: theme, disableActionsFocus: disableActionsFocus, children: actions })) : null }))] }));
+        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' ? `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, children: actions })) : null }))] }));
     };
     return renderWithTooltip(renderItemElement, defaultTooltipPlacement);
 };

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.0
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 

package/es/components/content/ItemBadge/ItemBadge.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.0
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.0
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 

package/es/components/content/Layout/GridLayout.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.0
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 

package/es/components/content/Layout/Layout.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.0
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 
@@ -9,6 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Children, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { extractStyles, filterBaseProps, INNER_STYLES, mergeStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { isDevEnv } from '../../../tasty/utils/isDevEnv';
+import { useCombinedRefs } from '../../../utils/react';
 import { Alert } from '../Alert';
 import { LayoutProvider, useLayoutContext } from './LayoutContext';
 const LayoutElement = tasty({
@@ -26,7 +27,13 @@ const LayoutElement = tasty({
             collapsed: '6x',
         },
         '$content-padding': '1x',
+        // Auto-border size for sub-components (set when layout is vertical)
+        '$layout-border-size': {
+            '': '0',
+            vertical: '1bw',
+        },
         Inner: {
+            // .base-class[data-hover] > [data-element="Inner"] { ...}
             // Direct child selector required for nested layouts
             $: '>',
             position: 'absolute',
@@ -34,6 +41,8 @@ const LayoutElement = tasty({
             display: 'flex',
             flow: 'column',
             overflow: 'hidden',
+            placeContent: 'stretch',
+            placeItems: 'stretch',
             // Disable transition during panel resize for snappy feedback
             // Also disable transition when not ready to prevent initial animation
             // Only animate when has-transition is enabled (and not dragging/not-ready)
@@ -56,7 +65,8 @@ function LayoutInner(props) {
     const localRef = useRef(null);
     const [isAutoHeight, setIsAutoHeight] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(false);
-    const { isGrid, columns, rows, template, contentPadding, hasTransition = false, styles, children, style, forwardedRef, _forceShowDevWarning, ...otherProps } = props;
+    const { isGrid, columns, rows, template, contentPadding, hasTransition = false, styles, children, style, forwardedRef, innerRef: innerRefProp, innerProps, _forceShowDevWarning, ...otherProps } = props;
+    const combinedInnerRef = useCombinedRefs(innerRefProp);
     // Separate panels from other children
     const { panels, content } = useMemo(() => {
         const panelElements = [];
@@ -74,6 +84,14 @@ function LayoutInner(props) {
     // Extract outer wrapper styles and inner content styles
     const outerStyles = extractStyles(otherProps, OUTER_STYLES);
     const innerStyles = extractStyles(otherProps, INNER_STYLES);
+    // Calculate if the layout flow is vertical (for auto-border feature)
+    // Default flow is 'column' (vertical), only horizontal when explicitly set to 'row'
+    const isVertical = useMemo(() => {
+        const flowFromProp = innerStyles?.flow;
+        const flowFromStyles = styles?.Inner?.flow;
+        const flowValue = flowFromProp ?? flowFromStyles;
+        return typeof flowValue !== 'string' || !flowValue.startsWith('row');
+    }, [innerStyles?.flow, styles?.Inner]);
     // Merge styles using the same pattern as LayoutPane
     const finalStyles = useMemo(() => {
         // Handle grid mode and grid properties
@@ -162,7 +180,8 @@ function LayoutInner(props) {
         'has-transition': hasTransition,
         'auto-height': isAutoHeight && !isCollapsed,
         collapsed: isCollapsed,
-    }), [isDragging, isReady, hasTransition, isAutoHeight, isCollapsed]);
+        vertical: isVertical,
+    }), [isDragging, isReady, hasTransition, isAutoHeight, isCollapsed, isVertical]);
     // Combine local ref with forwarded ref
     const setRefs = (element) => {
         localRef.current = element;
@@ -197,7 +216,7 @@ function LayoutInner(props) {
             dismissOverlayPanels?.();
         }
     }, [hasOverlayPanels, dismissOverlayPanels]);
-    return (_jsx(LayoutElement, { ref: setRefs, ...filterBaseProps(otherProps, { eventProps: true }), mods: mods, styles: finalStyles, style: insetStyle, onKeyDown: hasOverlayPanels ? handleKeyDown : undefined, children: showDevWarning ? (_jsxs(Alert, { theme: "danger", children: [_jsx("b", { children: "UIKit:" }), " ", _jsx("b", { children: "<Layout/>" }), " has collapsed to ", _jsx("b", { children: "0" }), " height. Ensure the parent container has a defined height or use the", ' ', _jsx("b", { children: "height" }), " prop on ", _jsx("b", { children: "<Layout/>" }), "."] })) : (_jsxs(_Fragment, { children: [panels, _jsx("div", { "data-element": "Inner", onFocus: handleInnerFocus, children: content })] })) }));
+    return (_jsx(LayoutElement, { ref: setRefs, ...filterBaseProps(otherProps, { eventProps: true }), mods: mods, styles: finalStyles, style: insetStyle, onKeyDown: hasOverlayPanels ? handleKeyDown : undefined, children: showDevWarning ? (_jsxs(Alert, { theme: "danger", children: [_jsx("b", { children: "UIKit:" }), " ", _jsx("b", { children: "<Layout/>" }), " has collapsed to ", _jsx("b", { children: "0" }), " height. Ensure the parent container has a defined height or use the", ' ', _jsx("b", { children: "height" }), " prop on ", _jsx("b", { children: "<Layout/>" }), "."] })) : (_jsxs(_Fragment, { children: [panels, _jsx("div", { ref: combinedInnerRef, "data-element": "Inner", onFocus: handleInnerFocus, ...innerProps, children: content })] })) }));
 }
 /**
  * Layout component provides a vertical flex layout with overflow-safe content.

package/es/components/content/Layout/LayoutBlock.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.0
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 

package/es/components/content/Layout/LayoutCenter.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.0
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 

package/es/components/content/Layout/LayoutContainer.js

@@ -1,13 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.0
+ * @cube-dev/ui-kit v0.98.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo, } from 'react';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, mergeStyles, tasty, } from '../../../tasty';
+import { useCombinedRefs } from '../../../utils/react';
 import { LayoutContextReset } from './LayoutContext';
 const ContainerElement = tasty({
     as: 'div',
@@ -24,6 +25,10 @@ const ContainerElement = tasty({
         padding: '$content-padding',
         placeSelf: 'stretch',
         width: '100%',
+        border: {
+            '': 0,
+            '!:last-child': '($layout-border-size, 1bw) solid #border bottom',
+        },
         Inner: {
             $: '>',
             placeSelf: 'center',
@@ -31,17 +36,19 @@ const ContainerElement = tasty({
             flow: 'column',
             width: '40x 100% 120x',
             boxSizing: 'border-box',
+            '$layout-border-size': '0',
         },
     },
 });
 function LayoutContainer(props, ref) {
-    const { children, styles, innerStyles: innerStylesProp, ...otherProps } = props;
+    const { children, styles, innerStyles: innerStylesProp, innerRef: innerRefProp, innerProps, ...otherProps } = props;
     const innerStyles = extractStyles(otherProps, CONTAINER_STYLES, innerStylesProp);
     const hasInnerStyles = Object.keys(innerStyles).length > 0;
     const finalStyles = useMemo(() => {
         return mergeStyles(styles, hasInnerStyles ? { Inner: innerStyles } : null);
     }, [styles, hasInnerStyles, innerStyles]);
-    return (_jsx(ContainerElement, { ref: ref, ...filterBaseProps(otherProps, { eventProps: true }), styles: finalStyles, children: _jsx("div", { "data-element": "Inner", children: _jsx(LayoutContextReset, { children: children }) }) }));
+    const combinedInnerRef = useCombinedRefs(innerRefProp);
+    return (_jsx(ContainerElement, { ref: ref, ...filterBaseProps(otherProps, { eventProps: true }), styles: finalStyles, children: _jsx("div", { ref: combinedInnerRef, "data-element": "Inner", ...innerProps, children: _jsx(LayoutContextReset, { children: children }) }) }));
 }
 const _LayoutContainer = forwardRef(LayoutContainer);
 _LayoutContainer.displayName = 'Layout.Container';