@gravionlabs/helix-core 22.0.0

package/fesm2022/gravionlabs-helix-core-uix-styled.mjs

@@ -0,0 +1,871 @@
+import { deepMerge, EventBus, isString, isArray, isObject, isNumber, matchRegex, toKebabCase, isNotEmpty, getKeyValue, isEmpty, resolve, mergeKeys, minifyCSS, createStyleMarkup } from '@gravionlabs/helix-core/uix/utils';
+
+function definePreset(...presets) {
+    return deepMerge(...presets);
+}
+
+const ThemeService = EventBus();
+
+const EXPR_REGEX = /{([^}]*)}/g; // Exp: '{a}', '{a.b}', '{a.b.c}' etc.
+const CALC_REGEX = /(\d+\s+[\+\-\*\/]\s+\d+)/g;
+const VAR_REGEX = /var\([^)]+\)/g;
+function toTokenKey(str) {
+    return isString(str) ? str.replace(/[A-Z]/g, (c, i) => (i === 0 ? c : '.' + c.toLowerCase())).toLowerCase() : str;
+}
+function merge(value1, value2) {
+    if (isArray(value1)) {
+        value1.push(...(value2 || []));
+    }
+    else if (isObject(value1)) {
+        Object.assign(value1, value2);
+    }
+}
+function toValue(value) {
+    // Check for Figma ($value-$type)
+    return isObject(value) && value.hasOwnProperty('$value') && value.hasOwnProperty('$type') ? value.$value : value;
+}
+function toUnit(value, variable = '') {
+    const excludedProperties = ['opacity', 'z-index', 'line-height', 'font-weight', 'flex', 'flex-grow', 'flex-shrink', 'order'];
+    if (!excludedProperties.some((property) => variable.endsWith(property))) {
+        const val = `${value}`.trim();
+        const valArr = val.split(' ');
+        return valArr.map((v) => (isNumber(v) ? `${v}px` : v)).join(' ');
+    }
+    return value;
+}
+function toNormalizePrefix(prefix) {
+    return prefix.replaceAll(/ /g, '').replace(/[^\w]/g, '-');
+}
+function toNormalizeVariable(prefix = '', variable = '') {
+    return toNormalizePrefix(`${isString(prefix, false) && isString(variable, false) ? `${prefix}-` : prefix}${variable}`);
+}
+function getVariableName(prefix = '', variable = '') {
+    return `--${toNormalizeVariable(prefix, variable)}`;
+}
+function hasOddBraces(str = '') {
+    const openBraces = (str.match(/{/g) || []).length;
+    const closeBraces = (str.match(/}/g) || []).length;
+    return (openBraces + closeBraces) % 2 !== 0;
+}
+function getVariableValue(value, variable = '', prefix = '', excludedKeyRegexes = [], fallback) {
+    if (isString(value)) {
+        const val = value.trim();
+        if (hasOddBraces(val)) {
+            return undefined;
+        }
+        else if (matchRegex(val, EXPR_REGEX)) {
+            const _val = val.replaceAll(EXPR_REGEX, (v) => {
+                const path = v.replace(/{|}/g, '');
+                const keys = path.split('.').filter((_v) => !excludedKeyRegexes.some((_r) => matchRegex(_v, _r)));
+                return `var(${getVariableName(prefix, toKebabCase(keys.join('-')))}${isNotEmpty(fallback) ? `, ${fallback}` : ''})`;
+            });
+            return matchRegex(_val.replace(VAR_REGEX, '0'), CALC_REGEX) ? `calc(${_val})` : _val;
+        }
+        return val; //toUnit(val, variable);
+    }
+    else if (isNumber(value)) {
+        return value; //toUnit(value, variable);
+    }
+    return undefined;
+}
+function getComputedValue(obj = {}, value) {
+    if (isString(value)) {
+        const val = value.trim();
+        return matchRegex(val, EXPR_REGEX) ? val.replaceAll(EXPR_REGEX, (v) => getKeyValue(obj, v.replace(/{|}/g, ''))) : val;
+    }
+    else if (isNumber(value)) {
+        return value;
+    }
+    return undefined;
+}
+function setProperty(properties, key, value) {
+    if (isString(key, false)) {
+        properties.push(`${key}:${value};`);
+    }
+}
+function getRule(selector, properties) {
+    if (selector) {
+        return `${selector}{${properties}}`;
+    }
+    return '';
+}
+function evaluateDtExpressions(input, fn) {
+    if (input.indexOf('dt(') === -1)
+        return input;
+    function fastParseArgs(str, fn) {
+        const args = [];
+        let i = 0;
+        let current = '';
+        let quote = null;
+        let depth = 0;
+        while (i <= str.length) {
+            const c = str[i];
+            if ((c === '"' || c === "'" || c === '`') && str[i - 1] !== '\\') {
+                quote = quote === c ? null : c;
+            }
+            if (!quote) {
+                if (c === '(')
+                    depth++;
+                if (c === ')')
+                    depth--;
+                if ((c === ',' || i === str.length) && depth === 0) {
+                    const arg = current.trim();
+                    if (arg.startsWith('dt(')) {
+                        args.push(evaluateDtExpressions(arg, fn));
+                    }
+                    else {
+                        args.push(parseArg(arg));
+                    }
+                    current = '';
+                    i++;
+                    continue;
+                }
+            }
+            if (c !== undefined)
+                current += c;
+            i++;
+        }
+        return args;
+    }
+    function parseArg(arg) {
+        const q = arg[0];
+        if ((q === '"' || q === "'" || q === '`') && arg[arg.length - 1] === q) {
+            return arg.slice(1, -1);
+        }
+        const num = Number(arg);
+        return isNaN(num) ? arg : num;
+    }
+    const indices = [];
+    const stack = [];
+    for (let i = 0; i < input.length; i++) {
+        if (input[i] === 'd' && input.slice(i, i + 3) === 'dt(') {
+            stack.push(i);
+            i += 2;
+        }
+        else if (input[i] === ')' && stack.length > 0) {
+            const start = stack.pop();
+            if (stack.length === 0) {
+                indices.push([start, i]);
+            }
+        }
+    }
+    if (!indices.length)
+        return input;
+    for (let i = indices.length - 1; i >= 0; i--) {
+        const [start, end] = indices[i];
+        const inner = input.slice(start + 3, end);
+        const args = fastParseArgs(inner, fn);
+        const resolved = fn(...args);
+        input = input.slice(0, start) + resolved + input.slice(end + 1);
+    }
+    return input;
+}
+
+function normalizeColor(color) {
+    if (color.length === 4) {
+        return `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`;
+    }
+    return color;
+}
+function hexToRgb(hex) {
+    const bigint = parseInt(hex.substring(1), 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    return { r, g, b };
+}
+function rgbToHex(r, g, b) {
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+var mix = (color1, color2, weight) => {
+    color1 = normalizeColor(color1);
+    color2 = normalizeColor(color2);
+    const p = weight / 100;
+    const w = p * 2 - 1;
+    const w1 = (w + 1) / 2.0;
+    const w2 = 1 - w1;
+    const rgb1 = hexToRgb(color1);
+    const rgb2 = hexToRgb(color2);
+    const r = Math.round(rgb1.r * w1 + rgb2.r * w2);
+    const g = Math.round(rgb1.g * w1 + rgb2.g * w2);
+    const b = Math.round(rgb1.b * w1 + rgb2.b * w2);
+    return rgbToHex(r, g, b);
+};
+
+var shade = (color, percent) => mix('#000000', color, percent);
+
+var tint = (color, percent) => mix('#ffffff', color, percent);
+
+const scales = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+var palette = (color) => {
+    if (matchRegex(color, EXPR_REGEX)) {
+        const token = color.replace(/{|}/g, '');
+        return scales.reduce((acc, scale) => {
+            acc[scale] = `{${token}.${scale}}`;
+            return acc;
+        }, {});
+    }
+    return typeof color === 'string'
+        ? scales.reduce((acc, scale, i) => {
+            acc[scale] = i <= 5 ? tint(color, (5 - i) * 19) : shade(color, (i - 5) * 15);
+            return acc;
+        }, {})
+        : color;
+};
+
+const $dt = (tokenPath) => {
+    const theme = Theme.getTheme();
+    const variable = dtwt(theme, tokenPath, undefined, 'variable');
+    const name = variable?.match(/--[\w-]+/g)?.[0];
+    const value = dtwt(theme, tokenPath, undefined, 'value');
+    return {
+        name,
+        variable,
+        value
+    };
+};
+const dt = (...args) => {
+    return dtwt(Theme.getTheme(), ...args);
+};
+const dtwt = (theme = {}, tokenPath, fallback, type) => {
+    if (tokenPath) {
+        const { variable: VARIABLE, options: OPTIONS } = Theme.defaults || {};
+        const { prefix, transform } = theme?.options || OPTIONS || {};
+        const token = matchRegex(tokenPath, EXPR_REGEX) ? tokenPath : `{${tokenPath}}`;
+        const isStrictTransform = type === 'value' || (isEmpty(type) && transform === 'strict'); // @todo - TRANSFORM: strict | lenient(default)
+        return isStrictTransform ? Theme.getTokenValue(tokenPath) : getVariableValue(token, undefined, prefix, [VARIABLE.excludedKeyRegex], fallback);
+    }
+    return '';
+};
+
+function css(strings, ...exprs) {
+    if (strings instanceof Array) {
+        const raw = strings.reduce((acc, str, i) => acc + str + (resolve(exprs[i], { dt }) ?? ''), '');
+        return evaluateDtExpressions(raw, dt);
+    }
+    return resolve(strings, { dt });
+}
+
+const $t = (theme = {}) => {
+    let { preset: _preset, options: _options } = theme;
+    return {
+        preset(value) {
+            _preset = _preset ? mergeKeys(_preset, value) : value;
+            return this;
+        },
+        options(value) {
+            _options = _options ? { ..._options, ...value } : value;
+            return this;
+        },
+        // features
+        primaryPalette(primary) {
+            const { semantic } = _preset || {};
+            _preset = { ..._preset, semantic: { ...semantic, primary } };
+            return this;
+        },
+        surfacePalette(surface) {
+            const { semantic } = _preset || {};
+            const lightSurface = surface && Object.hasOwn(surface, 'light') ? surface.light : surface;
+            const darkSurface = surface && Object.hasOwn(surface, 'dark') ? surface.dark : surface;
+            const newColorScheme = {
+                colorScheme: {
+                    light: { ...semantic?.colorScheme?.light, ...(!!lightSurface && { surface: lightSurface }) },
+                    dark: { ...semantic?.colorScheme?.dark, ...(!!darkSurface && { surface: darkSurface }) }
+                }
+            };
+            _preset = { ..._preset, semantic: { ...semantic, ...newColorScheme } };
+            return this;
+        },
+        // actions
+        define({ useDefaultPreset = false, useDefaultOptions = false } = {}) {
+            return {
+                preset: useDefaultPreset ? Theme.getPreset() : _preset,
+                options: useDefaultOptions ? Theme.getOptions() : _options
+            };
+        },
+        update({ mergePresets = true, mergeOptions = true } = {}) {
+            const newTheme = {
+                preset: mergePresets ? mergeKeys(Theme.getPreset(), _preset) : _preset,
+                options: mergeOptions ? { ...Theme.getOptions(), ..._options } : _options
+            };
+            Theme.setTheme(newTheme);
+            return newTheme;
+        },
+        use(options) {
+            const newTheme = this.define(options);
+            Theme.setTheme(newTheme);
+            return newTheme;
+        }
+    };
+};
+
+function toVariables (theme, options = {}) {
+    const VARIABLE = Theme.defaults.variable;
+    const { prefix = VARIABLE.prefix, selector = VARIABLE.selector, excludedKeyRegex = VARIABLE.excludedKeyRegex } = options;
+    const tokens = [];
+    const variables = [];
+    const stack = [{ node: theme, path: prefix }];
+    while (stack.length) {
+        const { node, path } = stack.pop();
+        for (const key in node) {
+            const raw = node[key];
+            const val = toValue(raw);
+            const skipNormalize = matchRegex(key, excludedKeyRegex);
+            const variablePath = skipNormalize ? toNormalizeVariable(path) : toNormalizeVariable(path, toKebabCase(key));
+            if (isObject(val)) {
+                stack.push({ node: val, path: variablePath });
+            }
+            else {
+                const varName = getVariableName(variablePath);
+                const varValue = getVariableValue(val, variablePath, prefix, [excludedKeyRegex]);
+                setProperty(variables, varName, varValue);
+                let token = variablePath;
+                if (prefix && token.startsWith(prefix + '-')) {
+                    token = token.slice(prefix.length + 1);
+                }
+                tokens.push(token.replace(/-/g, '.'));
+            }
+        }
+    }
+    const declarations = variables.join('');
+    return {
+        value: variables,
+        tokens,
+        declarations,
+        css: getRule(selector, declarations)
+    };
+}
+
+var ThemeUtils = {
+    regex: {
+        rules: {
+            class: {
+                pattern: /^\.([a-zA-Z][\w-]*)$/,
+                resolve(value) {
+                    return { type: 'class', selector: value, matched: this.pattern.test(value.trim()) };
+                }
+            },
+            attr: {
+                pattern: /^\[(.*)\]$/,
+                resolve(value) {
+                    return { type: 'attr', selector: `:root${value},:host${value}`, matched: this.pattern.test(value.trim()) };
+                }
+            },
+            media: {
+                pattern: /^@media (.*)$/,
+                resolve(value) {
+                    return { type: 'media', selector: value, matched: this.pattern.test(value.trim()) };
+                }
+            },
+            system: {
+                pattern: /^system$/,
+                resolve(value) {
+                    return { type: 'system', selector: '@media (prefers-color-scheme: dark)', matched: this.pattern.test(value.trim()) };
+                }
+            },
+            custom: {
+                resolve(value) {
+                    return { type: 'custom', selector: value, matched: true };
+                }
+            }
+        },
+        resolve(value) {
+            const rules = Object.keys(this.rules)
+                .filter((k) => k !== 'custom')
+                .map((r) => this.rules[r]);
+            return [value].flat().map((v) => rules.map((r) => r.resolve(v)).find((rr) => rr.matched) ?? this.rules.custom.resolve(v));
+        }
+    },
+    _toVariables(theme, options) {
+        return toVariables(theme, { prefix: options?.prefix });
+    },
+    getCommon({ name = '', theme = {}, params, set, defaults }) {
+        const { preset, options } = theme;
+        let primitive_css, primitive_tokens, semantic_css, semantic_tokens, global_css, global_tokens, style;
+        // @todo - check if options is not empty
+        if (isNotEmpty(preset) && options.transform !== 'strict') {
+            const { primitive, semantic, extend } = preset;
+            const { colorScheme, ...sRest } = semantic || {};
+            const { colorScheme: eColorScheme, ...eRest } = extend || {};
+            const { dark, ...csRest } = colorScheme || {};
+            const { dark: eDark, ...ecsRest } = eColorScheme || {};
+            const prim_var = isNotEmpty(primitive) ? this._toVariables({ primitive }, options) : {};
+            const sRest_var = isNotEmpty(sRest) ? this._toVariables({ semantic: sRest }, options) : {};
+            const csRest_var = isNotEmpty(csRest) ? this._toVariables({ light: csRest }, options) : {};
+            const csDark_var = isNotEmpty(dark) ? this._toVariables({ dark }, options) : {};
+            const eRest_var = isNotEmpty(eRest) ? this._toVariables({ semantic: eRest }, options) : {};
+            const ecsRest_var = isNotEmpty(ecsRest) ? this._toVariables({ light: ecsRest }, options) : {};
+            const ecsDark_var = isNotEmpty(eDark) ? this._toVariables({ dark: eDark }, options) : {};
+            const [prim_css, prim_tokens] = [prim_var.declarations ?? '', prim_var.tokens];
+            const [sRest_css, sRest_tokens] = [sRest_var.declarations ?? '', sRest_var.tokens || []];
+            const [csRest_css, csRest_tokens] = [csRest_var.declarations ?? '', csRest_var.tokens || []];
+            const [csDark_css, csDark_tokens] = [csDark_var.declarations ?? '', csDark_var.tokens || []];
+            const [eRest_css, eRest_tokens] = [eRest_var.declarations ?? '', eRest_var.tokens || []];
+            const [ecsRest_css, ecsRest_tokens] = [ecsRest_var.declarations ?? '', ecsRest_var.tokens || []];
+            const [ecsDark_css, ecsDark_tokens] = [ecsDark_var.declarations ?? '', ecsDark_var.tokens || []];
+            primitive_css = this.transformCSS(name, prim_css, 'light', 'variable', options, set, defaults);
+            primitive_tokens = prim_tokens;
+            const semantic_light_css = this.transformCSS(name, `${sRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults);
+            const semantic_dark_css = this.transformCSS(name, `${csDark_css}`, 'dark', 'variable', options, set, defaults);
+            semantic_css = `${semantic_light_css}${semantic_dark_css}`;
+            semantic_tokens = [...new Set([...sRest_tokens, ...csRest_tokens, ...csDark_tokens])];
+            const global_light_css = this.transformCSS(name, `${eRest_css}${ecsRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults);
+            const global_dark_css = this.transformCSS(name, `${ecsDark_css}color-scheme:dark`, 'dark', 'variable', options, set, defaults);
+            global_css = `${global_light_css}${global_dark_css}`;
+            global_tokens = [...new Set([...eRest_tokens, ...ecsRest_tokens, ...ecsDark_tokens])];
+            style = resolve(preset.css, { dt });
+        }
+        return {
+            primitive: {
+                css: primitive_css,
+                tokens: primitive_tokens
+            },
+            semantic: {
+                css: semantic_css,
+                tokens: semantic_tokens
+            },
+            global: {
+                css: global_css,
+                tokens: global_tokens
+            },
+            style
+        };
+    },
+    getPreset({ name = '', preset = {}, options, params, set, defaults, selector }) {
+        let p_css, p_tokens, p_style;
+        if (isNotEmpty(preset) && options.transform !== 'strict') {
+            const _name = name.replace('-directive', '');
+            const { colorScheme, extend, css, ...vRest } = preset;
+            const { colorScheme: eColorScheme, ...evRest } = extend || {};
+            const { dark, ...csRest } = colorScheme || {};
+            const { dark: ecsDark, ...ecsRest } = eColorScheme || {};
+            const vRest_var = isNotEmpty(vRest) ? this._toVariables({ [_name]: { ...vRest, ...evRest } }, options) : {};
+            const csRest_var = isNotEmpty(csRest) ? this._toVariables({ [_name]: { ...csRest, ...ecsRest } }, options) : {};
+            const csDark_var = isNotEmpty(dark) ? this._toVariables({ [_name]: { ...dark, ...ecsDark } }, options) : {};
+            const [vRest_css, vRest_tokens] = [vRest_var.declarations ?? '', vRest_var.tokens || []];
+            const [csRest_css, csRest_tokens] = [csRest_var.declarations ?? '', csRest_var.tokens || []];
+            const [csDark_css, csDark_tokens] = [csDark_var.declarations ?? '', csDark_var.tokens || []];
+            const light_variable_css = this.transformCSS(_name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults, selector);
+            const dark_variable_css = this.transformCSS(_name, csDark_css, 'dark', 'variable', options, set, defaults, selector);
+            p_css = `${light_variable_css}${dark_variable_css}`;
+            p_tokens = [...new Set([...vRest_tokens, ...csRest_tokens, ...csDark_tokens])];
+            p_style = resolve(css, { dt });
+        }
+        return {
+            css: p_css,
+            tokens: p_tokens,
+            style: p_style
+        };
+    },
+    getPresetC({ name = '', theme = {}, params, set, defaults }) {
+        const { preset, options } = theme;
+        const cPreset = preset?.components?.[name];
+        return this.getPreset({ name, preset: cPreset, options, params, set, defaults });
+    },
+    // @deprecated - use getPresetC instead
+    getPresetD({ name = '', theme = {}, params, set, defaults }) {
+        const dName = name.replace('-directive', '');
+        const { preset, options } = theme;
+        const dPreset = preset?.components?.[dName] || preset?.directives?.[dName];
+        return this.getPreset({ name: dName, preset: dPreset, options, params, set, defaults });
+    },
+    applyDarkColorScheme(options) {
+        return !(options.darkModeSelector === 'none' || options.darkModeSelector === false);
+    },
+    getColorSchemeOption(options, defaults) {
+        return this.applyDarkColorScheme(options) ? this.regex.resolve(options.darkModeSelector === true ? defaults.options.darkModeSelector : (options.darkModeSelector ?? defaults.options.darkModeSelector)) : [];
+    },
+    getLayerOrder(name, options = {}, params, defaults) {
+        const { cssLayer } = options;
+        if (cssLayer) {
+            const order = resolve(cssLayer.order || cssLayer.name || 'primeui', params);
+            return `@layer ${order}`;
+        }
+        return '';
+    },
+    getCommonStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
+        const common = this.getCommon({ name, theme, params, set, defaults });
+        const _props = Object.entries(props)
+            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
+            .join(' ');
+        return Object.entries(common || {})
+            .reduce((acc, [key, value]) => {
+            if (isObject(value) && Object.hasOwn(value, 'css')) {
+                const _css = minifyCSS(value.css);
+                const id = `${key}-variables`;
+                acc.push(`<style type="text/css" data-primevue-style-id="${id}" ${_props}>${_css}</style>`); // @todo data-primevue -> data-primeui check in primevue usestyle
+            }
+            return acc;
+        }, [])
+            .join('');
+    },
+    getStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
+        const options = { name, theme, params, set, defaults };
+        const preset_css = (name.includes('-directive') ? this.getPresetD(options) : this.getPresetC(options))?.css;
+        const _props = Object.entries(props)
+            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
+            .join(' ');
+        return preset_css ? `<style type="text/css" data-primevue-style-id="${name}-variables" ${_props}>${minifyCSS(preset_css)}</style>` : ''; // @todo check
+    },
+    createTokens(obj = {}, defaults, parentKey = '', parentPath = '', tokens = {}) {
+        const computedFn = function (colorScheme, tokenPathMap = {}, stack = []) {
+            if (stack.includes(this.path)) {
+                console.warn(`Circular reference detected at ${this.path}`);
+                return {
+                    colorScheme,
+                    path: this.path,
+                    paths: tokenPathMap,
+                    value: undefined
+                };
+            }
+            stack.push(this.path);
+            tokenPathMap['name'] = this.path;
+            tokenPathMap['binding'] ||= {};
+            let computedValue = this.value;
+            if (typeof this.value === 'string' && EXPR_REGEX.test(this.value)) {
+                const val = this.value.trim();
+                const _val = val.replace(EXPR_REGEX, (v) => {
+                    const refPath = v.slice(1, -1);
+                    const refToken = this.tokens[refPath];
+                    if (!refToken) {
+                        console.warn(`Token not found for path: ${refPath}`);
+                        return `__UNRESOLVED__`;
+                    }
+                    const computed = refToken.computed(colorScheme, tokenPathMap, stack);
+                    if (Array.isArray(computed) && computed.length === 2) {
+                        return `light-dark(${computed[0].value},${computed[1].value})`;
+                    }
+                    else {
+                        return computed?.value ?? `__UNRESOLVED__`;
+                    }
+                });
+                computedValue = CALC_REGEX.test(_val.replace(VAR_REGEX, '0')) ? `calc(${_val})` : _val;
+            }
+            if (isEmpty(tokenPathMap['binding'])) {
+                delete tokenPathMap['binding'];
+            }
+            stack.pop();
+            return {
+                colorScheme,
+                path: this.path,
+                paths: tokenPathMap,
+                value: computedValue.includes('__UNRESOLVED__') ? undefined : computedValue
+            };
+        };
+        const traverse = (obj, parentKey, parentPath) => {
+            Object.entries(obj).forEach(([key, value]) => {
+                const currentKey = matchRegex(key, defaults.variable.excludedKeyRegex) ? parentKey : parentKey ? `${parentKey}.${toTokenKey(key)}` : toTokenKey(key);
+                const currentPath = parentPath ? `${parentPath}.${key}` : key;
+                if (isObject(value)) {
+                    traverse(value, currentKey, currentPath);
+                }
+                else {
+                    if (!tokens[currentKey]) {
+                        tokens[currentKey] = {
+                            paths: [],
+                            computed: (colorScheme, tokenPathMap = {}, stack = []) => {
+                                if (tokens[currentKey].paths.length === 1) {
+                                    return tokens[currentKey].paths[0].computed(tokens[currentKey].paths[0].scheme, tokenPathMap['binding'], stack);
+                                }
+                                else if (colorScheme && colorScheme !== 'none') {
+                                    for (let i = 0; i < tokens[currentKey].paths.length; i++) {
+                                        const p = tokens[currentKey].paths[i];
+                                        if (p.scheme === colorScheme) {
+                                            return p.computed(colorScheme, tokenPathMap['binding'], stack);
+                                        }
+                                    }
+                                }
+                                return tokens[currentKey].paths.map((p) => p.computed(p.scheme, tokenPathMap[p.scheme], stack));
+                            }
+                        };
+                    }
+                    tokens[currentKey].paths.push({
+                        path: currentPath,
+                        value,
+                        scheme: currentPath.includes('colorScheme.light') ? 'light' : currentPath.includes('colorScheme.dark') ? 'dark' : 'none',
+                        computed: computedFn,
+                        tokens
+                    });
+                }
+            });
+        };
+        traverse(obj, parentKey, parentPath);
+        return tokens;
+    },
+    getTokenValue(tokens, path, defaults) {
+        const normalizePath = (str) => {
+            const strArr = str.split('.');
+            return strArr.filter((s) => !matchRegex(s.toLowerCase(), defaults.variable.excludedKeyRegex)).join('.');
+        };
+        const token = normalizePath(path);
+        const colorScheme = path.includes('colorScheme.light') ? 'light' : path.includes('colorScheme.dark') ? 'dark' : undefined;
+        const computedValues = [tokens[token]?.computed(colorScheme)].flat().filter((computed) => computed);
+        return computedValues.length === 1
+            ? computedValues[0].value
+            : computedValues.reduce((acc = {}, computed) => {
+                const { colorScheme: cs, ...rest } = computed;
+                acc[cs] = rest;
+                return acc;
+            }, undefined);
+    },
+    getSelectorRule(selector1, selector2, type, css) {
+        return type === 'class' || type === 'attr' ? getRule(isNotEmpty(selector2) ? `${selector1}${selector2},${selector1} ${selector2}` : selector1, css) : getRule(selector1, getRule(selector2 ?? ':root,:host', css));
+    },
+    transformCSS(name, css, mode, type, options = {}, set, defaults, selector) {
+        if (isNotEmpty(css)) {
+            const { cssLayer } = options;
+            if (type !== 'style') {
+                const colorSchemeOption = this.getColorSchemeOption(options, defaults);
+                css =
+                    mode === 'dark'
+                        ? colorSchemeOption.reduce((acc, { type, selector: _selector }) => {
+                            if (isNotEmpty(_selector)) {
+                                acc += _selector.includes('[CSS]') ? _selector.replace('[CSS]', css) : this.getSelectorRule(_selector, selector, type, css);
+                            }
+                            return acc;
+                        }, '')
+                        : getRule(selector ?? ':root,:host', css);
+            }
+            if (cssLayer) {
+                const layerOptions = {
+                    name: 'primeui',
+                    order: 'primeui'
+                };
+                isObject(cssLayer) && (layerOptions.name = resolve(cssLayer.name, { name, type }));
+                if (isNotEmpty(layerOptions.name)) {
+                    css = getRule(`@layer ${layerOptions.name}`, css);
+                    set?.layerNames(layerOptions.name);
+                }
+            }
+            return css;
+        }
+        return '';
+    }
+};
+
+var Theme = {
+    defaults: {
+        variable: {
+            prefix: 'h',
+            selector: ':root,:host',
+            excludedKeyRegex: /^(primitive|semantic|components|directives|variables|colorscheme|light|dark|common|root|states|extend|css)$/gi
+        },
+        options: {
+            prefix: 'h',
+            darkModeSelector: 'system',
+            cssLayer: false
+        }
+    },
+    _theme: undefined,
+    _layerNames: new Set(),
+    _loadedStyleNames: new Set(),
+    _loadingStyles: new Set(),
+    _tokens: {},
+    update(newValues = {}) {
+        const { theme } = newValues;
+        if (theme) {
+            this._theme = {
+                ...theme,
+                options: {
+                    ...this.defaults.options,
+                    ...theme.options
+                }
+            };
+            this._tokens = ThemeUtils.createTokens(this.preset, this.defaults);
+            this.clearLoadedStyleNames();
+        }
+    },
+    get theme() {
+        return this._theme;
+    },
+    get preset() {
+        return this.theme?.preset || {};
+    },
+    get options() {
+        return this.theme?.options || {};
+    },
+    get tokens() {
+        return this._tokens;
+    },
+    getTheme() {
+        return this.theme;
+    },
+    setTheme(newValue) {
+        this.update({ theme: newValue });
+        ThemeService.emit('theme:change', newValue);
+    },
+    getPreset() {
+        return this.preset;
+    },
+    setPreset(newValue) {
+        this._theme = { ...this.theme, preset: newValue };
+        this._tokens = ThemeUtils.createTokens(newValue, this.defaults);
+        this.clearLoadedStyleNames();
+        ThemeService.emit('preset:change', newValue);
+        ThemeService.emit('theme:change', this.theme);
+    },
+    getOptions() {
+        return this.options;
+    },
+    setOptions(newValue) {
+        this._theme = { ...this.theme, options: newValue };
+        this.clearLoadedStyleNames();
+        ThemeService.emit('options:change', newValue);
+        ThemeService.emit('theme:change', this.theme);
+    },
+    getLayerNames() {
+        return [...this._layerNames];
+    },
+    setLayerNames(layerName) {
+        this._layerNames.add(layerName);
+    },
+    getLoadedStyleNames() {
+        return this._loadedStyleNames;
+    },
+    isStyleNameLoaded(name) {
+        return this._loadedStyleNames.has(name);
+    },
+    setLoadedStyleName(name) {
+        this._loadedStyleNames.add(name);
+    },
+    deleteLoadedStyleName(name) {
+        this._loadedStyleNames.delete(name);
+    },
+    clearLoadedStyleNames() {
+        this._loadedStyleNames.clear();
+    },
+    getTokenValue(tokenPath) {
+        return ThemeUtils.getTokenValue(this.tokens, tokenPath, this.defaults);
+    },
+    getCommon(name = '', params) {
+        return ThemeUtils.getCommon({ name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
+    },
+    getComponent(name = '', params) {
+        const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
+        return ThemeUtils.getPresetC(options);
+    },
+    // @deprecated - use getComponent instead
+    getDirective(name = '', params) {
+        const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
+        return ThemeUtils.getPresetD(options);
+    },
+    getCustomPreset(name = '', preset, selector, params) {
+        const options = { name, preset, options: this.options, selector, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
+        return ThemeUtils.getPreset(options);
+    },
+    getLayerOrderCSS(name = '') {
+        return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults);
+    },
+    transformCSS(name = '', css, type = 'style', mode) {
+        return ThemeUtils.transformCSS(name, css, mode, type, this.options, { layerNames: this.setLayerNames.bind(this) }, this.defaults);
+    },
+    getCommonStyleSheet(name = '', params, props = {}) {
+        return ThemeUtils.getCommonStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
+    },
+    getStyleSheet(name, params, props = {}) {
+        return ThemeUtils.getStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
+    },
+    onStyleMounted(name) {
+        this._loadingStyles.add(name);
+    },
+    onStyleUpdated(name) {
+        this._loadingStyles.add(name);
+    },
+    onStyleLoaded(event, { name }) {
+        if (this._loadingStyles.size) {
+            this._loadingStyles.delete(name);
+            ThemeService.emit(`theme:${name}:load`, event); // Exp: ThemeService.emit('theme:panel-style:load', event)
+            !this._loadingStyles.size && ThemeService.emit('theme:load');
+        }
+    }
+};
+
+function updatePreset(...presets) {
+    const newPreset = deepMerge(Theme.getPreset(), ...presets);
+    Theme.setPreset(newPreset);
+    return newPreset;
+}
+
+function updatePrimaryPalette(palette) {
+    return $t().primaryPalette(palette).update().preset;
+}
+
+function updateSurfacePalette(palette) {
+    return $t().surfacePalette(palette).update().preset;
+}
+
+function usePreset(...presets) {
+    const newPreset = deepMerge(...presets);
+    Theme.setPreset(newPreset);
+    return newPreset;
+}
+
+function useTheme(theme) {
+    return $t(theme).update({ mergePresets: false });
+}
+
+class StyleSheet {
+    _styles;
+    _attrs;
+    constructor({ attrs } = {}) {
+        this._styles = new Map();
+        this._attrs = attrs || {};
+    }
+    get(key) {
+        return this._styles.get(key);
+    }
+    has(key) {
+        return this._styles.has(key);
+    }
+    delete(key) {
+        this._styles.delete(key);
+    }
+    clear() {
+        this._styles.clear();
+    }
+    add(key, css) {
+        if (isNotEmpty(css)) {
+            const meta = {
+                name: key,
+                css,
+                attrs: this._attrs,
+                markup: createStyleMarkup(css, this._attrs)
+            };
+            this._styles.set(key, {
+                ...meta,
+                element: this.createStyleElement(meta)
+            });
+        }
+    }
+    update() {
+        // @todo
+    }
+    getStyles() {
+        return this._styles;
+    }
+    getAllCSS() {
+        return [...this._styles.values()].map((style) => style.css).filter(String);
+    }
+    getAllMarkup() {
+        return [...this._styles.values()].map((style) => style.markup).filter(String);
+    }
+    getAllElements() {
+        return [...this._styles.values()].map((style) => style.element);
+    }
+    /**
+     * Used to create a style element.
+     *
+     * @param {StyleMeta} meta
+     * @returns {HTMLStyleElement | undefined}
+     */
+    createStyleElement(meta = {}) {
+        return undefined;
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { $dt, $t, CALC_REGEX, EXPR_REGEX, StyleSheet, Theme, ThemeService, ThemeUtils, VAR_REGEX, css, definePreset, dt, dtwt, evaluateDtExpressions, getComputedValue, getRule, getVariableName, getVariableValue, hasOddBraces, merge, mix, palette, setProperty, shade, tint, toNormalizePrefix, toNormalizeVariable, toTokenKey, toUnit, toValue, toVariables, updatePreset, updatePrimaryPalette, updateSurfacePalette, usePreset, useTheme };
+//# sourceMappingURL=gravionlabs-helix-core-uix-styled.mjs.map