@cube-dev/ui-kit 0.0.0-canary-da0f894 → 0.0.0-canary-364ff16

package/es/stories/Form.legacy-stories.js

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

package/es/stories/FormFieldArgs.js

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

package/es/stories/SimpleLayout.stories.js

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

package/es/stories/Tasty.stories.js

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

package/es/stories/components/ConfirmDeletionDialogForm.js

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

package/es/stories/components/DialogFormApp.js

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

package/es/stories/components/StyledButton.js

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

package/es/stories/lists/baseProps.js

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

package/es/tasty/chunks/cacheKey.js

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

package/es/tasty/chunks/definitions.js

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

package/es/tasty/chunks/index.js

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

package/es/tasty/chunks/renderChunk.js

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

package/es/tasty/config.js

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

package/es/tasty/debug.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-da0f894
+ * @cube-dev/ui-kit v0.0.0-canary-364ff16
  * Released under the MIT license.
  */
 
@@ -758,7 +758,7 @@ export const tastyDebug = {
             console.log(`  • Active CSS: ${summary.activeCSSSize} characters`);
             console.log(`  • Unused CSS: ${summary.unusedCSSSize} characters`);
             console.log(`  • Global CSS (injectGlobal): ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`);
-            console.log(`  • Raw CSS (createGlobalStyle): ${summary.rawCSSSize} characters (${summary.rawRuleCount} rules)`);
+            console.log(`  • Raw CSS (injectRawCSS/useRawCSS): ${summary.rawCSSSize} characters (${summary.rawRuleCount} rules)`);
             console.log(`  • Keyframes CSS: ${summary.keyframesCSSSize} characters (${summary.keyframesRuleCount} rules)`);
             console.log(`  • Property CSS: ${summary.propertyCSSSize} characters (${summary.propertyRuleCount} rules)`);
             // Show breakdown calculation
@@ -932,7 +932,7 @@ export const tastyDebug = {
         console.log('  • "all" - all tasty CSS + global CSS');
         console.log('  • "active" - CSS for classes in DOM');
         console.log('  • "unused" - CSS for classes with refCount = 0');
-        console.log('  • "global" - only global CSS (createGlobalStyle)');
+        console.log('  • "global" - only global CSS (injectGlobal)');
         console.log('  • "page" - ALL page CSS (including non-tasty)');
         console.log('  • "t123" - specific tasty class');
         console.log('  • [".my-selector"] - CSS selector');

package/es/tasty/hooks/index.js

@@ -1,11 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-da0f894
+ * @cube-dev/ui-kit v0.0.0-canary-364ff16
  * Released under the MIT license.
  */
 
 export { useStyles } from './useStyles';
 export { useGlobalStyles } from './useGlobalStyles';
+export { useRawCSS } from './useRawCSS';
 
         

package/es/tasty/hooks/useGlobalStyles.js

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

package/es/tasty/hooks/useRawCSS.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-364ff16
+ * Released under the MIT license.
+ */
+
+import { useInsertionEffect, useMemo, useRef } from 'react';
+import { injectRawCSS } from '../injector';
+// Implementation
+export function useRawCSS(cssOrFactory, depsOrOptions, options) {
+    // Detect which overload is being used
+    const isFactory = typeof cssOrFactory === 'function';
+    // Parse arguments based on overload
+    const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;
+    const opts = isFactory
+        ? options
+        : depsOrOptions;
+    // Memoize CSS - for factory functions, use provided deps; for strings, use the string itself
+    const css = useMemo(() => isFactory ? cssOrFactory() : cssOrFactory, isFactory ? deps ?? [] : [cssOrFactory]);
+    const disposeRef = useRef(null);
+    useInsertionEffect(() => {
+        // Dispose previous injection if any
+        disposeRef.current?.();
+        if (!css.trim()) {
+            disposeRef.current = null;
+            return;
+        }
+        // Inject new CSS
+        const { dispose } = injectRawCSS(css, opts);
+        disposeRef.current = dispose;
+        // Cleanup on unmount or when css changes
+        return () => {
+            disposeRef.current?.();
+            disposeRef.current = null;
+        };
+    }, [css, opts?.root]);
+}
+
+        

package/es/tasty/hooks/useStyles.js

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

package/es/tasty/index.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-da0f894
+ * @cube-dev/ui-kit v0.0.0-canary-364ff16
  * Released under the MIT license.
  */
 
 export { tasty, Element } from './tasty';
-export { useStyles, useGlobalStyles } from './hooks';
+export { useStyles, useGlobalStyles, useRawCSS } from './hooks';
 // Configuration API
 export { configure, getConfig, isConfigLocked, hasStylesGenerated, resetConfig, isTestEnvironment, } from './config';
 // Chunk utilities for advanced use cases

package/es/tasty/injector/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-da0f894
+ * @cube-dev/ui-kit v0.0.0-canary-364ff16
  * Released under the MIT license.
  */
 
@@ -28,10 +28,30 @@ export function injectGlobal(rules, options) {
     return getGlobalInjector().injectGlobal(rules, options);
 }
 /**
- * Internal method for createGlobalStyle - not exported publicly
+ * Inject raw CSS text directly without parsing
+ * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
+ * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
+ *
+ * @example
+ * ```tsx
+ * // Inject raw CSS
+ * const { dispose } = injectRawCSS(`
+ *   body { margin: 0; padding: 0; }
+ *   .my-class { color: red; }
+ * `);
+ *
+ * // Later, remove the injected CSS
+ * dispose();
+ * ```
  */
-function injectCreateGlobalStyle(rules, options) {
-    return getGlobalInjector().injectCreateGlobalStyle(rules, options);
+export function injectRawCSS(css, options) {
+    return getGlobalInjector().injectRawCSS(css, options);
+}
+/**
+ * Get raw CSS text for SSR
+ */
+export function getRawCSSText(options) {
+    return getGlobalInjector().getRawCSSText(options);
 }
 /**
  * Inject keyframes and return object with toString() and dispose()
@@ -111,13 +131,6 @@ export function createInjector(config = {}) {
     };
     return new StyleInjector(fullConfig);
 }
-/**
- * Create a global style component like styled-components createGlobalStyle
- * Returns a React component that injects global styles when mounted and cleans up when unmounted
- */
-export function createGlobalStyle(strings, ...interpolations) {
-    return getGlobalInjector().createGlobalStyle(strings, ...interpolations);
-}
 export { StyleInjector } from './injector';
 export { SheetManager } from './sheet-manager';
 

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-da0f894
+ * @cube-dev/ui-kit v0.0.0-canary-364ff16
  * Released under the MIT license.
  */
 
@@ -9,9 +9,7 @@
  * Style injector that works with structured style objects
  * Eliminates CSS string parsing for better performance
  */
-import { Component } from 'react';
 import { parseStyle } from '../utils/styles';
-// Simple CSS text to StyleResult converter for injectGlobal backward compatibility
 import { SheetManager } from './sheet-manager';
 /**
  * Generate sequential class name with format t{number}
@@ -214,26 +212,20 @@ export class StyleInjector {
         };
     }
     /**
-     * Inject styles from createGlobalStyle (separate from injectGlobal for tracking)
+     * Inject raw CSS text directly without parsing
+     * This is a low-overhead alternative to createGlobalStyle for raw CSS
+     * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking
      */
-    injectCreateGlobalStyle(rules, options) {
+    injectRawCSS(css, options) {
         const root = options?.root || document;
-        const registry = this.sheetManager.getRegistry(root);
-        if (!rules || rules.length === 0) {
-            return { dispose: () => { } };
-        }
-        // Use a different prefix to distinguish from injectGlobal
-        const key = `raw:${this.globalRuleCounter++}`;
-        const info = this.sheetManager.insertGlobalRule(registry, rules, key, root);
-        if (registry.metrics) {
-            registry.metrics.totalInsertions++;
-        }
-        return {
-            dispose: () => {
-                if (info)
-                    this.sheetManager.deleteGlobalRule(registry, key);
-            },
-        };
+        return this.sheetManager.injectRawCSS(css, root);
+    }
+    /**
+     * Get raw CSS text for SSR
+     */
+    getRawCSSText(options) {
+        const root = options?.root || document;
+        return this.sheetManager.getRawCSSText(root);
     }
     /**
      * Dispose of a className
@@ -342,9 +334,9 @@ export class StyleInjector {
                 syntax = `"${syntax}"`;
             parts.push(`syntax: ${syntax};`);
         }
-        if (options?.inherits != null) {
-            parts.push(`inherits: ${options.inherits ? 'true' : 'false'};`);
-        }
+        // inherits is required by the CSS @property spec - default to true
+        const inherits = options?.inherits ?? true;
+        parts.push(`inherits: ${inherits ? 'true' : 'false'};`);
         if (options?.initialValue != null) {
             let initialValueStr;
             if (typeof options.initialValue === 'number') {
@@ -454,259 +446,6 @@ 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);
-                    // Use a special method for createGlobalStyle to distinguish from injectGlobal
-                    const result = injector.injectCreateGlobalStyle(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('@')) {
-                        const atSelector = selectorPart.trim();
-                        // Leaf at-rules that contain declarations directly and should be emitted as-is
-                        const leafAtRules = [
-                            '@font-face',
-                            '@property',
-                            '@page',
-                            '@counter-style',
-                            '@font-feature-values',
-                            '@font-palette-values',
-                            '@color-profile',
-                        ];
-                        const isLeafAtRule = leafAtRules.some((prefix) => atSelector.startsWith(prefix));
-                        if (isLeafAtRule) {
-                            // Emit the at-rule with its declarations directly
-                            if (content.trim()) {
-                                rules.push({
-                                    selector: atSelector,
-                                    declarations: content,
-                                    atRules: atRuleStack.length > 0 ? [...atRuleStack] : undefined,
-                                });
-                            }
-                        }
-                        else {
-                            // Wrapper at-rule (e.g., @media, @supports, @keyframes) — parse its content
-                            const newAtRuleStack = [...atRuleStack, atSelector];
-                            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;
-    }
 }