@cube-dev/ui-kit 0.0.0-canary-8ca04ef → 0.0.0-canary-dae9b2f

package/es/tasty/tasty.js

@@ -1,18 +1,22 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * 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.js';
-import { BASE_STYLES } from './styles/list.js';
-import { getDisplayName } from './utils/getDisplayName.js';
-import { mergeStyles } from './utils/mergeStyles.js';
-import { modAttrs } from './utils/modAttrs.js';
-import { processTokens, stringifyTokens } from './utils/processTokens.js';
+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(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-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * 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-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * 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-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * 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-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * 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-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * 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-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * 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-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * 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-dae9b2f
+ * 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-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * 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-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { isSelector } from '../pipeline/index.js';
+import { isSelector } from './renderStyles';
 export function mergeStyles(...objects) {
     let styles = objects[0] ? { ...objects[0] } : {};
     let pos = 1;

package/es/tasty/utils/modAttrs.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { cacheWrapper } from './cache-wrapper.js';
-import { camelToKebab } from './case-converter.js';
+import { cacheWrapper } from './cache-wrapper';
+import { camelToKebab } from './case-converter';
 function modAttrs(map) {
     return map
         ? Object.keys(map).reduce((attrs, key) => {

package/es/tasty/utils/processTokens.js

@@ -1,86 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { getRgbValuesFromRgbaString, hexToRgb, parseStyle } from './styles.js';
+import { getRgbValuesFromRgbaString, hexToRgb, parseStyle } from './styles';
 const devMode = process.env.NODE_ENV !== 'production';
-/**
- * Parse HSL values from an hsl()/hsla() string.
- * Supports both comma-separated (legacy) and space-separated (modern) syntax:
- *   hsl(200, 40%, 50%)
- *   hsl(200 40% 50%)
- *   hsl(200 40% 50% / 0.5)
- *
- * Returns [h, s, l] where h is 0-360, s and l are 0-1, or null if parsing fails.
- */
-function parseHslValues(str) {
-    const match = str.match(/hsla?\(([^)]+)\)/i);
-    if (!match)
-        return null;
-    const inner = match[1].trim();
-    // Split by slash first (for alpha), then handle color components
-    const [colorPart] = inner.split('/');
-    // Split by comma or whitespace
-    const parts = colorPart
-        .trim()
-        .split(/[,\s]+/)
-        .filter(Boolean);
-    if (parts.length < 3)
-        return null;
-    // Parse hue (can be unitless degrees, deg, turn, rad, or grad)
-    let h = parseFloat(parts[0]);
-    const hueStr = parts[0].toLowerCase();
-    if (hueStr.endsWith('turn')) {
-        h = parseFloat(hueStr) * 360;
-    }
-    else if (hueStr.endsWith('rad')) {
-        h = (parseFloat(hueStr) * 180) / Math.PI;
-    }
-    else if (hueStr.endsWith('grad')) {
-        h = parseFloat(hueStr) * 0.9; // 400 grad = 360 deg
-    }
-    // deg or unitless are already in degrees
-    // Normalize hue to 0-360 range
-    h = h % 360;
-    if (h < 0)
-        h += 360;
-    // Parse saturation and lightness (percentages)
-    const parsePercent = (val) => {
-        const num = parseFloat(val);
-        return val.includes('%') ? num / 100 : num;
-    };
-    const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
-    const l = Math.max(0, Math.min(1, parsePercent(parts[2])));
-    return [h, s, l];
-}
-/**
- * Convert HSL to RGB (sRGB).
- * Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative
- * Same as used in CSS Color 4 spec.
- *
- * @param h - Hue in degrees (0-360)
- * @param s - Saturation (0-1)
- * @param l - Lightness (0-1)
- * @returns RGB values in 0-255 range (may have fractional values)
- */
-function hslToRgb(h, s, l) {
-    const a = s * Math.min(l, 1 - l);
-    const f = (n) => {
-        const k = (n + h / 30) % 12;
-        return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
-    };
-    // Convert 0-1 range to 0-255
-    return [f(0) * 255, f(8) * 255, f(4) * 255];
-}
-/**
- * Format a number to a string with up to 1 decimal place, removing trailing zeros.
- */
-function formatRgbComponent(n) {
-    return parseFloat(n.toFixed(1)).toString();
-}
 /**
  * Extract RGB triplet from a color value.
  * Returns the RGB values as a space-separated string (e.g., "255 128 0")
@@ -99,18 +25,6 @@ function extractRgbValue(colorValue, parsedOutput) {
             return rgbValues.join(' ');
         }
     }
-    // For hsl(...) values, convert to RGB triplet
-    if (parsedOutput.startsWith('hsl(') ||
-        parsedOutput.startsWith('hsla(') ||
-        colorValue.startsWith('hsl(') ||
-        colorValue.startsWith('hsla(')) {
-        // Try parsedOutput first, then original colorValue
-        const hslValues = parseHslValues(parsedOutput) || parseHslValues(colorValue);
-        if (hslValues) {
-            const [r, g, b] = hslToRgb(hslValues[0], hslValues[1], hslValues[2]);
-            return `${formatRgbComponent(r)} ${formatRgbComponent(g)} ${formatRgbComponent(b)}`;
-        }
-    }
     // For hex values, convert to RGB triplet
     if (colorValue.startsWith('#') && /^#[0-9a-fA-F]{3,8}$/.test(colorValue)) {
         const rgbResult = hexToRgb(colorValue);