@cube-dev/ui-kit 0.85.2 → 0.86.0

package/es/components/actions/Menu/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
@@ -78,7 +78,7 @@ export const StyledHeader = tasty(Space, {
         placeContent: 'space-between',
         placeItems: 'center',
         whiteSpace: 'nowrap',
-        padding: '.5x $inline-padding',
+        padding: '.5x 1.5x',
         height: 'min $size',
         boxSizing: 'border-box',
         border: 'bottom',
@@ -89,9 +89,6 @@ export const StyledHeader = tasty(Space, {
             '[data-size="medium"]': '$size-md',
             '[data-size="large"]': '$size-lg',
         },
-        '$inline-padding': 'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation))',
-        '$inline-compensation': '1x',
-        '$min-inline-padding': '1x',
     },
 });
 export const StyledFooter = tasty(Space, {
@@ -207,8 +204,8 @@ export const StyledSectionHeading = tasty(Space, {
         placeContent: 'center space-between',
         align: 'start',
         padding: {
-            '': '.5x $inline-padding',
-            prefix: '0 $inline-padding 0 .5x',
+            '': '.5x .75x',
+            prefix: '0 .75x 0 .5x',
         },
         $size: {
             '': '$size-md',
@@ -216,9 +213,6 @@ export const StyledSectionHeading = tasty(Space, {
             '[data-size="medium"]': '$size-md',
             '[data-size="large"]': '$size-lg',
         },
-        '$inline-padding': 'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation - 1bw))',
-        '$inline-compensation': '.5x',
-        '$min-inline-padding': '1x',
     },
 });
 

package/es/components/actions/index.js

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

package/es/components/actions/use-action.js

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

package/es/components/actions/use-anchored-menu.js

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

package/es/components/actions/use-context-menu.js

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

package/es/components/content/ActiveZone/ActiveZone.js

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

package/es/components/content/Alert/Alert.js

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

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

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

package/es/components/content/Alert/types.js

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

package/es/components/content/Alert/use-alert.js

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

package/es/components/content/Avatar/Avatar.js

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

package/es/components/content/Badge/Badge.js

@@ -1,47 +1,46 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import THEMES from '../../../data/themes';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
-const BadgeElement = tasty({
+import { tasty } from '../../../tasty';
+import { Item } from '../Item';
+const BadgeElement = tasty(Item, {
     qa: 'Badge',
-    role: 'region',
+    role: 'status',
     styles: {
-        display: 'inline-flex',
-        placeContent: 'center',
-        placeItems: 'center',
-        padding: {
-            '': '0',
-            long: '0 .5x',
-        },
         radius: 'round',
-        preset: 'tag',
-        width: 'min 16px',
-        height: '16px 16px',
-        textAlign: 'center',
         color: '#white',
         fill: {
             '': '#purple',
             ...Object.keys(THEMES).reduce((map, type) => {
-                map[`[data-type="${type}"]`] = THEMES[type].color;
+                map[`[data-theme="${type}"]`] =
+                    type === 'special' ? THEMES[type].fill : THEMES[type].color;
                 return map;
             }, {}),
         },
+        '$inline-padding': {
+            '': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',
+            '[data-size="inline"]': '.5x',
+        },
+        Label: {
+            textAlign: 'center',
+            placeSelf: 'center',
+        },
     },
 });
-export const Badge = forwardRef(function Badge(allProps, ref) {
-    let { type, children, mods, ...props } = allProps;
-    const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsx(BadgeElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, "data-type": type, mods: {
-            long: typeof children !== 'string' || children.length > 1,
-            ...mods,
-        }, styles: styles, children: children }));
-});
+function Badge(allProps, ref) {
+    let { type, theme = 'special', children, size = 'inline', ...props } = allProps;
+    const badgeTheme = theme ?? type;
+    return (_jsx(BadgeElement, { ref: ref, size: size, "data-theme": badgeTheme, ...props, children: children }));
+}
+const _Badge = forwardRef(Badge);
+_Badge.displayName = 'Badge';
+export { _Badge as Badge };
 
         

package/es/components/content/Card/Card.js

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

package/es/components/content/Content.js

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

package/es/components/content/CopyPasteBlock/CopyPasteBlock.js

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

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

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

package/es/components/content/CopySnippet/CopySnippet.js

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

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

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

package/es/components/content/Divider.js

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

package/es/components/content/Footer.js

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

package/es/components/content/Header.js

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

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

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

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

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

package/es/components/content/{ItemBase/ItemBase.js → Item/Item.js}

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
@@ -19,6 +19,7 @@ import { TooltipProvider, } from '../../overlays/Tooltip/TooltipProvider';
 import { HotKeys } from '../HotKeys';
 import { ItemBadge } from '../ItemBadge';
 const DEFAULT_ICON_STYLES = {
+    $: '>',
     display: 'grid',
     placeItems: 'center',
     placeContent: 'stretch',
@@ -33,6 +34,7 @@ const DEFAULT_ICON_STYLES = {
     gridRow: 'span 2',
 };
 const ADDITION_STYLES = {
+    $: '>',
     display: 'grid',
     flow: 'column',
     placeItems: 'center',
@@ -51,7 +53,7 @@ const ACTIONS_EVENT_HANDLERS = {
         }
     },
 };
-const ItemBaseElement = tasty({
+const ItemElement = tasty({
     styles: {
         display: 'inline-grid',
         flow: 'column dense',
@@ -72,6 +74,7 @@ const ItemBaseElement = tasty({
             '': 'auto auto',
             'with-description-block': 'auto auto auto',
         },
+        // Prevent items from shrinking inside vertical flex layouts (Menu, ListBox, etc)
         flexShrink: 0,
         position: 'relative',
         padding: 0,
@@ -82,7 +85,11 @@ const ItemBaseElement = tasty({
         },
         height: {
             '': 'min $size',
-            '[data-size="inline"]': 'initial',
+            '[data-size="inline"]': '(1lh + 2bw)',
+        },
+        width: {
+            '': 'min $size',
+            '[data-size="inline"]': 'min (1lh + 2bw)',
         },
         border: '#clear',
         fill: {
@@ -103,6 +110,7 @@ const ItemBaseElement = tasty({
             '': 't3m',
             '[data-size="xsmall"]': 't4',
             '[data-size="xlarge"]': 't2m',
+            '[data-size="inline"]': 'tag',
         },
         boxSizing: 'border-box',
         textDecoration: 'none',
@@ -121,11 +129,11 @@ const ItemBaseElement = tasty({
             '[data-size="medium"]': '$size-md',
             '[data-size="large"]': '$size-lg',
             '[data-size="xlarge"]': '$size-xl',
-            '[data-size="inline"]': '',
+            '[data-size="inline"]': '1lh',
         },
         '$inline-padding': {
             '': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',
-            '[data-size="inline"]': 0,
+            '[data-size="inline"]': '.25x',
         },
         '$block-padding': {
             '': '.5x',
@@ -137,6 +145,7 @@ const ItemBaseElement = tasty({
         Icon: DEFAULT_ICON_STYLES,
         RightIcon: DEFAULT_ICON_STYLES,
         Label: {
+            $: '>',
             display: 'block',
             placeSelf: 'center start',
             boxSizing: 'border-box',
@@ -162,6 +171,7 @@ const ItemBaseElement = tasty({
             },
         },
         Description: {
+            $: '>',
             preset: 't4',
             color: 'inherit',
             opacity: 0.75,
@@ -205,6 +215,7 @@ const ItemBaseElement = tasty({
             },
         },
         Actions: {
+            $: '>',
             display: 'flex',
             gap: '1bw',
             placeItems: 'center',
@@ -215,12 +226,15 @@ const ItemBaseElement = tasty({
             height: 'min ($size - 2bw)',
             gridRow: 'span 2',
             width: {
-                '': 'var(--actions-width, 0px)',
+                '': '($actions-width, 0px)',
                 'with-actions-content': 'calc-size(max-content, size)',
             },
             transition: 'width $transition ease-out',
             interpolateSize: 'allow-keywords',
-            '$side-padding': 'max(min(.5x, (($size - 3x + 2bw) / 2)), 1bw)',
+            // Size for the action buttons
+            '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (4x - 2bw))',
+            // Side padding for the button
+            '$side-padding': '(($size - $action-size - 2bw) / 2)',
         },
     },
     variants: {
@@ -398,7 +412,7 @@ export function useAutoTooltip({ tooltip, children, labelProps, isDynamicLabel =
         renderWithTooltip,
     };
 }
-const ItemBase = (props, ref) => {
+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, defaultTooltipPlacement = 'top', ...rest } = props;
     // Loading state makes the component disabled
     const finalIsDisabled = isDisabled === true || (isLoading && isDisabled !== false);
@@ -499,7 +513,7 @@ const ItemBase = (props, ref) => {
         const finalStyle = typeof size === 'number'
             ? { ...style, '--size': `${size}px` }
             : style;
-        return (_jsxs(ItemBaseElement, { ref: handleRef, variant: theme && type ? `${theme}.${type}` : undefined, disabled: finalIsDisabled, "data-size": typeof size === 'number' ? undefined : size, "data-type": type, "data-theme": theme, "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: children })) : null, showDescriptions ? (_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, children: actions })) : null }))] }));
+        return (_jsxs(ItemElement, { ref: handleRef, variant: theme && type ? `${theme}.${type}` : undefined, disabled: finalIsDisabled, "data-size": typeof size === 'number' ? undefined : size, "data-type": type, "data-theme": theme, "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: children })) : null, showDescriptions ? (_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, children: actions })) : null }))] }));
     }, [
         ref,
         theme,
@@ -527,10 +541,14 @@ const ItemBase = (props, ref) => {
     ]);
     return renderWithTooltip(renderItemElement, defaultTooltipPlacement);
 };
-const _ItemBase = Object.assign(forwardRef(ItemBase), {
+const _Item = Object.assign(forwardRef(Item), {
     Action: ItemAction,
     Badge: ItemBadge,
 });
-export { _ItemBase as ItemBase };
+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/{ItemBase → Item}/index.js

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.86.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.85.2
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 

package/es/components/content/List/SectionHeading.js

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

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

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

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/PrismCode/prismSetup.js

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

package/es/components/content/PrismDiffCode/PrismDiffCode.js

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

package/es/components/content/Result/Result.js

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

package/es/components/content/Skeleton/Skeleton.js

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