@cube-dev/ui-kit 0.60.5 → 0.61.0

package/es/tasty/styles/marginInline.js

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

package/es/tasty/styles/outline.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.0
  * Released under the MIT license.
  */
 
@@ -28,12 +28,18 @@ export function outlineStyle({ outline }) {
         return;
     if (outline === true)
         outline = '1ow';
-    const { values, mods, color } = parseStyle(String(outline));
+    const { values, mods, colors } = parseStyle(String(outline));
     const typeMods = filterMods(mods, BORDER_STYLES);
     const value = values[0] || 'var(--outline-width)';
     const type = typeMods[0] || 'solid';
-    const outlineColor = color || 'var(--outline-color)';
+    const outlineColor = colors?.[0] || 'var(--outline-color)';
     const styleValue = [value, type, outlineColor].join(' ');
+    if (values.length > 1) {
+        return {
+            outline: styleValue,
+            'outline-offset': values[1],
+        };
+    }
     return { outline: styleValue };
 }
 outlineStyle.__lookupStyles = ['outline'];

package/es/tasty/styles/padding.js

@@ -1,12 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.0
  * Released under the MIT license.
  */
 
 import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';
 export function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft, }) {
+    if (Array.isArray(padding)) {
+        return {
+            'padding-top': padding[0],
+            'padding-right': padding[1] || padding[0],
+            'padding-bottom': padding[2] || padding[0],
+            'padding-left': padding[3] || padding[1] || padding[0],
+        };
+    }
     if (typeof padding === 'number') {
         padding = `${padding}px`;
     }

package/es/tasty/styles/paddingBlock.js

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

package/es/tasty/styles/paddingInline.js

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

package/es/tasty/styles/place.js

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.61.0
+ * Released under the MIT license.
+ */
+
+export function placeStyle({ place }) {
+    if (typeof place !== 'string')
+        return;
+    if (!place)
+        return;
+    return {
+        'place-items': place,
+        'place-content': place,
+    };
+}
+placeStyle.__lookupStyles = ['place'];
+
+        

package/es/tasty/styles/predefined.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.0
  * Released under the MIT license.
  */
 
@@ -31,6 +31,7 @@ import { paddingInlineStyle } from './paddingInline';
 import { presetStyle } from './preset';
 import { radiusStyle } from './radius';
 import { resetStyle } from './reset';
+import { scrollbarStyle } from './scrollbar';
 import { shadowStyle } from './shadow';
 import { styledScrollbarStyle } from './styledScrollbar';
 import { transitionStyle } from './transition';
@@ -95,6 +96,7 @@ export function predefine() {
     defineStyleAlias('letterSpacing', 'letter-spacing', numberConverter);
     defineStyleAlias('textTransform');
     defineStyleAlias('fontFamily');
+    defineStyleAlias('overflow');
     defineStyleAlias('paddingTop', 'padding-top', numberConverter);
     defineStyleAlias('paddingRight', 'padding-right', numberConverter);
     defineStyleAlias('paddingBottom', 'padding-bottom', numberConverter);
@@ -153,7 +155,9 @@ export function predefine() {
         fontStyle,
         fontStyleStyle,
         groupRadiusAttr,
+        // DEPRECATED: `styledScrollbar` is deprecated, use `scrollbar` instead
         styledScrollbarStyle,
+        scrollbarStyle,
         fadeStyle,
         insetStyle,
     ]

package/es/tasty/styles/preset.js

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

package/es/tasty/styles/radius.js

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

package/es/tasty/styles/reset.js

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

package/es/tasty/styles/scrollbar.js

@@ -0,0 +1,96 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.61.0
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+export function scrollbarStyle({ scrollbar, overflow, }) {
+    // Check if scrollbar is defined
+    if (!scrollbar && scrollbar !== 0)
+        return;
+    // Support true as alias for thin
+    let value = scrollbar === true ? 'thin' : scrollbar;
+    const { mods, colors, values } = parseStyle(String(value));
+    const style = {};
+    style['scrollbar-color'] = 'var(--scrollbar-thumb-color) transparent';
+    // Modifiers
+    if (mods.includes('thin')) {
+        style['scrollbar-width'] = 'thin';
+    }
+    if (mods.includes('none')) {
+        style['scrollbar-width'] = 'none';
+        style['scrollbar-color'] = 'transparent transparent';
+    }
+    if (mods.includes('auto')) {
+        style['scrollbar-width'] = 'auto';
+    }
+    if (mods.includes('stable') || mods.includes('both-edges')) {
+        style['scrollbar-gutter'] = mods.includes('both-edges')
+            ? 'stable both-edges'
+            : 'stable';
+    }
+    // Custom size (all values are sizes)
+    const sizeValue = values[0];
+    if (sizeValue) {
+        style['&::-webkit-scrollbar'] = {
+            ...(style['&::-webkit-scrollbar'] || {}),
+            width: sizeValue,
+            height: sizeValue,
+        };
+    }
+    // Colors (support up to 3: thumb, track, corner)
+    if (colors && colors.length) {
+        const thumb = colors[0] || 'var(--scrollbar-thumb-color)';
+        const track = colors[1] || 'var(--scrollbar-track-color)';
+        const corner = colors[2] || track;
+        style['scrollbar-color'] = `${thumb} ${track}`;
+        if (!style['&::-webkit-scrollbar-corner']) {
+            style['&::-webkit-scrollbar-corner'] = {};
+        }
+        style['&::-webkit-scrollbar-corner'].background = corner;
+    }
+    // always: force scrollbars to show (requires overflow)
+    if (mods.includes('always')) {
+        style['overflow'] = overflow || 'scroll';
+        style['scrollbar-gutter'] = style['scrollbar-gutter'] || 'always';
+    }
+    // Legacy styled mod
+    if (mods.includes('styled')) {
+        const baseTransition = [
+            'background var(--transition)',
+            'border-radius var(--transition)',
+            'box-shadow var(--transition)',
+            'width var(--transition)',
+            'height var(--transition)',
+            'border var(--transition)',
+        ].join(', ');
+        style['scrollbar-width'] = style['scrollbar-width'] || 'thin';
+        style['scrollbar-color'] =
+            style['scrollbar-color'] ||
+                'var(--scrollbar-thumb-color) var(--scrollbar-track-color)';
+        style['&::-webkit-scrollbar'] = {
+            ...(style['&::-webkit-scrollbar'] || {}),
+            width: sizeValue || '8px',
+            height: sizeValue || '8px',
+            background: 'var(--scrollbar-track-color)',
+            transition: baseTransition,
+        };
+        style['&::-webkit-scrollbar-thumb'] = {
+            background: 'var(--scrollbar-thumb-color)',
+            borderRadius: '8px',
+            minHeight: '24px',
+            transition: baseTransition,
+        };
+        style['&::-webkit-scrollbar-corner'] = {
+            ...(style['&::-webkit-scrollbar-corner'] || {}),
+            background: 'var(--scrollbar-track-color)',
+            transition: baseTransition,
+        };
+    }
+    return style;
+}
+scrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];
+
+        

package/es/tasty/styles/shadow.js

@@ -1,15 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.0
  * Released under the MIT license.
  */
 
 import { parseStyle } from '../utils/styles';
 function toBoxShadow(shadow) {
-    const { values, mods, color } = parseStyle(shadow);
+    const { values, mods, colors } = parseStyle(shadow);
     const mod = mods[0] || '';
-    const shadowColor = color || 'var(--shadow-color)';
+    const shadowColor = (colors && colors[0]) || 'var(--shadow-color)';
     return [mod, ...values, shadowColor].join(' ');
 }
 export function shadowStyle({ shadow }) {

package/es/tasty/styles/styledScrollbar.js

@@ -1,10 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.0
  * Released under the MIT license.
  */
 
+/**
+ * @deprecated `styledScrollbar` is deprecated. Use `scrollbar` instead.
+ */
 export function styledScrollbarStyle({ styledScrollbar: val }) {
     if (val == null)
         return null;

package/es/tasty/styles/transition.js

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

package/es/tasty/styles/types.js

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

package/es/tasty/styles/width.js

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

package/es/tasty/tasty.js

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

package/es/tasty/types.js

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

package/es/tasty/utils/cache-wrapper.js

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

package/es/tasty/utils/case-converter.js

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

package/es/tasty/utils/colors.js

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

package/es/tasty/utils/dotize.js

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

package/es/tasty/utils/filterBaseProps.js

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

package/es/tasty/utils/getDisplayName.js

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

package/es/tasty/utils/getModCombinations.js

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

package/es/tasty/utils/mergeStyles.js

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

package/es/tasty/utils/modAttrs.js

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

package/es/tasty/utils/renderStyles.js

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

package/es/tasty/utils/responsive.js

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

package/es/tasty/utils/string.js

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

package/es/tasty/utils/styles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.0
  * Released under the MIT license.
  */
 
@@ -85,6 +85,7 @@ export function parseStyle(value, mode = 0) {
             mods: [],
             all: [],
             value: '',
+            colors: [],
         };
     }
     const CACHE = ATTR_CACHE_MODE_MAP[mode];
@@ -95,6 +96,7 @@ export function parseStyle(value, mode = 0) {
         const mods = [];
         const all = [];
         const values = [];
+        const colors = [];
         const autoCalc = mode !== 1;
         let currentValue = '';
         let calc = -1;
@@ -117,13 +119,15 @@ export function parseStyle(value, mode = 0) {
                 counter++;
             }
             else if (hashColor) {
-                // currentValue += `${hashColor} `;
                 if (mode === 2) {
                     color = hashColor;
                 }
                 else {
                     color = parseColor(hashColor, false).color;
                 }
+                if (color) {
+                    colors.push(color);
+                }
             }
             else if (mod) {
                 // ignore mods inside brackets
@@ -256,6 +260,7 @@ export function parseStyle(value, mode = 0) {
             values,
             mods,
             all,
+            colors,
             value: `${parsedValue} ${color}`.trim(),
             color,
         });

package/es/tasty/utils/warnings.js

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

package/es/tokens.js

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

package/es/type-checks.js

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

package/es/utils/ResizeSensor.js

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

package/es/utils/modules.js

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

package/es/utils/promise.js

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

package/es/utils/random.js

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

package/es/utils/range.js

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

package/es/utils/react/Slots.js

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

package/es/utils/react/chain.js

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

package/es/utils/react/index.js

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

package/es/utils/react/interactions.js

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

package/es/utils/react/isTextOnly.js

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

package/es/utils/react/mapProps.js

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