@cube-dev/ui-kit 0.0.0-canary-40524e2 → 0.0.0-canary-49dca2f

package/es/components/content/Divider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * Released under the MIT license.
  */
 
@@ -54,6 +54,7 @@ const ACTIONS_EVENT_HANDLERS = {
     },
 };
 const ItemElement = tasty({
+    as: 'div',
     styles: {
         display: 'inline-grid',
         flow: 'column dense',
@@ -61,19 +62,7 @@ const ItemElement = tasty({
         outline: 0,
         placeItems: 'stretch',
         placeContent: 'stretch',
-        gridColumns: {
-            '': '1sf max-content max-content',
-            ':has(> Actions)': '1sf max-content max-content max-content',
-            ':has(> Icon) ^ :has(> Prefix)': 'max-content 1sf max-content max-content',
-            '(:has(> Icon) ^ :has(> Prefix)) & :has(> Actions)': 'max-content 1sf max-content max-content max-content',
-            ':has(> Icon) & :has(> Prefix)': 'max-content max-content 1sf max-content max-content',
-            ':has(> Icon) & :has(> Prefix) & :has(> Actions)': 'max-content max-content 1sf max-content max-content max-content',
-            '(:has(> Icon) ^ :has(> RightIcon)) & !:has(> Description) & !:has(> Prefix) & !:has(> Suffix) & !:has(> Label)': 'max-content',
-        },
-        gridRows: {
-            '': 'auto auto',
-            'has-description-block': 'auto auto auto',
-        },
+        gridColumns: '($left-columns, ) ($label-column, ) ($right-columns, )',
         // Prevent items from shrinking inside vertical flex layouts (Menu, ListBox, etc)
         flexShrink: {
             '': 'initial',
@@ -84,9 +73,9 @@ const ItemElement = tasty({
         margin: 0,
         radius: {
             '': true,
-            'shape-card': '1cr',
-            'shape-button': true,
-            'shape-sharp': '0',
+            'shape=card': '1cr',
+            'shape=button': true,
+            'shape=sharp': '0',
         },
         height: {
             '': 'min $size',
@@ -138,6 +127,21 @@ const ItemElement = tasty({
             'size=xlarge': '$size-xl',
             'size=inline': '1lh',
         },
+        '$label-column': {
+            '': '1sf',
+            '!has-label': '',
+        },
+        '$left-columns': {
+            '': '',
+            'has-icon ^ has-prefix': 'max-content',
+            'has-icon & has-prefix': 'max-content max-content',
+        },
+        '$right-columns': {
+            '': '',
+            'has-right-icon ^ has-suffix ^ has-actions': 'max-content',
+            '(has-right-icon & has-suffix) | (has-right-icon & has-actions) | (has-suffix & has-actions)': 'max-content max-content',
+            'has-right-icon & has-suffix & has-actions': 'max-content max-content max-content max-content',
+        },
         '$inline-padding': {
             '': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',
             'size=inline': '.25x',
@@ -149,6 +153,35 @@ const ItemElement = tasty({
         },
         '$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',
+        },
+        '$label-padding-bottom': {
+            '': '$block-padding',
+            'has-description & !has-description-block': '0',
+        },
+        '$description-padding-left': {
+            '': '$inline-padding',
+            'has-start-content': 0,
+            'has-description-block': '($inline-padding - $inline-compensation + 1bw)',
+            'has-description-block & !has-start-content': '$inline-padding',
+        },
+        '$description-padding-right': {
+            '': '$inline-padding',
+            'has-end-content': 0,
+            'has-description-block': '($inline-padding - $inline-compensation + 1bw)',
+            'has-description-block & !has-end-content': '$inline-padding',
+        },
+        '$description-padding-bottom': {
+            '': '$block-padding',
+            'has-description-block': '$bottom-padding',
+        },
+        '$bottom-padding': 'max($block-padding, (($size - 4x) / 2) + $block-padding)',
         Icon: DEFAULT_ICON_STYLES,
         RightIcon: DEFAULT_ICON_STYLES,
         Label: {
@@ -161,21 +194,12 @@ const ItemElement = tasty({
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             maxWidth: '100%',
-            padding: {
-                '': '$block-padding $inline-padding',
-                ':has(> Icon) | :has(> Prefix)': '$block-padding $inline-padding $block-padding 0',
-                ':has(> RightIcon) | :has(> Suffix) | :has(> Actions)': '$block-padding 0 $block-padding $inline-padding',
-                '(:has(> Icon) | :has(> Prefix)) & (:has(> RightIcon) | :has(> Suffix) | :has(> Actions))': '$block-padding 0',
-                ':has(> Description) & !has-description-block': '$block-padding $inline-padding 0 $inline-padding',
-                ':has(> Description) & !has-description-block & (:has(> Icon) | :has(> Prefix))': '$block-padding $inline-padding 0 0',
-                ':has(> Description) & !has-description-block & (:has(> RightIcon) | :has(> Suffix) | :has(> Actions))': '$block-padding 0 0 $inline-padding',
-                ':has(> Description) & !has-description-block & (:has(> Icon) | :has(> Prefix)) & (:has(> RightIcon) | :has(> Suffix) | :has(> Actions))': '$block-padding 0 0 0',
-            },
             gridRow: {
                 '': 'span 2',
-                ':has(> Description)': 'span 1',
+                'has-description': 'span 1',
                 'has-description-block': 'span 2',
             },
+            padding: '$block-padding $label-padding-right $label-padding-bottom $label-padding-left',
         },
         Description: {
             $: '>',
@@ -195,30 +219,20 @@ const ItemElement = tasty({
                 '': 'span 1',
                 'has-description-block': '1 / -1',
             },
-            padding: {
-                '': '0 $inline-padding $block-padding $inline-padding',
-                ':has(> Icon) | :has(> Prefix)': '0 $inline-padding $block-padding 0',
-                ':has(> RightIcon) | :has(> Suffix)': '0 0 $block-padding $inline-padding',
-                '(:has(> Icon) | :has(> Prefix)) & (:has(> RightIcon) | :has(> Suffix))': '0 0 $block-padding 0',
-                'has-description-block': '0 ($inline-padding - $inline-compensation + 1bw) $bottom-padding ($inline-padding - $inline-compensation + 1bw)',
-                'has-description-block & !:has(> Icon)': '0 ($inline-padding - $inline-compensation + 1bw) $bottom-padding $inline-padding',
-                'has-description-block & !:has(> RightIcon)': '0 $inline-padding $bottom-padding ($inline-padding - $inline-compensation + 1bw)',
-                'has-description-block & !:has(> RightIcon) & !:has(> Icon)': '0 $inline-padding $bottom-padding $inline-padding',
-            },
-            '$bottom-padding': 'max($block-padding, (($size - 4x) / 2) + $block-padding)',
+            padding: '0 $description-padding-right $description-padding-bottom $description-padding-left',
         },
         Prefix: {
             ...ADDITION_STYLES,
             padding: {
                 '': '$inline-padding left',
-                ':has(> Icon)': 0,
+                'has-icon': 0,
             },
         },
         Suffix: {
             ...ADDITION_STYLES,
             padding: {
                 '': '$inline-padding right',
-                ':has(> RightIcon)': 0,
+                'has-right-icon': 0,
             },
         },
         Actions: {
@@ -462,22 +476,50 @@ const Item = (props, ref) => {
         preventDefault: true,
         enableOnFormTags: true,
     }, [hotkeys, finalIsDisabled]);
-    mods = {
-        'has-description-block': showDescriptions && descriptionPlacement === 'block',
-        'has-actions-content': !!(actions && actions !== true),
-        checkbox: hasCheckbox,
-        disabled: finalIsDisabled,
-        selected: isSelected === true,
-        loading: isLoading,
-        card: isCard === true,
-        button: isButton === true,
-        [`shape-${shape}`]: true,
-        // Use value mods for data-* attributes
-        size: typeof size === 'number' ? undefined : size,
+    mods = useMemo(() => {
+        return {
+            'has-icon': !!finalIcon,
+            'has-start-content': !!(finalIcon || finalPrefix),
+            'has-end-content': !!(finalRightIcon || finalSuffix || actions),
+            'has-right-icon': !!finalRightIcon,
+            'has-label': !!(children || labelProps),
+            'has-prefix': !!finalPrefix,
+            'has-suffix': !!finalSuffix,
+            'has-description': showDescriptions,
+            'has-description-block': showDescriptions && descriptionPlacement === 'block',
+            'has-actions': !!actions,
+            'has-actions-content': !!(actions && actions !== true),
+            checkbox: hasCheckbox,
+            disabled: finalIsDisabled,
+            selected: isSelected === true,
+            loading: isLoading,
+            card: isCard === true,
+            button: isButton === true,
+            ...(typeof size === 'number' ? {} : { size }),
+            type,
+            theme,
+            shape,
+            ...mods,
+        };
+    }, [
+        finalIcon,
+        finalRightIcon,
+        finalPrefix,
+        finalSuffix,
+        showDescriptions,
+        descriptionPlacement,
+        hasCheckbox,
+        isSelected,
+        isLoading,
+        isCard,
+        isButton,
+        shape,
+        actions,
+        size,
         type,
         theme,
-        ...mods,
-    };
+        mods,
+    ]);
     const { labelProps: finalLabelProps, labelRef, renderWithTooltip, } = useAutoTooltip({
         tooltip,
         children,

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-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * Released under the MIT license.
  */
 
@@ -55,7 +55,7 @@ export const ItemBadge = forwardRef(function ItemBadge(allProps, ref) {
         checkbox: hasCheckbox,
         selected: isSelected,
         loading: isLoading,
-        'with-label': !!children,
+        'has-label': !!children,
         context: !!contextType,
         ...mods,
     }), [hasCheckbox, isSelected, isLoading, children, contextType, mods]);

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-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * 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.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * Released under the MIT license.
  */
 

package/es/components/content/Tag/Tag.js

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

package/es/components/content/Text.js

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

package/es/components/content/Title.js

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

package/es/components/fields/Checkbox/Checkbox.js

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

package/es/components/fields/Checkbox/CheckboxGroup.js

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

package/es/components/fields/Checkbox/context.js

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

package/es/components/fields/Checkbox/index.js

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

package/es/components/fields/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40524e2
+ * @cube-dev/ui-kit v0.0.0-canary-49dca2f
  * Released under the MIT license.
  */
 
@@ -59,12 +59,13 @@ const ComboBoxOverlayElement = tasty({
             '': false,
             hidden: true,
         },
+        boxSizing: 'border-box',
         transition: 'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',
         translate: {
             '': '0 0',
             'open & [data-placement="top"]': '0 0',
             '!open & [data-placement="top"]': '0 1x',
-            'open & ([data-placement="bottom"] | ![data-placement]': '0 0',
+            'open & ([data-placement="bottom"] | ![data-placement])': '0 0',
             '!open & ([data-placement="bottom"] | ![data-placement])': '0 -1x',
         },
         transformOrigin: {

package/es/components/fields/ComboBox/index.js

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

package/es/components/fields/DatePicker/DateInput.js

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

package/es/components/fields/DatePicker/DateInputBase.js

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

package/es/components/fields/DatePicker/DatePicker.js

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

package/es/components/fields/DatePicker/DatePickerButton.js

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

package/es/components/fields/DatePicker/DatePickerElement.js

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

package/es/components/fields/DatePicker/DatePickerInput.js

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

package/es/components/fields/DatePicker/DatePickerSegment.js

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

package/es/components/fields/DatePicker/DateRangePicker.js

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

package/es/components/fields/DatePicker/DateRangeSeparatedPicker.js

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

package/es/components/fields/DatePicker/TimeInput.js

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

package/es/components/fields/DatePicker/index.js

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

package/es/components/fields/DatePicker/intl.js

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

package/es/components/fields/DatePicker/parseDate.js

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

package/es/components/fields/DatePicker/props.js

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