@cube-dev/ui-kit 0.74.2 → 0.75.0

package/es/tasty/styles/reset.js

@@ -1,74 +1,69 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.74.2
+ * @cube-dev/ui-kit v0.75.0
  * Released under the MIT license.
  */
 
 import { parseStyle } from '../utils/styles';
+const AUTOFILL_STYLES = {
+    'caret-color': 'var(--purple-color)',
+    '-webkit-text-fill-color': 'var(--purple-color)',
+    '-webkit-box-shadow': '0 0 0px 9999rem var(--white-color) inset',
+    'box-shadow': '0 0 0px 9999rem var(--white-color) inset',
+    'font-family': 'inherit',
+    'font-size': 'inherit',
+    'line-height': 'inherit',
+};
 const RESET_MAP = {
     input: [
         {
-            css: `
--webkit-appearance: none;
-word-spacing: initial;
--webkit-text-fill-color: currentColor;
-`,
+            '-webkit-appearance': 'none',
+            'word-spacing': 'initial',
+            '-webkit-text-fill-color': 'currentColor',
         },
         {
             $: '::-webkit-search-cancel-button',
-            css: 'display: none',
+            display: 'none',
+        },
+        {
+            $: ':-webkit-autofill',
+            ...AUTOFILL_STYLES,
+        },
+        {
+            $: ':-webkit-autofill:hover',
+            ...AUTOFILL_STYLES,
         },
         {
-            $: [
-                ':-webkit-autofill',
-                ':-webkit-autofill:hover',
-                ':-webkit-autofill:focus',
-            ],
-            css: `
-caret-color: var(--purple-color);
--webkit-text-fill-color: var(--purple-color);
--webkit-box-shadow: 0 0 0px 9999rem var(--white-color) inset;
-box-shadow: 0 0 0px 9999rem var(--white-color) inset;
-font-family: inherit;
-font-size: inherit;
-line-height: inherit;
-`,
+            $: ':-webkit-autofill:focus',
+            ...AUTOFILL_STYLES,
         },
         {
             $: '[disabled]',
-            css: `
--webkit-opacity: 1;
-`,
+            '-webkit-opacity': '1',
         },
         {
             $: '::placeholder',
-            css: `
--webkit-text-fill-color: var(--local-placeholder-color);
-color: var(--local-placeholder-color);
-filter: saturate(.33);
-`,
+            '-webkit-text-fill-color': 'var(--local-placeholder-color)',
+            color: 'var(--local-placeholder-color)',
+            filter: 'saturate(.33)',
         },
         {
             $: '::-webkit-search-cancel-button',
-            css: `
-display: none;
--webkit-appearance: none;
-`,
+            display: 'none',
+            '-webkit-appearance': 'none',
         },
         {
             $: ':not([disabled])::placeholder',
-            css: '--local-placeholder-color: var(--placeholder-color, rgb(var(--dark-color-rgb) / .3));\n',
+            '--local-placeholder-color': 'var(--placeholder-color, rgb(var(--dark-color-rgb) / .3))',
         },
     ],
     button: [
         {
-            css: `
-appearance: none;
-touch-action: manipulation;
--webkit-tap-highlight-color: transparent;
-text-decoration: none;
-`,
+            appearance: 'none',
+            'touch-action': 'manipulation',
+            '-webkit-tap-highlight-color': 'transparent',
+            'text-decoration': 'none',
         },
     ],
 };
@@ -77,12 +72,13 @@ export function resetStyle({ reset }) {
         return;
     const processed = parseStyle(reset);
     const { mods } = processed.groups[0] ?? { mods: [] };
-    return mods.reduce((sum, mod) => {
+    const result = [];
+    for (const mod of mods) {
         if (RESET_MAP[mod]) {
-            sum.push(...RESET_MAP[mod]);
+            result.push(...RESET_MAP[mod]);
         }
-        return sum;
-    }, []);
+    }
+    return result.length ? result : undefined;
 }
 resetStyle.__lookupStyles = ['reset'];
 

package/es/tasty/styles/scrollbar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * Released under the MIT license.
  */
 
@@ -33,6 +33,7 @@ const MAP = {
         'border',
         'border-radius',
         'outline',
+        'opacity',
     ],
     inset: ['box-shadow'],
     mark: ['box-shadow'],

package/es/tasty/styles/types.js

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

package/es/tasty/tasty.js

@@ -1,14 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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 } from './injector';
 import { BreakpointsContext } from './providers/BreakpointsProvider';
 import { BASE_STYLES } from './styles/list';
 import { cacheWrapper } from './utils/cache-wrapper';
@@ -16,7 +15,20 @@ 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';
+/**
+ * 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,29 @@ 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 styleResults = useMemo(() => {
             if (!styles)
-                return '';
-            return `\n{}${selector}{${renderStyles(styles, pointsToZones(breakpointsList))}}`;
-        }, [breakpointsHash]);
-        return _jsx(Element, { "$css": css });
+                return [];
+            return renderStyles(styles, breakpointsList, selector, true);
+        }, [selector, breakpointsHash]);
+        // Inject styles at insertion phase; cleanup on change/unmount
+        useInsertionEffect(() => {
+            disposeRef.current?.();
+            if (styleResults.length === 0)
+                return;
+            const { dispose } = inject(styleResults);
+            disposeRef.current = dispose;
+            return () => {
+                disposeRef.current?.();
+                disposeRef.current = null;
+            };
+        }, [styleResults]);
+        return null;
     };
     _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${selector})`;
     return _StyleDeclarationComponent;
@@ -112,16 +136,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 +175,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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * 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.74.2
+ * @cube-dev/ui-kit v0.75.0
  * Released under the MIT license.
  */