@cube-dev/ui-kit 0.0.0-canary-1e090a8 → 0.0.0-canary-2397690

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

@@ -1,24 +1,33 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1e090a8
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * 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_ALERT_STYLES, DANGER_CLEAR_STYLES, DANGER_ITEM_STYLES, DANGER_LINK_STYLES, DANGER_NEUTRAL_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DANGER_SECONDARY_STYLES, DEFAULT_ALERT_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_ITEM_STYLES, DEFAULT_LINK_STYLES, DEFAULT_NEUTRAL_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, DEFAULT_SECONDARY_STYLES, NOTE_ALERT_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_ITEM_STYLES, SPECIAL_LINK_STYLES, SPECIAL_NEUTRAL_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SPECIAL_SECONDARY_STYLES, SUCCESS_ALERT_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',
+];
 const DEFAULT_ICON_STYLES = {
     $: '>',
     display: 'grid',
@@ -72,7 +81,10 @@ const ItemElement = tasty({
             'menuitem | listboxitem': 0,
         },
         position: 'relative',
-        padding: 0,
+        padding: {
+            '': 0,
+            'type=alert': '.5x',
+        },
         margin: 0,
         radius: {
             '': true,
@@ -106,11 +118,14 @@ const ItemElement = tasty({
         },
         preset: {
             '': 't3',
-            button: 't3m',
+            '!type=item': 't3m',
             'size=xsmall': 't4',
             'size=xlarge': 't2',
-            'size=xlarge & button': 't2m',
+            'size=xlarge & !type=item': 't2m',
             'size=inline': 'tag',
+            '(type=title | type=alert) & (size=xsmall | size=small | size=medium)': 'h6',
+            '(type=title | type=alert) & size=large': 'h5',
+            '(type=title | type=alert) & size=xlarge': 'h4',
         },
         boxSizing: 'border-box',
         textDecoration: 'none',
@@ -118,7 +133,7 @@ const ItemElement = tasty({
         reset: 'button',
         outlineOffset: 1,
         cursor: {
-            '': 'default',
+            '': 'inherit',
             ':is(a)': 'pointer',
             ':is(button) | listboxitem | menuitem': '$pointer',
             disabled: 'not-allowed',
@@ -130,16 +145,11 @@ 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',
         },
+        '$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)',
@@ -190,7 +200,10 @@ const ItemElement = tasty({
         Description: {
             $: '>',
             gridArea: 'description',
-            preset: 't4',
+            preset: {
+                '': 't4',
+                'type=alert | type=title': 't3',
+            },
             color: 'inherit',
             opacity: 0.75,
             overflow: 'hidden',
@@ -253,6 +266,7 @@ const ItemElement = tasty({
         'default.clear': DEFAULT_CLEAR_STYLES,
         'default.link': DEFAULT_LINK_STYLES,
         'default.item': DEFAULT_ITEM_STYLES,
+        'default.alert': DEFAULT_ALERT_STYLES,
         // Danger theme
         'danger.primary': DANGER_PRIMARY_STYLES,
         'danger.secondary': DANGER_SECONDARY_STYLES,
@@ -261,6 +275,7 @@ const ItemElement = tasty({
         'danger.clear': DANGER_CLEAR_STYLES,
         'danger.link': DANGER_LINK_STYLES,
         'danger.item': DANGER_ITEM_STYLES,
+        'danger.alert': DANGER_ALERT_STYLES,
         // Success theme
         'success.primary': SUCCESS_PRIMARY_STYLES,
         'success.secondary': SUCCESS_SECONDARY_STYLES,
@@ -269,6 +284,7 @@ const ItemElement = tasty({
         'success.clear': SUCCESS_CLEAR_STYLES,
         'success.link': SUCCESS_LINK_STYLES,
         'success.item': SUCCESS_ITEM_STYLES,
+        'success.alert': SUCCESS_ALERT_STYLES,
         // Special theme
         'special.primary': SPECIAL_PRIMARY_STYLES,
         'special.secondary': SPECIAL_SECONDARY_STYLES,
@@ -277,32 +293,135 @@ const ItemElement = tasty({
         'special.clear': SPECIAL_CLEAR_STYLES,
         'special.link': SPECIAL_LINK_STYLES,
         'special.item': SPECIAL_ITEM_STYLES,
+        // Note theme (alert type only)
+        'note.alert': NOTE_ALERT_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, isCard = false, actions, showActionsOnHover = false, disableActionsFocus = false, shape, defaultTooltipPlacement = 'top', highlight, highlightCaseSensitive = false, highlightStyles, ...rest } = props;
+    // Set default descriptionPlacement based on type
+    const finalDescriptionPlacement = descriptionPlacement ??
+        (type === 'alert' || type === 'title' ? 'block' : 'inline');
+    // Set default shape based on type
+    const finalShape = shape ?? (type === 'alert' ? '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 ALERT_THEMES = ['default', 'success', 'danger', 'note'];
+    const TITLE_THEMES = ['default'];
+    const isInvalidCombination = (type === 'title' && !TITLE_THEMES.includes(theme)) ||
+        (type === 'alert' && !ALERT_THEMES.includes(theme)) ||
+        (!['title', 'alert'].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 === 'title'
+                    ? ' The "title" type only supports theme: default.'
+                    : type === 'alert'
+                        ? ' The "alert" 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,
+        card: isCard === true,
+        ...(!isCustomSize && { size: size }),
+        type,
+        theme,
+        shape: finalShape,
+        ...mods,
+    }), [
+        finalIsDisabled,
+        isSelected,
+        isLoading,
+        isCard,
+        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,12 +442,13 @@ 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,
+            ...baseMods,
+            'has-icon': hasIconSlot,
+            'has-start-content': !!(hasIconSlot || finalPrefix),
+            'has-end-content': !!(hasRightIconSlot || finalSuffix || actions),
+            'has-right-icon': hasRightIconSlot,
             'has-label': !!(children || labelProps),
             'has-prefix': !!finalPrefix,
             'has-suffix': !!finalSuffix,
@@ -337,37 +457,21 @@ 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,
+        children,
+        labelProps,
     ]);
     const { labelProps: finalLabelProps, labelRef, renderWithTooltip, } = useAutoTooltip({
         tooltip,
@@ -398,11 +502,9 @@ 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 === 'title' ? 'default' : theme}.${type === 'title' ? '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 ? (_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 }), 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.0.0-canary-1e090a8
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * 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.0.0-canary-1e090a8
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * 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.0.0-canary-1e090a8
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * 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.0.0-canary-1e090a8
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * 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.0.0-canary-1e090a8
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * 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({
@@ -39,6 +40,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)
@@ -61,7 +64,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 = [];
@@ -80,12 +84,13 @@ function LayoutInner(props) {
     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), check if user overrides it
+    // Default flow is 'column' (vertical), only horizontal when explicitly set to 'row'
     const isVertical = useMemo(() => {
-        const providedFlow = styles?.Inner?.flow;
-        const flowValue = typeof providedFlow === 'string' ? providedFlow : 'column';
-        return flowValue.startsWith('column');
-    }, [styles?.Inner]);
+        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
@@ -210,7 +215,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.0.0-canary-1e090a8
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * 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.0.0-canary-1e090a8
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * 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.0.0-canary-1e090a8
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * 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',
@@ -26,7 +27,7 @@ const ContainerElement = tasty({
         width: '100%',
         border: {
             '': 0,
-            '!:last-child': '$layout-border-size solid #border bottom',
+            '!:last-child': '($layout-border-size, 1bw) solid #border bottom',
         },
         Inner: {
             $: '>',
@@ -35,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';

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

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1e090a8
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useRef } from 'react';
+import { forwardRef, useMemo, useRef, } from 'react';
 import { useHover } from 'react-aria';
 import { extractStyles, filterBaseProps, INNER_STYLES, mergeStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useCombinedRefs } from '../../../utils/react';
@@ -30,7 +30,7 @@ const ContentElement = tasty({
         boxSizing: 'content-box',
         border: {
             '': 0,
-            '!:last-child': '$layout-border-size solid #border bottom',
+            '!:last-child': '($layout-border-size, 1bw) solid #border bottom',
         },
         Inner: {
             $: '>',
@@ -46,6 +46,7 @@ const ContentElement = tasty({
                 '': 'thin',
                 'scrollbar=tiny | scrollbar=none': 'none',
             },
+            '$layout-border-size': '0',
         },
         // Custom scrollbar handles (when scrollbar="tiny")
         ScrollbarV: {
@@ -58,7 +59,7 @@ const ContentElement = tasty({
             fill: '#dark.35',
             opacity: {
                 '': 0,
-                '(hovered | focused | scrolling) & scrollbar=tiny': 1,
+                '(focused | scrolling) & scrollbar=tiny': 1,
             },
             transition: 'opacity 0.15s',
             pointerEvents: 'none',
@@ -73,7 +74,7 @@ const ContentElement = tasty({
             fill: '#dark.35',
             opacity: {
                 '': 0,
-                '(hovered | focused | scrolling) & scrollbar=tiny': 1,
+                '(focused | scrolling) & scrollbar=tiny': 1,
             },
             transition: 'opacity 0.15s',
             pointerEvents: 'none',
@@ -81,14 +82,15 @@ const ContentElement = tasty({
     },
 });
 function LayoutContent(props, ref) {
-    const { children, scrollbar = 'thin', styles, mods: externalMods, ...otherProps } = props;
+    const { children, scrollbar = 'thin', styles, mods: externalMods, innerRef: innerRefProp, innerProps, ...otherProps } = props;
     const outerStyles = extractStyles(otherProps, OUTER_STYLES);
     const innerStyles = extractStyles(otherProps, INNER_STYLES);
-    const innerRef = useRef(null);
+    const internalInnerRef = useRef(null);
+    const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);
     const combinedRef = useCombinedRefs(ref);
     const isTinyScrollbar = scrollbar === 'tiny';
     const { hoverProps, isHovered } = useHover({});
-    const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX, isScrolling, } = useTinyScrollbar(innerRef, isTinyScrollbar);
+    const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX, isScrolling, } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
     const scrollbarStyle = useMemo(() => {
         if (!isTinyScrollbar)
             return {};
@@ -107,7 +109,7 @@ function LayoutContent(props, ref) {
     const finalStyles = useMemo(() => {
         return mergeStyles(styles, outerStyles, innerStyles ? { Inner: innerStyles } : null);
     }, [styles, outerStyles, innerStyles]);
-    return (_jsxs(ContentElement, { ref: combinedRef, ...filterBaseProps(otherProps, { eventProps: true }), ...hoverProps, mods: mods, styles: finalStyles, style: scrollbarStyle, children: [_jsx("div", { ref: innerRef, "data-element": "Inner", children: _jsx(LayoutContextReset, { children: children }) }), isTinyScrollbar && hasOverflowY && _jsx("div", { "data-element": "ScrollbarV" }), isTinyScrollbar && hasOverflowX && _jsx("div", { "data-element": "ScrollbarH" })] }));
+    return (_jsxs(ContentElement, { ref: combinedRef, ...filterBaseProps(otherProps, { eventProps: true }), ...hoverProps, mods: mods, styles: finalStyles, style: scrollbarStyle, children: [_jsx("div", { ref: combinedInnerRef, "data-element": "Inner", ...innerProps, children: _jsx(LayoutContextReset, { children: children }) }), isTinyScrollbar && hasOverflowY && _jsx("div", { "data-element": "ScrollbarV" }), isTinyScrollbar && hasOverflowX && _jsx("div", { "data-element": "ScrollbarH" })] }));
 }
 const _LayoutContent = forwardRef(LayoutContent);
 _LayoutContent.displayName = 'Layout.Content';

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1e090a8
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 
@@ -20,6 +20,10 @@ const FooterElement = tasty(LayoutContent, {
         flexShrink: 0,
         flexGrow: 0,
         whiteSpace: 'nowrap',
+        border: {
+            '': 0,
+            '!:last-child': '($layout-border-size, 1bw) solid #border bottom',
+        },
         Inner: {
             display: 'flex',
             flow: {