@cube-dev/ui-kit 0.74.3 → 0.76.0

package/es/tasty/utils/responsive.js

@@ -1,16 +1,10 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.74.3
+ * @cube-dev/ui-kit v0.76.0
  * Released under the MIT license.
  */
 
-export function mediaWrapper(cssRules, points) {
-    return points
-        .filter((point) => point.mediaQuery)
-        .map((point, i) => `@media ${point.mediaQuery} {${cssRules[i]}}`)
-        .join('\n');
-}
 const zonesCache = {};
 export function pointsToZones(points) {
     const cacheKey = points.join('|');

package/es/tasty/utils/string.js

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

package/es/tasty/utils/styles.js

@@ -1,15 +1,31 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.74.3
+ * @cube-dev/ui-kit v0.76.0
  * Released under the MIT license.
  */
 
 import { StyleParser } from '../parser/parser';
 import { cacheWrapper } from './cache-wrapper';
 import { camelToKebab } from './case-converter';
-import { getModCombinations } from './getModCombinations';
 const devMode = process.env.NODE_ENV !== 'production';
+// Precompiled regex patterns for parseColor optimization
+const COLOR_VAR_PATTERN = /var\(--([a-z0-9-]+)-color(?:-rgb)?\)/;
+const COLOR_VAR_RGB_PATTERN = /var\(--([a-z0-9-]+)-color-rgb\)/;
+const RGB_ALPHA_PATTERN = /\/\s*([0-9.]+)\)/;
+const SIMPLE_COLOR_PATTERNS = [
+    /^#[0-9a-fA-F]{3,8}$/, // Hex colors: #fff, #ffffff, #ffff, #ffffffff
+    /^rgb\(/, // RGB/RGBA functions
+    /^hsl\(/, // HSL/HSLA functions
+    /^lch\(/, // LCH color functions
+    /^oklch\(/, // OKLCH color functions
+    /^var\(--[a-z0-9-]+-color/, // CSS custom properties for colors
+    /^currentColor$/, // CSS currentColor keyword
+    /^transparent$/, // CSS transparent keyword
+];
+// Rate limiting for dev warnings to avoid spam
+let colorWarningCount = 0;
+const MAX_COLOR_WARNINGS = 10;
 const IS_DVH_SUPPORTED = typeof CSS !== 'undefined' && typeof CSS?.supports === 'function'
     ? CSS.supports('height: 100dvh')
     : false;
@@ -38,16 +54,8 @@ export const CUSTOM_UNITS = {
     },
 };
 export const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
-export function createRule(prop, value, selector) {
-    if (value == null)
-        return '';
-    if (selector) {
-        return `${selector} { ${prop}: ${value}; }\n`;
-    }
-    return `${prop}: ${value};\n`;
-}
 const MOD_NAME_CACHE = new Map();
-function getModSelector(modName) {
+export function getModSelector(modName) {
     if (!MOD_NAME_CACHE.has(modName)) {
         MOD_NAME_CACHE.set(modName, modName.match(/^[a-z]/) ? `[data-is-${camelToKebab(modName)}]` : modName);
     }
@@ -84,52 +92,56 @@ export function parseStyle(value) {
     }
     return __tastyParser.process(str);
 }
-// Utility: flatten groups into merged token lists (closest to legacy shape).
-export function flattenStyleDetails(processed) {
-    const merged = {
-        values: [],
-        mods: [],
-        colors: [],
-        all: [],
-        value: processed.output,
-        color: undefined,
-    };
-    processed.groups.forEach((g, idx) => {
-        merged.values.push(...g.values);
-        merged.mods.push(...g.mods);
-        merged.colors.push(...g.colors);
-        merged.all.push(...g.all);
-        if (idx < processed.groups.length - 1) {
-            merged.all.push(',');
-        }
-    });
-    merged.color = merged.colors[0];
-    return merged;
-}
 /**
  * Parse color. Find it value, name and opacity.
+ * Optimized to avoid heavy parseStyle calls for simple color patterns.
  */
 export function parseColor(val, ignoreError = false) {
-    val = (val ?? '').trim();
+    // Early return for non-strings or empty values
+    if (typeof val !== 'string') {
+        val = String(val ?? '');
+    }
+    val = val.trim();
     if (!val)
         return {};
-    // Utilize the new parser to extract the first color token.
-    const processed = parseStyle(val);
-    const firstColor = processed.groups.find((g) => g.colors.length)?.colors[0];
-    if (!firstColor) {
-        if (!ignoreError && devMode) {
-            console.warn('CubeUIKit: unable to parse color:', val);
+    // Fast path: Check if it's a simple color pattern that doesn't need full parsing
+    const isSimpleColor = SIMPLE_COLOR_PATTERNS.some((pattern) => pattern.test(val));
+    let firstColor;
+    let shouldUseParser = false;
+    if (isSimpleColor) {
+        // For simple colors, use the value directly without parsing
+        firstColor = val;
+    }
+    else {
+        // Complex value - might contain multiple tokens, fallback to full parser
+        shouldUseParser = true;
+        const processed = parseStyle(val);
+        const extractedColor = processed.groups.find((g) => g.colors.length)
+            ?.colors[0];
+        if (!extractedColor) {
+            // Rate-limited warning to avoid spam
+            if (!ignoreError && devMode && colorWarningCount < MAX_COLOR_WARNINGS) {
+                console.warn('CubeUIKit: unable to parse color:', val);
+                colorWarningCount++;
+                if (colorWarningCount === MAX_COLOR_WARNINGS) {
+                    console.warn('CubeUIKit: color parsing warnings will be suppressed from now on');
+                }
+            }
+            return {};
         }
-        return {};
+        firstColor = extractedColor;
     }
-    // Extract color name (if present) from variable pattern.
-    let nameMatch = firstColor.match(/var\(--([a-z0-9-]+)-color/);
+    // Extract color name (if present) from variable pattern using precompiled regex
+    let nameMatch = firstColor.match(COLOR_VAR_PATTERN);
     if (!nameMatch) {
-        nameMatch = firstColor.match(/var\(--([a-z0-9-]+)-color-rgb/);
+        nameMatch = firstColor.match(COLOR_VAR_RGB_PATTERN);
     }
     let opacity;
-    if (firstColor.startsWith('rgb')) {
-        const alphaMatch = firstColor.match(/\/\s*([0-9.]+)\)/);
+    if (firstColor.startsWith('rgb') ||
+        firstColor.startsWith('hsl') ||
+        firstColor.startsWith('lch') ||
+        firstColor.startsWith('oklch')) {
+        const alphaMatch = firstColor.match(RGB_ALPHA_PATTERN);
         if (alphaMatch) {
             const v = parseFloat(alphaMatch[1]);
             if (!isNaN(v))
@@ -142,18 +154,6 @@ export function parseColor(val, ignoreError = false) {
         opacity,
     };
 }
-export function rgbColorProp(colorName, opacity, fallbackColorName, fallbackValue) {
-    const fallbackValuePart = fallbackValue ? `, ${fallbackValue}` : '';
-    return `rgb(var(--${colorName}-color-rgb${fallbackColorName
-        ? `, var(--${fallbackColorName}-color-rgb, ${fallbackValuePart})`
-        : fallbackValuePart}) / ${opacity})`;
-}
-export function colorProp(colorName, fallbackColorName, fallbackValue) {
-    const fallbackValuePart = fallbackValue ? `, ${fallbackValue}` : '';
-    return `var(--${colorName}-color${fallbackColorName
-        ? `, var(--${fallbackColorName}${fallbackValuePart})`
-        : fallbackValuePart})`;
-}
 export function strToRgb(color, ignoreAlpha = false) {
     if (!color)
         return undefined;
@@ -183,27 +183,9 @@ export function hexToRgb(hex) {
     }
     return null;
 }
-export function transferMods(mods, from, to) {
-    mods.forEach((mod) => {
-        if (from.includes(mod)) {
-            to.push(mod);
-            from.splice(from.indexOf(mod), 1);
-        }
-    });
-}
 export function filterMods(mods, allowedMods) {
     return mods.filter((mod) => allowedMods.includes(mod));
 }
-export function customUnit(value, unit) {
-    const converter = CUSTOM_UNITS[unit];
-    if (typeof converter === 'function') {
-        return converter(value);
-    }
-    if (value === '1' || value === 1) {
-        return converter;
-    }
-    return `(${value} * ${converter})`;
-}
 export function extendStyles(defaultStyles, newStyles) {
     let styles = {};
     if (!defaultStyles) {
@@ -248,161 +230,6 @@ export function extractStyles(props, styleList = [], defaultStyles, propMap, ign
     }, {});
     return styles;
 }
-/**
- * Render CSSMap to Styled Components CSS
- * @param styles
- * @param [selector]
- */
-export function renderStylesToSC(styles, selector = '') {
-    if (!styles)
-        return '';
-    if (Array.isArray(styles)) {
-        return styles.reduce((css, stls) => {
-            return css + renderStylesToSC(stls, selector);
-        }, '');
-    }
-    const { $, css, ...styleProps } = styles;
-    let renderedStyles = Object.keys(styleProps).reduce((styleList, styleName) => {
-        const value = styleProps[styleName];
-        if (Array.isArray(value)) {
-            return (styleList +
-                value.reduce((css, val) => {
-                    if (val) {
-                        return css + `${styleName}:${val};\n`;
-                    }
-                    return css;
-                }, ''));
-        }
-        if (value) {
-            return `${styleList}${styleName}:${value};\n`;
-        }
-        return styleList;
-    }, '');
-    if (css) {
-        renderedStyles = css + '\n' + renderedStyles;
-    }
-    if (!renderedStyles) {
-        return '';
-    }
-    if (Array.isArray($)) {
-        return `${selector ? `${selector}{\n` : ''}${$.reduce((rend, suffix) => {
-            return (rend +
-                `${suffix ? `&${suffix}{\n` : ''}${renderedStyles}${suffix ? '}\n' : ''}`);
-        }, '')}${selector ? '}\n' : ''}`;
-    }
-    return `${selector ? `${selector}{\n` : ''}${$ ? `&${$}{\n` : ''}${renderedStyles}${$ ? '}\n' : ''}${selector ? '}\n' : ''}`;
-}
-/**
- * Compile states to finite CSS with selectors.
- * State values should contain a string value with CSS style list.
- * @param {string} selector
- * @param {StyleStateList|StyleStateMapList} states
- * @param {string} suffix
- */
-export function applyStates(selector, states, suffix = '') {
-    return states.reduce((css, state) => {
-        if (!state.value)
-            return css;
-        const modifiers = `${(state.mods || []).map(getModSelector).join('')}${(state.notMods || [])
-            .map((mod) => {
-            let selector = getModSelector(mod);
-            if (selector.startsWith(':not(')) {
-                return selector.slice(5, -1);
-            }
-            else {
-                return `:not(${selector})`;
-            }
-        })
-            .join('')}`;
-        // TODO: replace `replace()` a REAL hotfix
-        return `${css}${selector}${modifiers}${suffix}{\n${state.value.replace(/^&&/, '&')}}\n`;
-    }, '');
-}
-export function styleHandlerCacheWrapper(styleHandler, limit = 1000) {
-    const wrappedStyleHandler = cacheWrapper((styleMap) => {
-        return renderStylesToSC(styleHandler(styleMap));
-    }, limit);
-    const wrappedMapHandler = cacheWrapper((styleMap, suffix = '') => {
-        if (styleMap == null || styleMap === false)
-            return null;
-        const stateMapList = styleMapToStyleMapStateList(styleMap);
-        replaceStateValues(stateMapList, wrappedStyleHandler);
-        return applyStates('&&', stateMapList, suffix);
-    }, limit);
-    return Object.assign(wrappedMapHandler, {
-        __lookupStyles: styleHandler.__lookupStyles,
-    });
-}
-/**
- * Replace state values with new ones.
- * For example, if you want to replace initial values with finite CSS code.
- */
-export function replaceStateValues(states, replaceFn) {
-    const cache = new Map();
-    states.forEach((state) => {
-        if (!cache.get(state.value)) {
-            cache.set(state.value, replaceFn(state.value));
-        }
-        state.value = cache.get(state.value);
-    });
-    return states;
-}
-/**
- * Get all presented modes from the style state list.
- */
-export function getModesFromStyleStateList(stateList) {
-    return stateList.reduce((list, state) => {
-        state.mods.forEach((mod) => {
-            if (!list.includes(mod)) {
-                list.push(mod);
-            }
-        });
-        return list;
-    }, []);
-}
-/**
- * Get all presented modes from the style state map list.
- */
-export function getModesFromStyleStateListMap(stateListMap) {
-    return Object.keys(stateListMap).reduce((list, style) => {
-        const stateList = stateListMap[style];
-        getModesFromStyleStateList(stateList).forEach((mod) => {
-            if (!list.includes(mod)) {
-                list.push(mod);
-            }
-        });
-        return list;
-    }, []);
-}
-/**
- * Convert the style map to the normalized style state list.
- */
-export function styleMapToStyleMapStateList(styleMap, filterKeys) {
-    const keys = filterKeys || Object.keys(styleMap);
-    if (!keys.length)
-        return [];
-    const stateDataListMap = {};
-    let allModsSet = new Set();
-    keys.forEach((style) => {
-        stateDataListMap[style] = styleStateMapToStyleStateDataList(styleMap[style]);
-        stateDataListMap[style].mods.forEach(allModsSet.add, allModsSet);
-    });
-    const allModsArr = Array.from(allModsSet);
-    const styleStateList = [];
-    getModCombinations(allModsArr, true).forEach((combination) => {
-        styleStateList.push({
-            mods: combination,
-            notMods: allModsArr.filter((mod) => !combination.includes(mod)),
-            value: keys.reduce((map, key) => {
-                map[key] = stateDataListMap[key].states.find((state) => {
-                    return computeState(state.model, (mod) => combination.includes(mod));
-                }).value;
-                return map;
-            }, {}),
-        });
-    });
-    return styleStateList;
-}
 const STATES_REGEXP = /([&|!^])|([()])|([a-z][a-z0-9-]+)|(:[a-z][a-z0-9-]+\([^)]+\)|:[a-z][a-z0-9-]+)|(\.[a-z][a-z0-9-]+)|(\[[^\]]+])/gi;
 export const STATE_OPERATORS = {
     NOT: '!',
@@ -555,10 +382,10 @@ export function styleStateMapToStyleStateDataList(styleStateMap) {
     return { states: stateDataList, mods: allMods };
 }
 export const COMPUTE_FUNC_MAP = {
-    '!': (a) => !a,
-    '^': (a, b) => a ^ b,
-    '|': (a, b) => a | b,
-    '&': (a, b) => a & b,
+    '!': (a) => !a, // NOT - boolean negation
+    '^': (a, b) => (a && !b) || (!a && b), // XOR - true when exactly one is true
+    '|': (a, b) => a || b, // OR - logical OR
+    '&': (a, b) => a && b, // AND - logical AND
 };
 /**
  * Compute a result based on a model and incoming map.
@@ -604,5 +431,43 @@ export function computeState(computeModel, valueMap) {
     }
     return !!func(a, b);
 }
+const _innerCache = new WeakMap();
+export function stringifyStyles(styles) {
+    if (styles == null || typeof styles !== 'object')
+        return '';
+    const keys = Object.keys(styles).sort();
+    const parts = [];
+    for (let i = 0; i < keys.length; i++) {
+        const k = keys[i], v = styles[k];
+        if (v === undefined || typeof v === 'function' || typeof v === 'symbol')
+            continue;
+        const c0 = k.charCodeAt(0);
+        const needsInnerSort = ((c0 >= 65 && c0 <= 90) || c0 === 38) &&
+            v &&
+            typeof v === 'object' &&
+            !Array.isArray(v);
+        let sv;
+        if (needsInnerSort) {
+            sv = _innerCache.get(v);
+            if (sv === undefined) {
+                const innerKeys = Object.keys(v).sort();
+                const innerParts = [];
+                for (let j = 0; j < innerKeys.length; j++) {
+                    const ik = innerKeys[j];
+                    const ivs = JSON.stringify(v[ik]);
+                    if (ivs !== undefined)
+                        innerParts.push(JSON.stringify(ik) + ':' + ivs);
+                }
+                sv = '{' + innerParts.join(',') + '}';
+                _innerCache.set(v, sv);
+            }
+        }
+        else {
+            sv = JSON.stringify(v);
+        }
+        parts.push(JSON.stringify(k) + ':' + sv);
+    }
+    return '{' + parts.join(',') + '}';
+}
 
         

package/es/tasty/utils/warnings.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.74.3
+ * @cube-dev/ui-kit v0.76.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.74.3
+ * @cube-dev/ui-kit v0.76.0
  * Released under the MIT license.
  */
 
@@ -79,23 +79,12 @@ const TOKENS = {
     'draft-color': color('dark', 0.2),
     'minor-color': color('dark', 0.65),
     'danger-bg-hover-color': color('danger', 0.1),
-    'primary-1': color('purple', 0.9),
-    'primary-2': color('purple', 0.8),
-    'primary-3': color('purple', 0.7),
-    'primary-4': color('purple', 0.6),
-    'primary-5': color('purple', 0.5),
-    'primary-6': color('purple', 0.4),
-    'primary-7': color('purple', 0.3),
-    'primary-8': color('purple', 0.2),
-    'primary-9': color('purple', 0.1),
-    'primary-10': color('purple', 0),
     'dark-75-color': color('dark', 0.75),
     'primary-color': color('purple'),
     'pink-8-color': color('pink', 0.2),
     'pink-9-color': color('pink', 0.1),
     'disabled-color': color('dark-01', 0.25),
     'disabled-text-color': color('dark-01', 0.25),
-    'disabled-bg': color('dark-05', 0.2),
     'disabled-bg-color': color('dark-05', 0.2),
     'max-content-width': '1440px',
     'topbar-height': '48px',

package/es/type-checks.js

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

package/es/utils/react/forwardRefWithGenerics.js

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

package/es/utils/react/mergeProps.js

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

package/es/utils/react/nullableValue.js

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

package/es/utils/react/sharedStore.js

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

package/es/utils/react/useCombinedRefs.js

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

package/es/utils/react/useControlledFocusVisible.js

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

package/es/utils/react/useEventBus.js

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