@cube-dev/ui-kit 0.98.9 → 0.99.0

package/es/tasty/utils/processTokens.js

@@ -1,12 +1,86 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { getRgbValuesFromRgbaString, hexToRgb, parseStyle } from './styles';
+import { getRgbValuesFromRgbaString, hexToRgb, parseStyle } from './styles.js';
 const devMode = process.env.NODE_ENV !== 'production';
+/**
+ * Parse HSL values from an hsl()/hsla() string.
+ * Supports both comma-separated (legacy) and space-separated (modern) syntax:
+ *   hsl(200, 40%, 50%)
+ *   hsl(200 40% 50%)
+ *   hsl(200 40% 50% / 0.5)
+ *
+ * Returns [h, s, l] where h is 0-360, s and l are 0-1, or null if parsing fails.
+ */
+function parseHslValues(str) {
+    const match = str.match(/hsla?\(([^)]+)\)/i);
+    if (!match)
+        return null;
+    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);
+    if (parts.length < 3)
+        return null;
+    // Parse hue (can be unitless degrees, deg, turn, rad, or grad)
+    let h = parseFloat(parts[0]);
+    const hueStr = parts[0].toLowerCase();
+    if (hueStr.endsWith('turn')) {
+        h = parseFloat(hueStr) * 360;
+    }
+    else if (hueStr.endsWith('rad')) {
+        h = (parseFloat(hueStr) * 180) / Math.PI;
+    }
+    else if (hueStr.endsWith('grad')) {
+        h = parseFloat(hueStr) * 0.9; // 400 grad = 360 deg
+    }
+    // deg or unitless are already in degrees
+    // Normalize hue to 0-360 range
+    h = h % 360;
+    if (h < 0)
+        h += 360;
+    // Parse saturation and lightness (percentages)
+    const parsePercent = (val) => {
+        const num = parseFloat(val);
+        return val.includes('%') ? num / 100 : num;
+    };
+    const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
+    const l = Math.max(0, Math.min(1, parsePercent(parts[2])));
+    return [h, s, l];
+}
+/**
+ * Convert HSL to RGB (sRGB).
+ * Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative
+ * Same as used in CSS Color 4 spec.
+ *
+ * @param h - Hue in degrees (0-360)
+ * @param s - Saturation (0-1)
+ * @param l - Lightness (0-1)
+ * @returns RGB values in 0-255 range (may have fractional values)
+ */
+function hslToRgb(h, s, l) {
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => {
+        const k = (n + h / 30) % 12;
+        return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    };
+    // Convert 0-1 range to 0-255
+    return [f(0) * 255, f(8) * 255, f(4) * 255];
+}
+/**
+ * Format a number to a string with up to 1 decimal place, removing trailing zeros.
+ */
+function formatRgbComponent(n) {
+    return parseFloat(n.toFixed(1)).toString();
+}
 /**
  * Extract RGB triplet from a color value.
  * Returns the RGB values as a space-separated string (e.g., "255 128 0")
@@ -25,6 +99,18 @@ function extractRgbValue(colorValue, parsedOutput) {
             return rgbValues.join(' ');
         }
     }
+    // For hsl(...) values, convert to RGB triplet
+    if (parsedOutput.startsWith('hsl(') ||
+        parsedOutput.startsWith('hsla(') ||
+        colorValue.startsWith('hsl(') ||
+        colorValue.startsWith('hsla(')) {
+        // Try parsedOutput first, then original colorValue
+        const hslValues = parseHslValues(parsedOutput) || parseHslValues(colorValue);
+        if (hslValues) {
+            const [r, g, b] = hslToRgb(hslValues[0], hslValues[1], hslValues[2]);
+            return `${formatRgbComponent(r)} ${formatRgbComponent(g)} ${formatRgbComponent(b)}`;
+        }
+    }
     // For hex values, convert to RGB triplet
     if (colorValue.startsWith('#') && /^#[0-9a-fA-F]{3,8}$/.test(colorValue)) {
         const rgbResult = hexToRgb(colorValue);

package/es/tasty/utils/string.js

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

package/es/tasty/utils/styles.js

@@ -1,13 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { StyleParser } from '../parser/parser';
-import { cacheWrapper } from './cache-wrapper';
-import { camelToKebab } from './case-converter';
+import { StyleParser } from '../parser/parser.js';
+import { createStateParserContext, parseAdvancedState } from '../states/index.js';
+import { cacheWrapper } from './cache-wrapper.js';
+import { camelToKebab } from './case-converter.js';
 const devMode = process.env.NODE_ENV !== 'production';
 // Precompiled regex patterns for parseColor optimization
 // Match var(--name-color...) and extract the name, regardless of fallbacks
@@ -27,9 +28,6 @@ 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)',
@@ -43,12 +41,6 @@ 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)))`;
@@ -117,6 +109,20 @@ 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
@@ -208,11 +214,38 @@ 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) {
-    return str
-        .match(/\d+/g)
-        .map((s) => parseInt(s))
-        .slice(0, 3);
+    // 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);
+    });
 }
 export function hexToRgb(hex) {
     const rgba = hex
@@ -275,7 +308,16 @@ export function extractStyles(props, styleList = [], defaultStyles, propMap, ign
     }, {});
     return styles;
 }
-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;
+// 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('!@');
+}
 export const STATE_OPERATORS = {
     NOT: '!',
     AND: '&',
@@ -317,11 +359,38 @@ 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 = notation.replace(/,/g, '|').match(STATES_REGEXP);
+    const tokens = replaceCommasOutsideParens(notation).match(STATES_REGEXP);
     if (!tokens || !tokens.length) {
         return {
             model: undefined,
@@ -380,10 +449,115 @@ 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) {
+export function styleStateMapToStyleStateDataList(styleStateMap, parserContext) {
     if (typeof styleStateMap !== 'object' || !styleStateMap) {
         return {
             states: [
@@ -395,17 +569,76 @@ export function styleStateMapToStyleStateDataList(styleStateMap) {
                 },
             ],
             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) {
+        if (!state.mods.length && !state.advancedStates?.length) {
             initialState = state;
         }
         else {
@@ -424,7 +657,7 @@ export function styleStateMapToStyleStateDataList(styleStateMap) {
             value: true,
         });
     }
-    return { states: stateDataList, mods: allMods };
+    return { states: stateDataList, mods: allMods, hasAdvancedStates };
 }
 export const COMPUTE_FUNC_MAP = {
     '!': (a) => !a, // NOT - boolean negation

package/es/tasty/utils/typography.js

@@ -0,0 +1,67 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+import { TYPOGRAPHY_PRESETS } from '../../tokens/typography.js';
+/**
+ * Generate typography tokens with $ prefix for CSS custom properties.
+ *
+ * Each preset generates the following CSS custom properties:
+ * - `${name}-font-size`
+ * - `${name}-line-height`
+ * - `${name}-letter-spacing`
+ * - `${name}-font-weight`
+ * - `${name}-bold-font-weight` (if defined)
+ * - `${name}-icon-size` (if defined)
+ * - `${name}-text-transform` (if defined)
+ * - `${name}-font-family` (if defined)
+ * - `${name}-font-style` (if defined)
+ *
+ * @param presets - Typography presets object (defaults to TYPOGRAPHY_PRESETS)
+ * @returns Styles object with $ prefixed keys
+ *
+ * @example
+ * // Using default presets
+ * const tokens = generateTypographyTokens();
+ * // tokens['$h1-font-size'] === '36px'
+ *
+ * @example
+ * // Using custom presets
+ * const customTokens = generateTypographyTokens({
+ *   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' }
+ * });
+ */
+export function generateTypographyTokens(presets = TYPOGRAPHY_PRESETS) {
+    const tokens = {};
+    for (const [name, preset] of Object.entries(presets)) {
+        tokens[`$${name}-font-size`] = preset.fontSize;
+        tokens[`$${name}-line-height`] = preset.lineHeight;
+        tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? '0';
+        tokens[`$${name}-font-weight`] = preset.fontWeight;
+        if (preset.boldFontWeight !== undefined) {
+            // Handle different property naming for c1 (uses font-bold-weight instead of bold-font-weight)
+            const boldKey = name === 'c1'
+                ? `$${name}-font-bold-weight`
+                : `$${name}-bold-font-weight`;
+            tokens[boldKey] = preset.boldFontWeight;
+        }
+        if (preset.iconSize !== undefined) {
+            tokens[`$${name}-icon-size`] = preset.iconSize;
+        }
+        if (preset.textTransform !== undefined) {
+            tokens[`$${name}-text-transform`] = preset.textTransform;
+        }
+        if (preset.fontFamily !== undefined) {
+            tokens[`$${name}-font-family`] = preset.fontFamily;
+        }
+        if (preset.fontStyle !== undefined) {
+            tokens[`$${name}-font-style`] = preset.fontStyle;
+        }
+    }
+    return tokens;
+}
+
+        

package/es/tasty/utils/warnings.js

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