@cube-dev/ui-kit 0.0.0-canary-1d46daa → 0.0.0-canary-736d057

package/es/tasty/tasty.js

@@ -1,22 +1,34 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * Released under the MIT license.
  */
 
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement, forwardRef, useContext, useMemo, } from 'react';
+import { createElement, forwardRef, useContext, useInsertionEffect, useMemo, useRef, } from 'react';
 import { isValidElementType } from 'react-is';
-import styledComponents, { createGlobalStyle } from 'styled-components';
+import { inject, injectGlobal } from './injector';
 import { BreakpointsContext } from './providers/BreakpointsProvider';
 import { BASE_STYLES } from './styles/list';
 import { cacheWrapper } from './utils/cache-wrapper';
 import { getDisplayName } from './utils/getDisplayName';
 import { mergeStyles } from './utils/mergeStyles';
 import { modAttrs } from './utils/modAttrs';
-import { renderStyles } from './utils/renderStyles';
-import { pointsToZones } from './utils/responsive';
+import { renderStyles, renderStylesForGlobal } from './utils/renderStyles';
+/**
+ * Simple hash function for internal cache keys
+ */
+// Per-style-key sequential class allocator
+const styleKeyToClass = new Map();
+let nextClassId = 0;
+function allocateClassName(styleKey) {
+    const existing = styleKeyToClass.get(styleKey);
+    if (existing)
+        return existing;
+    const cls = `t${nextClassId++}`;
+    styleKeyToClass.set(styleKey, cls);
+    return cls;
+}
 // Implementation
 export function tasty(Component, options) {
     if (typeof Component === 'string') {
@@ -29,17 +41,28 @@ export function tasty(Component, options) {
 }
 // Internal specialized implementations
 function tastyGlobal(selector, styles) {
-    let Element = createGlobalStyle `${({ $css }) => $css}`;
     const _StyleDeclarationComponent = ({ breakpoints, }) => {
         let contextBreakpoints = useContext(BreakpointsContext);
         const breakpointsList = (breakpoints ?? contextBreakpoints) || [980];
         const breakpointsHash = breakpointsList.join(',');
-        let css = useMemo(() => {
+        const disposeRef = useRef(null);
+        const cssText = useMemo(() => {
             if (!styles)
                 return '';
-            return `\n{}${selector}{${renderStyles(styles, pointsToZones(breakpointsList))}}`;
+            return renderStylesForGlobal(styles, breakpointsList);
         }, [breakpointsHash]);
-        return _jsx(Element, { "$css": css });
+        // Inject styles at insertion phase; cleanup on change/unmount
+        useInsertionEffect(() => {
+            disposeRef.current?.();
+            if (!cssText)
+                return;
+            disposeRef.current = injectGlobal(selector, cssText);
+            return () => {
+                disposeRef.current?.();
+                disposeRef.current = null;
+            };
+        }, [cssText, selector]);
+        return null;
     };
     _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${selector})`;
     return _StyleDeclarationComponent;
@@ -112,16 +135,19 @@ function tastyElement(tastyOptions) {
         });
     }
     else {
-        let Element = styledComponents[originalAs](({ $css }) => $css);
         /**
          * An additional optimization that allows to avoid rendering styles across various instances
          * of the same element if no custom styles are provided via `styles` prop or direct style props.
          */
-        const renderDefaultStyles = cacheWrapper((breakpoints) => renderStyles(defaultStyles || {}, pointsToZones(breakpoints)));
+        const renderDefaultStyles = cacheWrapper((breakpoints) => {
+            // Allocate a stable class for default styles
+            const defaultClassName = allocateClassName(JSON.stringify(defaultStyles || {}));
+            return renderStyles(defaultStyles || {}, breakpoints, defaultClassName);
+        });
         let { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
         // eslint-disable-next-line react/display-name
         _TastyComponent = forwardRef((allProps, ref) => {
-            let { as, styles, variant: _omitVariant, breakpoints, mods, element, qa, qaVal, ...otherProps } = allProps;
+            let { as, styles, variant: _omitVariant, breakpoints, mods, element, qa, qaVal, className: userClassName, ...otherProps } = allProps;
             let propStyles = (styleProps
                 ? styleProps.concat(BASE_STYLES)
                 : BASE_STYLES).reduce((map, prop) => {
@@ -148,26 +174,73 @@ function tastyElement(tastyOptions) {
                 : mergeStyles(defaultStyles, styles, propStyles), [styleCacheKey]);
             let contextBreakpoints = useContext(BreakpointsContext);
             breakpoints = breakpoints ?? contextBreakpoints;
-            let renderedStyles = useMemo(() => useDefaultStyles
-                ? renderDefaultStyles(breakpoints)
-                : renderStyles(allStyles, pointsToZones(breakpoints)), [allStyles, breakpoints?.join(',')]);
+            // Allocate a stable sequential class per style-key
+            const className = useMemo(() => {
+                const stylesKey = JSON.stringify(allStyles || {});
+                return allocateClassName(stylesKey);
+            }, [allStyles]);
+            // Compute rules synchronously; inject via insertion effect
+            const directResult = useMemo(() => {
+                if (useDefaultStyles) {
+                    return renderDefaultStyles(breakpoints);
+                }
+                else if (allStyles && Object.keys(allStyles).length > 0) {
+                    return renderStyles(allStyles, breakpoints, className);
+                }
+                else {
+                    return { rules: [], className: '' };
+                }
+            }, [useDefaultStyles, allStyles, breakpoints?.join(','), className]);
+            // Inject styles and get the actual CSS class name
+            const injectedResult = useMemo(() => {
+                if (!directResult.rules.length) {
+                    return { className: '', dispose: () => { } };
+                }
+                return inject(directResult.rules);
+            }, [directResult.rules]);
+            const disposeRef = useRef(null);
+            useInsertionEffect(() => {
+                disposeRef.current?.();
+                disposeRef.current = injectedResult.dispose;
+                return () => {
+                    disposeRef.current?.();
+                    disposeRef.current = null;
+                };
+            }, [injectedResult.dispose]);
             let modProps;
             if (mods) {
                 const modsObject = mods;
                 modProps = modAttrs(modsObject);
             }
+            // Merge user className with injected className
+            const finalClassName = [
+                userClassName || '',
+                injectedResult.className || directResult.className || className,
+            ]
+                .filter(Boolean)
+                .join(' ');
             const elementProps = {
-                as: as ?? originalAs,
                 'data-element': element || defaultElement,
                 'data-qa': qa || defaultQa,
                 'data-qaval': qaVal || defaultQaVal,
                 ...otherDefaultProps,
                 ...otherProps,
                 ...(modProps || {}),
+                className: finalClassName,
                 ref,
-                $css: renderedStyles,
             };
-            return createElement(Element, elementProps);
+            if ('isDisabled' in elementProps) {
+                elementProps.disabled = elementProps.isDisabled;
+                delete elementProps.isDisabled;
+            }
+            if ('isHidden' in elementProps) {
+                elementProps.hidden = elementProps.isHidden;
+                delete elementProps.isHidden;
+            }
+            // NEW: Use plain createElement instead of styled Element
+            const renderedElement = createElement(as ?? originalAs, elementProps);
+            // Note: Empty className is normal for elements with no styles
+            return renderedElement;
         });
     }
     _TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;

package/es/tasty/types.js

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

package/es/tasty/utils/cache-wrapper.js

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

package/es/tasty/utils/case-converter.js

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

package/es/tasty/utils/colors.js

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

package/es/tasty/utils/dotize.js

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

package/es/tasty/utils/filterBaseProps.js

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

package/es/tasty/utils/getDisplayName.js

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

package/es/tasty/utils/getModCombinations.js

@@ -1,42 +1,38 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * Released under the MIT license.
  */
 
-function filterCombinations(combinations) {
-    return combinations.filter((combination) => {
-        const list = [];
-        return !combination.find((mod) => {
-            const match = mod.match(/\[(.+?)[=\]]/);
-            if (match) {
-                if (list.includes(match[1])) {
-                    return true;
-                }
-                list.push(match[1]);
-                return false;
-            }
-            return false;
-        });
-    });
-}
-export function getModCombinations(array, allowEmpty) {
-    const result = allowEmpty ? [[]] : [];
-    if (array.length === 0) {
-        return [array];
+/**
+ * Efficient iterative combination generator with early pruning
+ * Generates combinations one by one and prunes branches early when conflicts are detected
+ * @param array - Array of mod strings to generate combinations from
+ * @param allowEmpty - Whether to include empty combination
+ * @param conflictChecker - Function to detect conflicting combinations (required)
+ */
+export function getModCombinationsIterative(array, allowEmpty, conflictChecker) {
+    if (!conflictChecker) {
+        throw new Error('getModCombinationsIterative requires a conflictChecker function');
     }
-    if (array.length < 2) {
-        return result.concat([array]);
+    if (array.length === 0) {
+        return allowEmpty ? [[]] : [];
     }
-    const f = function (prefix = [], array) {
-        for (let i = 0; i < array.length; i++) {
-            result.push([...prefix, array[i]]);
-            f([...prefix, array[i]], array.slice(i + 1));
+    // Use iterative approach with early pruning for better performance
+    const combinations = [[]];
+    for (let i = 0; i < array.length; i++) {
+        const currentLength = combinations.length;
+        for (let j = 0; j < currentLength; j++) {
+            const newCombination = [...combinations[j], array[i]];
+            // Early conflict detection - only add if no conflicts
+            if (!conflictChecker(newCombination)) {
+                combinations.push(newCombination);
+            }
         }
-    };
-    f([], array);
-    return filterCombinations(result);
+    }
+    // Filter out empty combination if not allowed, but keep others
+    return combinations.filter((combo) => allowEmpty || combo.length > 0);
 }
 
         

package/es/tasty/utils/mergeStyles.js

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

package/es/tasty/utils/modAttrs.js

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