@cube-dev/ui-kit 0.0.0-canary-fb25bb9 → 0.0.0-canary-b3fb84f

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fb25bb9
+ * @cube-dev/ui-kit v0.0.0-canary-b3fb84f
  * Released under the MIT license.
  */
 
@@ -9,6 +9,7 @@
  * Style injector that works with structured style objects
  * Eliminates CSS string parsing for better performance
  */
+import { Component } from 'react';
 // Simple CSS text to StyleResult converter for injectGlobal backward compatibility
 import { SheetManager } from './sheet-manager';
 /**
@@ -78,17 +79,37 @@ export class StyleInjector {
             ? generatedClass
             : generateClassName(registry.classCounter++);
         // If a different pre-extracted class was used in rules, rewrite selectors to the final class
+        // Also increase specificity for class-based selectors by duplicating the class
         const rulesToInsert = generatedClass && generatedClass !== className
             ? rules.map((r) => {
                 if (r.selector.startsWith('.' + generatedClass)) {
+                    const newSelector = '.' + className + r.selector.slice(generatedClass.length + 1);
+                    // Increase specificity by duplicating the class for class-based selectors
+                    const specificSelector = newSelector.startsWith('.' + className) &&
+                        /^\.t\d+/.test(newSelector)
+                        ? '.' + className + newSelector
+                        : newSelector;
                     return {
                         ...r,
-                        selector: '.' + className + r.selector.slice(generatedClass.length + 1),
+                        selector: specificSelector,
                     };
                 }
                 return r;
             })
-            : rules;
+            : rules.map((r) => {
+                // Increase specificity for class-based selectors by duplicating the class
+                if (r.selector.startsWith('.') && /^\.t\d+/.test(r.selector)) {
+                    const classMatch = r.selector.match(/^\.t\d+/);
+                    if (classMatch) {
+                        const baseClass = classMatch[0];
+                        return {
+                            ...r,
+                            selector: baseClass + r.selector,
+                        };
+                    }
+                }
+                return r;
+            });
         // Insert rules using existing sheet manager
         const ruleInfo = this.sheetManager.insertRule(registry, rulesToInsert, className, root);
         if (!ruleInfo) {
@@ -322,6 +343,235 @@ export class StyleInjector {
         const targetRoot = root || document;
         this.sheetManager.cleanup(targetRoot);
     }
+    /**
+     * Create a global style component like styled-components createGlobalStyle
+     * Returns a React component that injects global styles when mounted and cleans up when unmounted
+     */
+    createGlobalStyle(strings, ...interpolations) {
+        const injector = this; // Capture the injector instance
+        class GlobalStyleComponent extends Component {
+            disposeFunction = null;
+            componentDidMount() {
+                this.injectStyles();
+            }
+            componentDidUpdate() {
+                this.disposeStyles();
+                this.injectStyles();
+            }
+            componentWillUnmount() {
+                this.disposeStyles();
+            }
+            injectStyles = () => {
+                const css = this.interpolateTemplate();
+                if (css.trim()) {
+                    const styleResults = this.parseCSSToStyleResults(css);
+                    // Bind the inject method to the outer injector instance
+                    const result = injector.inject(styleResults, {
+                        root: this.props.root,
+                    });
+                    this.disposeFunction = result.dispose;
+                }
+            };
+            disposeStyles = () => {
+                if (this.disposeFunction) {
+                    this.disposeFunction();
+                    this.disposeFunction = null;
+                }
+            };
+            interpolateTemplate = () => {
+                let result = strings[0];
+                for (let i = 0; i < interpolations.length; i++) {
+                    const interpolation = interpolations[i];
+                    const value = typeof interpolation === 'function'
+                        ? interpolation(this.props)
+                        : interpolation;
+                    result += String(value) + strings[i + 1];
+                }
+                return result;
+            };
+            parseCSSToStyleResults = (css) => {
+                const rules = [];
+                // Enhanced CSS parser for global styles that handles nested rules
+                this.parseCSS(css, rules, [], '');
+                return rules;
+            };
+            parseCSS = (css, rules, atRuleStack, parentSelector = '') => {
+                // Remove both CSS and JavaScript-style comments
+                let cleanCSS = css.replace(/\/\*[\s\S]*?\*\//g, ''); // CSS comments
+                cleanCSS = cleanCSS.replace(/\/\/.*$/gm, ''); // JavaScript-style comments
+                let i = 0;
+                while (i < cleanCSS.length) {
+                    // Skip whitespace
+                    while (i < cleanCSS.length && /\s/.test(cleanCSS[i])) {
+                        i++;
+                    }
+                    if (i >= cleanCSS.length)
+                        break;
+                    // Find the next selector or at-rule
+                    let selectorStart = i;
+                    let braceDepth = 0;
+                    let inString = false;
+                    let stringChar = '';
+                    // Find the opening brace
+                    while (i < cleanCSS.length) {
+                        const char = cleanCSS[i];
+                        if (inString) {
+                            if (char === stringChar && cleanCSS[i - 1] !== '\\') {
+                                inString = false;
+                            }
+                        }
+                        else {
+                            if (char === '"' || char === "'") {
+                                inString = true;
+                                stringChar = char;
+                            }
+                            else if (char === '{') {
+                                braceDepth++;
+                                if (braceDepth === 1) {
+                                    break; // Found the opening brace
+                                }
+                            }
+                            else if (char === '}') {
+                                braceDepth--;
+                            }
+                        }
+                        i++;
+                    }
+                    if (i >= cleanCSS.length)
+                        break;
+                    const selectorPart = cleanCSS.substring(selectorStart, i).trim();
+                    i++; // Skip the opening brace
+                    // Find the matching closing brace
+                    const contentStart = i;
+                    braceDepth = 1;
+                    inString = false;
+                    while (i < cleanCSS.length && braceDepth > 0) {
+                        const char = cleanCSS[i];
+                        if (inString) {
+                            if (char === stringChar && cleanCSS[i - 1] !== '\\') {
+                                inString = false;
+                            }
+                        }
+                        else {
+                            if (char === '"' || char === "'") {
+                                inString = true;
+                                stringChar = char;
+                            }
+                            else if (char === '{') {
+                                braceDepth++;
+                            }
+                            else if (char === '}') {
+                                braceDepth--;
+                            }
+                        }
+                        i++;
+                    }
+                    const content = cleanCSS.substring(contentStart, i - 1).trim();
+                    // Check if this is an at-rule
+                    if (selectorPart.startsWith('@')) {
+                        // This is an at-rule, recursively parse its content
+                        const newAtRuleStack = [...atRuleStack, selectorPart];
+                        this.parseCSS(content, rules, newAtRuleStack, parentSelector);
+                    }
+                    else {
+                        // Check if content contains nested rules (has { and })
+                        if (content.includes('{') && content.includes('}')) {
+                            // This selector has nested rules, parse them
+                            const { declarations, nestedCSS } = this.separateDeclarationsAndNested(content);
+                            // Process the selector (handle & syntax)
+                            const processedSelector = this.processSelector(selectorPart, parentSelector);
+                            // Add declarations if any
+                            if (declarations.trim()) {
+                                rules.push({
+                                    selector: processedSelector,
+                                    declarations: declarations.trim(),
+                                    atRules: atRuleStack.length > 0 ? [...atRuleStack] : undefined,
+                                });
+                            }
+                            // Parse nested CSS with current selector as parent
+                            if (nestedCSS.trim()) {
+                                this.parseCSS(nestedCSS, rules, atRuleStack, processedSelector);
+                            }
+                        }
+                        else {
+                            // This is a regular selector with only declarations
+                            const processedSelector = this.processSelector(selectorPart, parentSelector);
+                            if (content && processedSelector) {
+                                rules.push({
+                                    selector: processedSelector,
+                                    declarations: content,
+                                    atRules: atRuleStack.length > 0 ? [...atRuleStack] : undefined,
+                                });
+                            }
+                        }
+                    }
+                }
+            };
+            separateDeclarationsAndNested = (content) => {
+                const declarations = [];
+                const nestedRules = [];
+                let i = 0;
+                let currentDeclaration = '';
+                while (i < content.length) {
+                    const char = content[i];
+                    if (char === '{') {
+                        // Found start of nested rule, find the selector before it
+                        let selectorStart = currentDeclaration.lastIndexOf(';') + 1;
+                        if (selectorStart === 0 && currentDeclaration.trim()) {
+                            // No semicolon found, this might be the first rule
+                            selectorStart = 0;
+                        }
+                        const beforeBrace = currentDeclaration.substring(0, selectorStart);
+                        const selector = currentDeclaration.substring(selectorStart).trim();
+                        if (beforeBrace.trim()) {
+                            declarations.push(beforeBrace.trim());
+                        }
+                        // Find the matching closing brace
+                        let braceDepth = 1;
+                        let ruleStart = i + 1;
+                        i++; // Skip opening brace
+                        while (i < content.length && braceDepth > 0) {
+                            if (content[i] === '{')
+                                braceDepth++;
+                            else if (content[i] === '}')
+                                braceDepth--;
+                            i++;
+                        }
+                        const ruleContent = content.substring(ruleStart, i - 1);
+                        nestedRules.push(`${selector} { ${ruleContent} }`);
+                        currentDeclaration = '';
+                    }
+                    else {
+                        currentDeclaration += char;
+                        i++;
+                    }
+                }
+                // Add remaining declarations
+                if (currentDeclaration.trim()) {
+                    declarations.push(currentDeclaration.trim());
+                }
+                return {
+                    declarations: declarations.join(' '),
+                    nestedCSS: nestedRules.join('\n'),
+                };
+            };
+            processSelector = (selector, parentSelector) => {
+                if (!parentSelector) {
+                    return selector;
+                }
+                // Handle & syntax - replace & with parent selector
+                if (selector.includes('&')) {
+                    return selector.replace(/&/g, parentSelector);
+                }
+                // If no &, treat as descendant selector
+                return `${parentSelector} ${selector}`;
+            };
+            render() {
+                return null;
+            }
+        }
+        return GlobalStyleComponent;
+    }
 }
 
         

package/es/tasty/injector/sheet-manager.js

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

package/es/tasty/injector/types.js

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

package/es/tasty/parser/classify.js

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

package/es/tasty/parser/const.js

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

package/es/tasty/parser/lru.js

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

package/es/tasty/parser/parser.js

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

package/es/tasty/parser/tokenizer.js

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

package/es/tasty/parser/types.js

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

package/es/tasty/providers/BreakpointsProvider.js

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

package/es/tasty/styles/align.js

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

package/es/tasty/styles/border.js

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

package/es/tasty/styles/boxShadow.combinator.js

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

package/es/tasty/styles/color.js

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

package/es/tasty/styles/createStyle.js

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

package/es/tasty/styles/dimension.js

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

package/es/tasty/styles/display.js

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

package/es/tasty/styles/fade.js

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

package/es/tasty/styles/fill.js

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

package/es/tasty/styles/flow.js

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

package/es/tasty/styles/font.js

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

package/es/tasty/styles/fontStyle.js

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

package/es/tasty/styles/gap.js

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

package/es/tasty/styles/groupRadius.js

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

package/es/tasty/styles/height.js

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

package/es/tasty/styles/index.js

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

package/es/tasty/styles/inset.js

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

package/es/tasty/styles/justify.js

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

package/es/tasty/styles/list.js

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

package/es/tasty/styles/margin.js

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

package/es/tasty/styles/marginBlock.js

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

package/es/tasty/styles/marginInline.js

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

package/es/tasty/styles/outline.js

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

package/es/tasty/styles/padding.js

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

package/es/tasty/styles/paddingBlock.js

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

package/es/tasty/styles/paddingInline.js

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

package/es/tasty/styles/place.js

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

package/es/tasty/styles/predefined.js

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