@cube-dev/ui-kit 0.0.0-canary-acb9af5 → 0.0.0-canary-e9dc427

package/es/tasty/styles/padding.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-acb9af5
+ * @cube-dev/ui-kit v0.0.0-canary-e9dc427
  * Released under the MIT license.
  */
 
@@ -44,87 +44,55 @@ function parseDirectionalPadding(value) {
     return { values, directions };
 }
 export function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft, }) {
-    // Check if any padding property is defined
-    const hasAnyPadding = padding != null ||
-        paddingBlock != null ||
-        paddingInline != null ||
-        paddingTop != null ||
-        paddingRight != null ||
-        paddingBottom != null ||
-        paddingLeft != null;
-    // If no padding is defined, return empty object
-    if (!hasAnyPadding) {
-        return {};
-    }
-    // Initialize with all directions set to 0, then override as needed
-    const styles = {
-        'padding-top': '0',
-        'padding-right': '0',
-        'padding-bottom': '0',
-        'padding-left': '0',
-    };
+    const styles = {};
     // Priority 1 (lowest): padding - apply to all directions if no other properties are specified
     if (padding != null) {
         // Parse directional padding (e.g., "1x top" or "2x left right")
         const { values, directions } = parseDirectionalPadding(padding);
-        if (values.length > 0) {
-            if (directions.length === 0) {
-                // No directions specified, apply to all sides
-                styles['padding-top'] = values[0];
-                styles['padding-right'] = values[1] || values[0];
-                styles['padding-bottom'] = values[2] || values[0];
-                styles['padding-left'] = values[3] || values[1] || values[0];
-            }
-            else {
-                // Apply only to specified directions
-                directions.forEach((dir) => {
-                    const index = DIRECTIONS.indexOf(dir);
-                    styles[`padding-${dir}`] =
-                        values[index] || values[index % 2] || values[0];
-                });
-            }
+        if (directions.length === 0) {
+            // No directions specified, apply to all sides
+            styles['padding-top'] = values[0];
+            styles['padding-right'] = values[1] || values[0];
+            styles['padding-bottom'] = values[2] || values[0];
+            styles['padding-left'] = values[3] || values[1] || values[0];
+        }
+        else {
+            // Apply only to specified directions
+            directions.forEach((dir) => {
+                const index = DIRECTIONS.indexOf(dir);
+                styles[`padding-${dir}`] =
+                    values[index] || values[index % 2] || values[0];
+            });
         }
     }
     // Priority 2 (medium): paddingBlock - override top and bottom
     if (paddingBlock != null) {
         const values = parsePaddingValue(paddingBlock);
-        if (values.length > 0) {
-            styles['padding-top'] = values[0];
-            styles['padding-bottom'] = values[1] || values[0];
-        }
+        styles['padding-top'] = values[0];
+        styles['padding-bottom'] = values[1] || values[0];
     }
     // Priority 2 (medium): paddingInline - override left and right
     if (paddingInline != null) {
         const values = parsePaddingValue(paddingInline);
-        if (values.length > 0) {
-            styles['padding-left'] = values[0];
-            styles['padding-right'] = values[1] || values[0];
-        }
+        styles['padding-left'] = values[0];
+        styles['padding-right'] = values[1] || values[0];
     }
     // Priority 3 (highest): individual directions - override specific sides
     if (paddingTop != null) {
         const values = parsePaddingValue(paddingTop);
-        if (values.length > 0) {
-            styles['padding-top'] = values[0];
-        }
+        styles['padding-top'] = values[0];
     }
     if (paddingRight != null) {
         const values = parsePaddingValue(paddingRight);
-        if (values.length > 0) {
-            styles['padding-right'] = values[0];
-        }
+        styles['padding-right'] = values[0];
     }
     if (paddingBottom != null) {
         const values = parsePaddingValue(paddingBottom);
-        if (values.length > 0) {
-            styles['padding-bottom'] = values[0];
-        }
+        styles['padding-bottom'] = values[0];
     }
     if (paddingLeft != null) {
         const values = parsePaddingValue(paddingLeft);
-        if (values.length > 0) {
-            styles['padding-left'] = values[0];
-        }
+        styles['padding-left'] = values[0];
     }
     return styles;
 }

package/es/tasty/styles/place.js

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

package/es/tasty/styles/preset.js

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

package/es/tasty/styles/radius.js

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

package/es/tasty/styles/reset.js

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

package/es/tasty/styles/scrollbar.js

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

package/es/tasty/styles/shadow.js

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

package/es/tasty/styles/styledScrollbar.js

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

package/es/tasty/styles/transition.js

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

package/es/tasty/styles/types.js

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

package/es/tasty/styles/width.js

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

package/es/tasty/tasty.js

@@ -1,18 +1,22 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-acb9af5
+ * @cube-dev/ui-kit v0.0.0-canary-e9dc427
  * 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
  */
@@ -42,13 +46,52 @@ function handleIsProperties(props) {
         }
     }
 }
+/**
+ * Simple hash function for internal cache keys
+ */
+// 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')));
@@ -119,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
@@ -141,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;
+                }
+                else {
+                    disposeRef.current = null;
                 }
-                return mergeStyles(defaultStyles, styles, propStyles);
-            }, [styles, propStyles]);
-            // Use the useStyles hook for style generation and injection
-            const { className: stylesClassName } = useStyles({ styles: allStyles });
+                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(() => {
@@ -182,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 = {
@@ -199,7 +302,9 @@ 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;
         });
     }

package/es/tasty/types.js

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