@cube-dev/ui-kit 0.0.0-canary-76be278 → 0.0.0-canary-7e4ec9d

package/es/tasty/tasty.js

@@ -1,18 +1,22 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 
-import { createElement, forwardRef, useMemo, } from 'react';
+import { createElement, forwardRef, useContext, useInsertionEffect, useMemo, useRef, } from 'react';
 import { isValidElementType } from 'react-is';
-import { useStyles } from './hooks/useStyles';
+import { allocateClassName, 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 { processTokens, stringifyTokens } from './utils/processTokens';
+import { renderStyles } from './utils/renderStyles';
+import { stringifyStyles } from './utils/styles';
 /**
  * Mapping of is* properties to their corresponding HTML attributes
  */
@@ -43,68 +47,51 @@ function handleIsProperties(props) {
     }
 }
 /**
- * Creates a sub-element component for compound component patterns.
- * Sub-elements are lightweight components with data-element attribute for CSS targeting.
+ * Simple hash function for internal cache keys
  */
-function createSubElement(elementName, definition) {
-    // Normalize definition to object form
-    const config = typeof definition === 'string'
-        ? { as: definition }
-        : definition;
-    const tag = config.as ?? 'div';
-    const defaultQa = config.qa;
-    const defaultQaVal = config.qaVal;
-    const SubElement = forwardRef((props, ref) => {
-        const { qa, qaVal, mods, tokens, isDisabled, isHidden, isChecked, className, style, ...htmlProps } = props;
-        // Build mod attributes
-        let modProps;
-        if (mods) {
-            modProps = modAttrs(mods);
-        }
-        // Process tokens into inline style properties
-        const tokenStyle = tokens
-            ? processTokens(tokens)
-            : undefined;
-        // Merge token styles with explicit style prop (style has priority)
-        let mergedStyle;
-        if (tokenStyle || style) {
-            mergedStyle =
-                tokenStyle && style
-                    ? { ...tokenStyle, ...style }
-                    : (tokenStyle ?? style);
-        }
-        const elementProps = {
-            'data-element': elementName,
-            'data-qa': qa ?? defaultQa,
-            'data-qaval': qaVal ?? defaultQaVal,
-            ...(modProps || {}),
-            ...htmlProps,
-            className,
-            style: mergedStyle,
-            isDisabled,
-            isHidden,
-            isChecked,
-            ref,
-        };
-        // Handle is* properties (isDisabled -> disabled + data-disabled, etc.)
-        handleIsProperties(elementProps);
-        // Clean up undefined data attributes
-        if (elementProps['data-qa'] === undefined)
-            delete elementProps['data-qa'];
-        if (elementProps['data-qaval'] === undefined)
-            delete elementProps['data-qaval'];
-        return createElement(tag, elementProps);
-    });
-    SubElement.displayName = `SubElement(${elementName})`;
-    return SubElement;
+// Generate unique cache key for style deduplication
+function generateStyleCacheKey(styleKey, contextKey) {
+    // Use null character as separator for better performance and no collision risk
+    return contextKey ? `${styleKey}\0${contextKey}` : styleKey;
 }
 // Implementation
 export function tasty(Component, options) {
+    if (typeof Component === 'string') {
+        return tastyGlobal(Component, options);
+    }
     if (isValidElementType(Component)) {
         return tastyWrap(Component, options);
     }
     return tastyElement(Component);
 }
+// Internal specialized implementations
+function tastyGlobal(selector, styles) {
+    const _StyleDeclarationComponent = ({ breakpoints, }) => {
+        let contextBreakpoints = useContext(BreakpointsContext);
+        const breakpointsList = (breakpoints ?? contextBreakpoints) || [980];
+        const disposeRef = useRef(null);
+        const styleResults = useMemo(() => {
+            if (!styles)
+                return [];
+            return renderStyles(styles, breakpointsList, selector);
+        }, [selector, styles, breakpointsList]);
+        // Inject styles at insertion phase; cleanup on change/unmount
+        useInsertionEffect(() => {
+            disposeRef.current?.();
+            if (styleResults.length === 0)
+                return;
+            const { dispose } = injectGlobal(styleResults);
+            disposeRef.current = dispose;
+            return () => {
+                disposeRef.current?.();
+                disposeRef.current = null;
+            };
+        }, [styleResults]);
+        return null;
+    };
+    _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${selector})`;
+    return _StyleDeclarationComponent;
+}
 function tastyWrap(Component, options) {
     let { as: extendTag, element: extendElement, ...defaultProps } = (options ?? {});
     let propsWithStyles = ['styles'].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')));
@@ -138,7 +125,7 @@ function tastyWrap(Component, options) {
     return _WrappedComponent;
 }
 function tastyElement(tastyOptions) {
-    let { as: originalAs = 'div', element: defaultElement, styles: defaultStyles, styleProps, variants, tokens: defaultTokens, elements, ...defaultProps } = tastyOptions;
+    let { as: originalAs = 'div', element: defaultElement, styles: defaultStyles, styleProps, variants, tokens: defaultTokens, ...defaultProps } = tastyOptions;
     let _TastyComponent;
     if (variants) {
         const variantEntries = Object.entries(variants);
@@ -175,10 +162,18 @@ function tastyElement(tastyOptions) {
         });
     }
     else {
+        /**
+         * 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) => {
+            // Return rules without className - injector will add it
+            return renderStyles(defaultStyles || {}, breakpoints);
+        });
         let { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
         // eslint-disable-next-line react/display-name
         _TastyComponent = forwardRef((allProps, ref) => {
-            let { as, styles, variant: _omitVariant, mods, element, qa, qaVal, className: userClassName, tokens, style, ...otherProps } = allProps;
+            let { as, styles, variant: _omitVariant, breakpoints, mods, element, qa, qaVal, className: userClassName, tokens, style, ...otherProps } = allProps;
             // Optimize propStyles extraction - avoid creating empty objects
             let propStyles = null;
             const propsToCheck = styleProps
@@ -197,17 +192,66 @@ function tastyElement(tastyOptions) {
                 (styles && Object.keys(styles).length === 0)) {
                 styles = undefined;
             }
-            // Merge default styles with instance styles and prop styles
-            const allStyles = useMemo(() => {
+            let contextBreakpoints = useContext(BreakpointsContext);
+            breakpoints = breakpoints ?? contextBreakpoints;
+            // Memoize breakpoints key once
+            const breakpointsKey = useMemo(() => breakpoints?.join(',') || '', [breakpoints?.join(',')]);
+            const propStylesKey = stringifyStyles(propStyles);
+            // Optimize style computation and cache key generation
+            const { allStyles, cacheKey, useDefaultStyles } = useMemo(() => {
                 const hasStyles = styles && Object.keys(styles).length > 0;
                 const hasPropStyles = propStyles && Object.keys(propStyles).length > 0;
-                if (!hasStyles && !hasPropStyles) {
-                    return defaultStyles;
+                const useDefault = !hasStyles && !hasPropStyles;
+                const merged = useDefault
+                    ? defaultStyles
+                    : mergeStyles(defaultStyles, styles, propStyles);
+                // Generate cache key for style deduplication
+                const styleKey = stringifyStyles(merged || {});
+                const key = generateStyleCacheKey(styleKey, breakpointsKey ? `bp:${breakpointsKey}` : undefined);
+                return {
+                    allStyles: merged,
+                    cacheKey: key,
+                    useDefaultStyles: useDefault,
+                };
+            }, [styles, propStylesKey, breakpointsKey]);
+            // Compute rules synchronously; inject via insertion effect
+            const directResult = useMemo(() => {
+                if (useDefaultStyles) {
+                    return renderDefaultStyles(breakpoints);
+                }
+                else if (allStyles && Object.keys(allStyles).length > 0) {
+                    // Return rules without className - injector will add it
+                    return renderStyles(allStyles, breakpoints);
+                }
+                else {
+                    return { rules: [], className: '' };
+                }
+            }, [useDefaultStyles, allStyles, breakpointsKey, cacheKey]);
+            const disposeRef = useRef(null);
+            // Allocate className in render phase (safe for React Strict Mode)
+            const allocatedClassName = useMemo(() => {
+                if (!directResult.rules.length || !cacheKey)
+                    return '';
+                const { className } = allocateClassName(cacheKey);
+                return className;
+            }, [directResult.rules.length, cacheKey]);
+            // Inject styles in insertion effect (avoids render phase side effects)
+            useInsertionEffect(() => {
+                // Cleanup previous disposal reference
+                disposeRef.current?.();
+                if (directResult.rules.length > 0) {
+                    const injectionResult = inject(directResult.rules, { cacheKey });
+                    disposeRef.current = injectionResult.dispose;
                 }
-                return mergeStyles(defaultStyles, styles, propStyles);
-            }, [styles, propStyles]);
-            // Use the useStyles hook for style generation and injection
-            const { className: stylesClassName } = useStyles({ styles: allStyles });
+                else {
+                    disposeRef.current = null;
+                }
+                return () => {
+                    disposeRef.current?.();
+                    disposeRef.current = null;
+                };
+            }, [directResult.rules, cacheKey]);
+            const injectedClassName = allocatedClassName;
             // Merge default tokens with instance tokens (instance overrides defaults)
             const tokensKey = stringifyTokens(tokens);
             const mergedTokens = useMemo(() => {
@@ -238,8 +282,11 @@ function tastyElement(tastyOptions) {
                 const modsObject = mods;
                 modProps = modAttrs(modsObject);
             }
-            // Merge user className with generated className
-            const finalClassName = [userClassName || '', stylesClassName]
+            // Merge user className with injected className
+            const finalClassName = [
+                userClassName || '',
+                injectedClassName,
+            ]
                 .filter(Boolean)
                 .join(' ');
             const elementProps = {
@@ -255,19 +302,13 @@ function tastyElement(tastyOptions) {
             };
             // Apply the helper to handle is* properties
             handleIsProperties(elementProps);
+            // 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})`;
-    // Attach sub-element components if elements are defined
-    if (elements) {
-        const subElements = Object.entries(elements).reduce((acc, [name, definition]) => {
-            acc[name] = createSubElement(name, definition);
-            return acc;
-        }, {});
-        return Object.assign(_TastyComponent, subElements);
-    }
     return _TastyComponent;
 }
 export const Element = tasty({});

package/es/tasty/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * 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-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * 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-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * 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-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * 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-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * 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-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * 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-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/tasty/utils/getModCombinations.js

@@ -0,0 +1,38 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
+ * Released under the MIT license.
+ */
+
+/**
+ * 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 === 0) {
+        return allowEmpty ? [[]] : [];
+    }
+    // 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);
+            }
+        }
+    }
+    // Filter out empty combination if not allowed, but keep others
+    return combinations.filter((combo) => allowEmpty || combo.length > 0);
+}
+
+        

package/es/tasty/utils/isDevEnv.js

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

package/es/tasty/utils/mergeStyles.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 
-import { isSelector } from '../pipeline';
+import { isSelector } from './renderStyles';
 export function mergeStyles(...objects) {
     let styles = objects[0] ? { ...objects[0] } : {};
     let pos = 1;

package/es/tasty/utils/modAttrs.js

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

package/es/tasty/utils/processTokens.js

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