@cube-dev/ui-kit 0.0.0-canary-2d5ce5e → 0.0.0-canary-42c23bd

package/es/tasty/utils/styles.js

@@ -1,11 +1,10 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2d5ce5e
+ * @cube-dev/ui-kit v0.0.0-canary-42c23bd
  * Released under the MIT license.
  */
 
-import { StyleParser } from '../../parser/parser';
 import { cacheWrapper } from './cache-wrapper';
 import { camelToKebab } from './case-converter';
 import { getModCombinations } from './getModCombinations';
@@ -70,20 +69,6 @@ function getModSelector(modName) {
     }
     return MOD_NAME_CACHE.get(modName);
 }
-// ---------------------------------------------------------------------------
-// New style-parser integration
-// Keep a single shared instance across the whole library so that the cache of
-// the new StyleParser keeps working and custom functions/units can be updated
-// at runtime.
-const __tastyParser = new StyleParser({ units: CUSTOM_UNITS });
-// Registry for user-provided custom functions that the parser can call.
-// It is updated through the `customFunc` helper exported below.
-const __tastyFuncs = {};
-export function customFunc(name, fn) {
-    __tastyFuncs[name] = fn;
-    __tastyParser.setFuncs(__tastyFuncs);
-}
-// ---------------------------------------------------------------------------
 /**
  *
  * @param {String} value
@@ -91,75 +76,291 @@ export function customFunc(name, fn) {
  * @returns {Object<String,String|Array>}
  */
 export function parseStyle(value, mode = 0) {
-    let str;
-    if (typeof value === 'string') {
-        str = value;
-    }
-    else if (typeof value === 'number') {
-        str = String(value);
+    if (typeof value === 'number') {
+        value = String(value);
     }
-    else {
-        // boolean, null, undefined, objects etc. → empty string
-        str = '';
+    if (typeof value !== 'string') {
+        return {
+            values: [],
+            mods: [],
+            all: [],
+            value: '',
+            colors: [],
+        };
     }
-    // Ignore `mode` – kept only for backward-compatible signature.
-    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(',');
+    const CACHE = ATTR_CACHE_MODE_MAP[mode];
+    if (!CACHE.has(value)) {
+        if (CACHE.size > MAX_CACHE) {
+            CACHE.clear();
         }
-    });
-    merged.color = merged.colors[0];
-    return merged;
+        const mods = [];
+        const all = [];
+        const values = [];
+        const colors = [];
+        const autoCalc = mode !== 1;
+        let currentValue = '';
+        let calc = -1;
+        let counter = 0;
+        let parsedValue = '';
+        let color = '';
+        let currentFunc = '';
+        let usedFunc = '';
+        let token;
+        ATTR_REGEXP.lastIndex = 0;
+        value = value.replace(/@\(/g, 'var(--');
+        while ((token = ATTR_REGEXP.exec(value))) {
+            let [, quotedDouble, quotedSingle, func, hashColor, prop, mod, unit, unitVal, unitMetric, operator, bracket, comma,] = token;
+            if (quotedSingle || quotedDouble) {
+                currentValue += `${quotedSingle || quotedDouble} `;
+            }
+            else if (func) {
+                currentFunc = func.slice(0, -1);
+                currentValue += func;
+                counter++;
+            }
+            else if (hashColor) {
+                if (mode === 2) {
+                    color = hashColor;
+                }
+                else {
+                    color = parseColor(hashColor, false).color;
+                }
+                if (color) {
+                    colors.push(color);
+                }
+            }
+            else if (mod) {
+                // ignore mods inside brackets
+                if (counter || IGNORE_MODS.includes(mod)) {
+                    currentValue += `${mod} `;
+                }
+                else {
+                    mods.push(mod);
+                    all.push(mod);
+                    parsedValue += `${mod} `;
+                }
+            }
+            else if (bracket) {
+                if (bracket === '(') {
+                    if (!~calc) {
+                        calc = counter;
+                        currentValue += 'calc';
+                    }
+                    counter++;
+                }
+                if (bracket === ')' && counter) {
+                    currentValue = currentValue.trim();
+                    if (counter > 0) {
+                        counter--;
+                    }
+                    if (counter === calc) {
+                        calc = -1;
+                    }
+                }
+                if (bracket === ')' && !counter) {
+                    usedFunc = currentFunc;
+                    currentFunc = '';
+                }
+                currentValue += `${bracket}${bracket === ')' ? ' ' : ''}`;
+            }
+            else if (operator) {
+                if (!~calc && autoCalc) {
+                    if (currentValue) {
+                        if (currentValue.includes('(')) {
+                            const index = currentValue.lastIndexOf('(');
+                            currentValue = `${currentValue.slice(0, index)}(calc(${currentValue.slice(index + 1)}`;
+                            calc = counter;
+                            counter++;
+                        }
+                    }
+                    else if (values.length) {
+                        parsedValue = parsedValue.slice(0, parsedValue.length - values[values.length - 1].length - 1);
+                        let tmp = values.splice(values.length - 1, 1)[0];
+                        all.splice(values.length - 1, 1);
+                        if (tmp) {
+                            if (tmp.startsWith('calc(')) {
+                                tmp = tmp.slice(4);
+                            }
+                            calc = counter;
+                            counter++;
+                            currentValue = `calc((${tmp}) `;
+                        }
+                    }
+                }
+                currentValue += `${operator} `;
+            }
+            else if (unit) {
+                if (unitMetric && CUSTOM_UNITS[unitMetric]) {
+                    let add = customUnit(unitVal, unitMetric);
+                    if (!~calc && add.startsWith('(')) {
+                        currentValue += 'calc';
+                    }
+                    currentValue += `${add} `;
+                }
+                else {
+                    currentValue += `${unit} `;
+                }
+            }
+            else if (prop) {
+                prop = prop.replace('@', '--');
+                if (currentFunc !== 'var') {
+                    currentValue += `var(${prop}) `;
+                }
+                else {
+                    currentValue += `${prop} `;
+                }
+            }
+            else if (comma) {
+                if (~calc) {
+                    calc = -1;
+                    counter--;
+                    currentValue = `${currentValue.trim()}), `;
+                }
+                else {
+                    currentValue = `${currentValue.trim()}, `;
+                }
+                if (!counter) {
+                    all.push(',');
+                }
+            }
+            if (currentValue && !counter) {
+                let prepared = prepareParsedValue(currentValue);
+                if (COLOR_FUNCS.includes(usedFunc)) {
+                    color = prepared;
+                }
+                else if (prepared.startsWith('color(')) {
+                    prepared = prepared.slice(6, -1);
+                    color = parseColor(prepared).color;
+                }
+                else {
+                    if (prepared !== ',') {
+                        values.push(prepared);
+                        all.push(prepared);
+                    }
+                    parsedValue += `${prepared} `;
+                }
+                currentValue = '';
+            }
+        }
+        if (counter) {
+            let prepared = prepareParsedValue(`${currentValue.trim()}${')'.repeat(counter)}`);
+            if (prepared.startsWith('color(')) {
+                prepared = prepared.slice(6, -1);
+                color = parseColor(prepared).color;
+            }
+            else {
+                if (prepared !== ',') {
+                    values.push(prepared);
+                    all.push(prepared);
+                }
+                parsedValue += prepared;
+            }
+        }
+        CACHE.set(value, {
+            values,
+            mods,
+            all,
+            colors,
+            value: `${parsedValue} ${color}`.trim(),
+            color,
+        });
+    }
+    return CACHE.get(value);
 }
 /**
  * Parse color. Find it value, name and opacity.
  */
 export function parseColor(val, ignoreError = false) {
-    val = (val ?? '').trim();
+    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 (val.startsWith('#')) {
+        val = val.slice(1);
+        const tmp = val.split('.');
+        let opacity = 100;
+        if (tmp.length > 1) {
+            if (tmp[1].length === 1) {
+                opacity = Number(tmp[1]) * 10;
+            }
+            else {
+                opacity = Number(tmp[1]);
+            }
+            if (Number.isNaN(opacity)) {
+                opacity = 100;
+            }
+        }
+        const name = tmp[0];
+        let color;
+        if (name === 'current') {
+            color = 'currentColor';
+        }
+        else {
+            if (opacity > 100) {
+                opacity = 100;
+            }
+            else if (opacity < 0) {
+                opacity = 0;
+            }
+        }
+        if (!color) {
+            color =
+                opacity !== 100
+                    ? rgbColorProp(name, Math.round(opacity) / 100)
+                    : colorProp(name, null, strToRgb(`#${name}`));
+        }
+        return {
+            color,
+            name,
+            opacity: opacity != null ? opacity : 100,
+        };
+    }
+    let { values, mods, color } = parseStyle(val);
+    let name, opacity;
+    if (color) {
+        return {
+            color: (!color.startsWith('var(') ? strToRgb(color) : color) || color,
+        };
+    }
+    values.forEach((token) => {
+        if (token.match(/^((var|rgb|rgba|hsl|hsla)\(|#[0-9a-f]{3,6})/)) {
+            color = !token.startsWith('var') ? strToRgb(token) : token;
+        }
+        else if (token.endsWith('%')) {
+            opacity = parseInt(token);
+        }
+    });
+    if (color) {
+        return { color };
+    }
+    name = name || mods[0];
+    if (!name) {
         if (!ignoreError && devMode) {
-            console.warn('CubeUIKit: unable to parse color:', val);
+            console.warn('CubeUIKit: incorrect color value:', val);
         }
         return {};
     }
-    // Extract color name (if present) from variable pattern.
-    let nameMatch = firstColor.match(/var\(--([a-z0-9-]+)-color/);
-    if (!nameMatch) {
-        nameMatch = firstColor.match(/var\(--([a-z0-9-]+)-color-rgb/);
-    }
-    let opacity;
-    if (firstColor.startsWith('rgb')) {
-        const alphaMatch = firstColor.match(/\/\s*([0-9.]+)\)/);
-        if (alphaMatch) {
-            const v = parseFloat(alphaMatch[1]);
-            if (!isNaN(v))
-                opacity = v * 100;
+    if (!opacity) {
+        let color;
+        if (name === 'current') {
+            color = 'currentColor';
+        }
+        else if (name === 'inherit') {
+            color = 'inherit';
         }
+        else if (name !== 'transparent' && name !== 'currentColor') {
+            color = `var(--${name}-color, ${name})`;
+        }
+        else {
+            color = name;
+        }
+        return {
+            name,
+            color,
+        };
     }
     return {
-        color: firstColor,
-        name: nameMatch ? nameMatch[1] : undefined,
+        color: rgbColorProp(name, Math.round(opacity) / 100),
+        name,
         opacity,
     };
 }

package/es/tasty/utils/warnings.js

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

package/es/tokens.js

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

package/es/utils/react/useId.js

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

package/es/utils/react/useLayoutEffect.js

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

package/es/utils/react/useQaProps.js

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

package/es/utils/react/useViewportSize.js

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

package/es/utils/react/wrapNodeIfPlain.js

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

package/es/utils/transitions.js

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

package/es/utils/tree.js

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

package/es/utils/warnings.js

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

package/es/version.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2d5ce5e
+ * @cube-dev/ui-kit v0.0.0-canary-42c23bd
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.0.0-canary-2d5ce5e';
+    const version = '0.0.0-canary-42c23bd';
     // Ensure CubeUIKit is defined on window in a way bundlers recognize
     window.CubeUIKit = window.CubeUIKit || { version };
     // Check for multiple versions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-2d5ce5e",
+  "version": "0.0.0-canary-42c23bd",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"
@@ -40,6 +40,7 @@
     "diff": "^7.0.0",
     "email-validator": "^2.0.4",
     "globals": "^16.0.0",
+    "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
     "react-aria": "^3.37.0",
     "react-focus-lock": "^2.13.5",

package/types/components/content/PrismCode/PrismCode.d.ts

@@ -1,8 +1,3 @@
-import 'prismjs/components/prism-diff';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-yaml';
-import 'prismjs/plugins/diff-highlight/prism-diff-highlight';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 export interface CubePrismCodeProps extends ContainerStyleProps {
     /** The CSS style map */

package/types/components/content/PrismCode/prismSetup.d.ts

@@ -0,0 +1,2 @@
+import { Prism as RendererPrism } from 'prism-react-renderer';
+export { RendererPrism as Prism };