@cube-dev/ui-kit 0.74.3 → 0.76.0

package/es/tasty/styles/reset.js

@@ -1,74 +1,69 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.74.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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 { allocateClassName, inject, injectGlobal } from './injector';
 import { BreakpointsContext } from './providers/BreakpointsProvider';
 import { BASE_STYLES } from './styles/list';
 import { cacheWrapper } from './utils/cache-wrapper';
@@ -16,7 +15,15 @@ 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 { stringifyStyles } from './utils/styles';
+/**
+ * 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') {
@@ -29,17 +36,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 styleResults = useMemo(() => {
             if (!styles)
-                return '';
-            return `\n{}${selector}{${renderStyles(styles, pointsToZones(breakpointsList))}}`;
-        }, [breakpointsHash]);
-        return _jsx(Element, { "$css": css });
+                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;
@@ -112,62 +130,129 @@ 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) => {
+            // 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, breakpoints, mods, element, qa, qaVal, ...otherProps } = allProps;
-            let propStyles = (styleProps
+            let { as, styles, variant: _omitVariant, breakpoints, mods, element, qa, qaVal, className: userClassName, ...otherProps } = allProps;
+            // Optimize propStyles extraction - avoid creating empty objects
+            let propStyles = null;
+            const propsToCheck = styleProps
                 ? styleProps.concat(BASE_STYLES)
-                : BASE_STYLES).reduce((map, prop) => {
+                : BASE_STYLES;
+            for (const prop of propsToCheck) {
                 const key = prop;
                 if (Object.prototype.hasOwnProperty.call(otherProps, key)) {
-                    map[key] = otherProps[key];
+                    if (!propStyles)
+                        propStyles = {};
+                    propStyles[key] = otherProps[key];
                     delete otherProps[key];
                 }
-                return map;
-            }, {});
-            if (Object.keys(propStyles).length === 0) {
-                propStyles = null;
             }
             if (!styles ||
                 (styles && Object.keys(styles).length === 0)) {
                 styles = undefined;
             }
-            const propStylesCacheKey = JSON.stringify(propStyles);
-            const stylesCacheKey = useMemo(() => JSON.stringify(styles), [styles]);
-            const useDefaultStyles = !propStyles && !styles;
-            const styleCacheKey = useMemo(() => `${styles ? JSON.stringify(styles) : ''}.${propStyles ? JSON.stringify(propStyles) : ''}`, [propStylesCacheKey, stylesCacheKey]);
-            let allStyles = useMemo(() => useDefaultStyles
-                ? defaultStyles
-                : 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(',')]);
+            // Memoize breakpoints key once
+            const breakpointsKey = useMemo(() => breakpoints?.join(',') || '', [breakpoints?.join(',')]);
+            // 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;
+                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, propStyles, 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 () => {
+                    disposeRef.current?.();
+                    disposeRef.current = null;
+                };
+            }, [directResult.rules, cacheKey]);
+            const injectedClassName = allocatedClassName;
             let modProps;
             if (mods) {
                 const modsObject = mods;
                 modProps = modAttrs(modsObject);
             }
+            // Merge user className with injected className
+            const finalClassName = [
+                userClassName || '',
+                injectedClassName,
+            ]
+                .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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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.3
+ * @cube-dev/ui-kit v0.76.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/isDevEnv.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.76.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Check if we're in a development environment at runtime
+ * Uses bracket notation to avoid bundler compilation
+ * Also checks for TASTY_DEBUG localStorage setting
+ */
+export function isDevEnv() {
+    // Check localStorage for DEBUG_TASTY setting (browser environment)
+    if (typeof window !== 'undefined' && window.localStorage) {
+        try {
+            const forceTastyDebug = window.localStorage.getItem('TASTY_DEBUG');
+            if (forceTastyDebug !== null &&
+                forceTastyDebug.toLowerCase() === 'true') {
+                return true;
+            }
+        }
+        catch {
+            // localStorage might not be available (private browsing, etc.)
+            // Continue with other checks
+        }
+    }
+    // Check NODE_ENV for Node.js environments
+    if (typeof process === 'undefined')
+        return false;
+    // Use bracket notation to avoid bundler replacement
+    const nodeEnv = process.env?.['NODE_ENV'];
+    return nodeEnv !== 'test' && nodeEnv !== 'production';
+}
+
+        

package/es/tasty/utils/mergeStyles.js

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