@cube-dev/ui-kit 0.0.0-canary-76be278 → 0.0.0-canary-7e4ec9d

package/es/tasty/utils/responsive.js

@@ -0,0 +1,60 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
+ * Released under the MIT license.
+ */
+
+const zonesCache = {};
+export function pointsToZones(points) {
+    const cacheKey = points.join('|');
+    if (!zonesCache[cacheKey]) {
+        const zones = [];
+        points.forEach((point, i) => {
+            const zone = {};
+            if (i) {
+                zone.max = points[i - 1] - 1;
+            }
+            zone.min = point;
+            zones.push(zone);
+        });
+        zones.push({
+            max: points[points.length - 1] - 1,
+        });
+        zones.forEach((zone) => {
+            const queries = [];
+            if (zone.min) {
+                queries.push(`(min-width: ${zone.min}px)`);
+            }
+            if (zone.max) {
+                queries.push(`(max-width: ${zone.max}px)`);
+            }
+            zone.mediaQuery = queries.join(' and ');
+        });
+        zonesCache[cacheKey] = zones;
+    }
+    return zonesCache[cacheKey];
+}
+// export function getResponsiveValue(values, zoneNumber) {
+//   for (let i = zoneNumber; i >= 0; i--) {
+//     if (values[i] != null)
+//   }
+// }
+export function normalizeStyleZones(value, zoneNumber) {
+    if (value == null)
+        return value;
+    const arr = Array.from(Array(zoneNumber));
+    if (typeof value === 'string')
+        return arr.map(() => value);
+    if (Array.isArray(value)) {
+        let prevValue = null;
+        for (let i = 0; i < arr.length; i++) {
+            arr[i] = value[i] == null ? prevValue : value[i];
+            prevValue = arr[i];
+        }
+        return arr;
+    }
+    return [];
+}
+
+        

package/es/tasty/utils/string.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/tasty/utils/styles.js

@@ -1,12 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 
 import { StyleParser } from '../parser/parser';
-import { createStateParserContext, parseAdvancedState } from '../states';
 import { cacheWrapper } from './cache-wrapper';
 import { camelToKebab } from './case-converter';
 const devMode = process.env.NODE_ENV !== 'production';
@@ -28,6 +27,9 @@ const SIMPLE_COLOR_PATTERNS = [
 // 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;
 export const CUSTOM_UNITS = {
     r: 'var(--radius)',
     cr: 'var(--card-radius)',
@@ -41,6 +43,12 @@ export const CUSTOM_UNITS = {
     sf: function sf(num) {
         return `minmax(0, ${num}fr)`;
     },
+    // global setting
+    dvh: function dvh(num) {
+        return IS_DVH_SUPPORTED
+            ? `${num}dvh`
+            : `calc(var(--cube-dynamic-viewport-height, 100dvh) / 100 * ${num})`;
+    },
     // span unit for GridProvider
     sp: function spanWidth(num) {
         return `((${num} * var(--column-width)) + (${num - 1} * var(--column-gap)))`;
@@ -109,20 +117,6 @@ export function customFunc(name, fn) {
     __tastyFuncs[name] = fn;
     __tastyParser.setFuncs(__tastyFuncs);
 }
-/**
- * Get the global StyleParser instance.
- * Used by configure() to apply parser configuration.
- */
-export function getGlobalParser() {
-    return __tastyParser;
-}
-/**
- * Get the current custom functions registry.
- * Used by configure() to merge with new functions.
- */
-export function getGlobalFuncs() {
-    return __tastyFuncs;
-}
 /**
  *
  * @param {String} value
@@ -214,38 +208,11 @@ export function strToRgb(color, ignoreAlpha = false) {
         return hexToRgb(color);
     return null;
 }
-/**
- * Extract RGB values from an rgb()/rgba() string.
- * Supports all modern CSS syntax variations:
- * - Comma-separated: rgb(255, 128, 0)
- * - Space-separated: rgb(255 128 0)
- * - Fractional: rgb(128.5, 64.3, 32.1)
- * - Percentages: rgb(50%, 25%, 75%)
- * - Slash alpha notation: rgb(255 128 0 / 0.5)
- *
- * Returns array of RGB values (0-255 range), converting percentages as needed.
- */
 export function getRgbValuesFromRgbaString(str) {
-    // Extract content inside rgb()/rgba()
-    const match = str.match(/rgba?\(([^)]+)\)/i);
-    if (!match)
-        return [];
-    const inner = match[1].trim();
-    // Split by slash first (for alpha), then handle color components
-    const [colorPart] = inner.split('/');
-    // Split by comma or whitespace
-    const parts = colorPart
-        .trim()
-        .split(/[,\s]+/)
-        .filter(Boolean);
-    return parts.slice(0, 3).map((part) => {
-        part = part.trim();
-        if (part.endsWith('%')) {
-            // Convert percentage to 0-255 range
-            return (parseFloat(part) / 100) * 255;
-        }
-        return parseFloat(part);
-    });
+    return str
+        .match(/\d+/g)
+        .map((s) => parseInt(s))
+        .slice(0, 3);
 }
 export function hexToRgb(hex) {
     const rgba = hex
@@ -308,16 +275,7 @@ export function extractStyles(props, styleList = [], defaultStyles, propMap, ign
     }, {});
     return styles;
 }
-// Enhanced regex that includes advanced state patterns
-// Matches: operators, parentheses, @media(...), @(...), @root(...), @own(...), @starting, @predefined,
-//          value mods, boolean mods, pseudo-classes, classes, attribute selectors
-const STATES_REGEXP = /([&|!^])|([()])|(@media:[a-z]+)|(@media\([^)]+\))|(@root\([^)]+\))|(@own\([^)]+\))|(@\([^)]+\))|(@starting)|(@[A-Za-z][A-Za-z0-9-]*)|([a-z][a-z0-9-]+=(?:"[^"]*"|'[^']*'|[^\s&|!^()]+))|([a-z][a-z0-9-]+)|(:[a-z][a-z0-9-]+\([^)]+\)|:[a-z][a-z0-9-]+)|(\.[a-z][a-z0-9-]+)|(\[[^\]]+])/gi;
-/**
- * Check if a token is an advanced state (starts with @)
- */
-export function isAdvancedStateToken(token) {
-    return token.startsWith('@') || token.startsWith('!@');
-}
+const STATES_REGEXP = /([&|!^])|([()])|([a-z][a-z0-9-]+=(?:"[^"]*"|'[^']*'|[^\s&|!^()]+))|([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: '!',
     AND: '&',
@@ -359,38 +317,11 @@ function convertTokensToComputeUnits(tokens) {
     });
     return tokens.length === 1 ? tokens[0] : tokens;
 }
-/**
- * Replace commas with | only outside of parentheses.
- * This preserves commas in advanced states like @(card, w < 600px)
- */
-function replaceCommasOutsideParens(str) {
-    let result = '';
-    let depth = 0;
-    for (let i = 0; i < str.length; i++) {
-        const char = str[i];
-        if (char === '(') {
-            depth++;
-            result += char;
-        }
-        else if (char === ')') {
-            depth--;
-            result += char;
-        }
-        else if (char === ',' && depth === 0) {
-            // Only replace commas at the top level (outside parentheses)
-            result += '|';
-        }
-        else {
-            result += char;
-        }
-    }
-    return result;
-}
 /**
  * Parse state notation and return tokens, modifiers and compute model.
  */
 function parseStateNotationInner(notation, value) {
-    const tokens = replaceCommasOutsideParens(notation).match(STATES_REGEXP);
+    const tokens = notation.replace(/,/g, '|').match(STATES_REGEXP);
     if (!tokens || !tokens.length) {
         return {
             model: undefined,
@@ -449,115 +380,10 @@ function parseStateNotationInner(notation, value) {
     };
 }
 export const parseStateNotation = cacheWrapper(parseStateNotationInner);
-/**
- * Build an AtRuleContext from parsed advanced states
- */
-export function buildAtRuleContext(advancedStates, negatedStates) {
-    if (advancedStates.length === 0)
-        return undefined;
-    const ctx = {};
-    for (const state of advancedStates) {
-        const isNegated = negatedStates.has(state.raw);
-        switch (state.type) {
-            case 'media': {
-                if (!ctx.media)
-                    ctx.media = [];
-                let mediaCondition = '';
-                if (state.mediaType) {
-                    // @media:print, @media:screen, etc.
-                    mediaCondition = state.mediaType;
-                }
-                else if (state.condition) {
-                    // @media(width < 920px)
-                    mediaCondition = `(${state.condition})`;
-                }
-                if (mediaCondition) {
-                    if (isNegated) {
-                        ctx.media.push(`not ${mediaCondition}`);
-                    }
-                    else {
-                        ctx.media.push(mediaCondition);
-                    }
-                }
-                break;
-            }
-            case 'container': {
-                if (!ctx.container)
-                    ctx.container = [];
-                let condition = state.condition;
-                if (isNegated) {
-                    condition = `not (${condition})`;
-                }
-                ctx.container.push({
-                    name: state.containerName,
-                    condition,
-                });
-                break;
-            }
-            case 'root': {
-                if (!ctx.rootStates)
-                    ctx.rootStates = [];
-                // Parse the condition to generate the proper selector
-                const rootSelector = buildRootSelector(state.condition, isNegated);
-                ctx.rootStates.push(rootSelector);
-                break;
-            }
-            case 'starting': {
-                if (!isNegated) {
-                    ctx.startingStyle = true;
-                }
-                break;
-            }
-            // 'own' and 'predefined' are handled differently (selector-based, not at-rule)
-            // 'modifier' is a regular state
-        }
-    }
-    // Return undefined if no at-rules were added
-    if (!ctx.media?.length &&
-        !ctx.container?.length &&
-        !ctx.rootStates?.length &&
-        !ctx.startingStyle) {
-        return undefined;
-    }
-    return ctx;
-}
-/**
- * Build a root state selector from a condition
- */
-function buildRootSelector(condition, isNegated) {
-    // Handle different condition formats:
-    // - theme=dark -> [data-theme="dark"]
-    // - .className -> .className
-    // - [attr] -> [attr]
-    // - booleanMod -> [data-boolean-mod]
-    let selector;
-    if (condition.startsWith('.')) {
-        // Class selector
-        selector = condition;
-    }
-    else if (condition.startsWith('[')) {
-        // Attribute selector
-        selector = condition;
-    }
-    else if (condition.includes('=')) {
-        // Value mod: theme=dark -> [data-theme="dark"]
-        const [key, value] = condition.split('=');
-        selector = `[data-${camelToKebab(key.trim())}="${value.trim()}"]`;
-    }
-    else {
-        // Boolean mod: camelCase -> [data-camel-case]
-        selector = `[data-${camelToKebab(condition)}]`;
-    }
-    if (isNegated) {
-        return `:not(${selector})`;
-    }
-    return selector;
-}
 /**
  * Parse state notation and return tokens, modifiers and compute model.
- * Enhanced to detect and extract advanced states.
  */
-export function styleStateMapToStyleStateDataList(styleStateMap, parserContext) {
+export function styleStateMapToStyleStateDataList(styleStateMap) {
     if (typeof styleStateMap !== 'object' || !styleStateMap) {
         return {
             states: [
@@ -569,76 +395,17 @@ export function styleStateMapToStyleStateDataList(styleStateMap, parserContext)
                 },
             ],
             mods: [],
-            hasAdvancedStates: false,
         };
     }
     const stateDataList = [];
-    let hasAdvancedStates = false;
     Object.keys(styleStateMap).forEach((stateNotation) => {
         const state = parseStateNotation(stateNotation, styleStateMap[stateNotation]);
-        // Check if this state contains any advanced states
-        const advancedStates = [];
-        const negatedAdvancedStates = new Set();
-        const regularMods = [];
-        const ownMods = [];
-        const negatedOwnMods = [];
-        // Scan tokens for advanced states
-        if (state.tokens) {
-            let isNegated = false;
-            for (const token of state.tokens) {
-                if (token === '!') {
-                    isNegated = true;
-                    continue;
-                }
-                if (isAdvancedStateToken(token)) {
-                    hasAdvancedStates = true;
-                    const ctx = parserContext || createStateParserContext(undefined);
-                    const parsed = parseAdvancedState(token, ctx);
-                    advancedStates.push(parsed);
-                    // Handle @own states specially - extract condition as ownMod
-                    if (parsed.type === 'own' && parsed.condition) {
-                        if (isNegated) {
-                            negatedOwnMods.push(parsed.condition);
-                        }
-                        else {
-                            ownMods.push(parsed.condition);
-                        }
-                    }
-                    else if (isNegated) {
-                        negatedAdvancedStates.add(token);
-                    }
-                    isNegated = false;
-                }
-                else if (token.length > 1 &&
-                    !['&', '|', '^', '(', ')'].includes(token)) {
-                    regularMods.push(token);
-                    isNegated = false;
-                }
-                else {
-                    isNegated = false;
-                }
-            }
-        }
-        // If there are advanced states, build the atRuleContext
-        if (advancedStates.length > 0) {
-            state.advancedStates = advancedStates;
-            state.atRuleContext = buildAtRuleContext(advancedStates, negatedAdvancedStates);
-            // Filter mods to only include regular mods (not advanced states)
-            state.mods = regularMods;
-        }
-        // Store own mods for sub-element selector generation
-        if (ownMods.length > 0) {
-            state.ownMods = ownMods;
-        }
-        if (negatedOwnMods.length > 0) {
-            state.negatedOwnMods = negatedOwnMods;
-        }
         stateDataList.push(state);
     });
     stateDataList.reverse();
     let initialState;
     const allMods = stateDataList.reduce((all, state) => {
-        if (!state.mods.length && !state.advancedStates?.length) {
+        if (!state.mods.length) {
             initialState = state;
         }
         else {
@@ -657,7 +424,7 @@ export function styleStateMapToStyleStateDataList(styleStateMap, parserContext)
             value: true,
         });
     }
-    return { states: stateDataList, mods: allMods, hasAdvancedStates };
+    return { states: stateDataList, mods: allMods };
 }
 export const COMPUTE_FUNC_MAP = {
     '!': (a) => !a, // NOT - boolean negation

package/es/tasty/utils/warnings.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */