@cube-dev/ui-kit 0.0.0-canary-0f4773b → 0.0.0-canary-458bf0e

package/es/tasty/styles/padding.js

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

package/es/tasty/styles/paddingBlock.js

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

package/es/tasty/styles/paddingInline.js

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

package/es/tasty/styles/place.js

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

package/es/tasty/styles/predefined.js

@@ -1,10 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-0f4773b
+ * @cube-dev/ui-kit v0.0.0-canary-458bf0e
  * Released under the MIT license.
  */
 
+import { styleHandlerCacheWrapper, } from '../utils/styles';
 import { alignStyle } from './align';
 import { borderStyle } from './border';
 import { colorStyle } from './color';
@@ -67,6 +68,7 @@ export function defineCustomStyle(names, handler) {
         console.warn('CubeUIKit: incorrect custom style definition: ', names);
         return;
     }
+    handlerWithLookup = styleHandlerCacheWrapper(handlerWithLookup);
     if (Array.isArray(names)) {
         // just to pass type checking
         names.forEach((name) => {

package/es/tasty/styles/preset.js

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

package/es/tasty/styles/reset.js

@@ -1,69 +1,74 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-0f4773b
+ * @cube-dev/ui-kit v0.0.0-canary-458bf0e
  * 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: [
         {
-            '-webkit-appearance': 'none',
-            'word-spacing': 'initial',
-            '-webkit-text-fill-color': 'currentColor',
+            css: `
+-webkit-appearance: none;
+word-spacing: initial;
+-webkit-text-fill-color: currentColor;
+`,
         },
         {
             $: '::-webkit-search-cancel-button',
-            display: 'none',
-        },
-        {
-            $: ':-webkit-autofill',
-            ...AUTOFILL_STYLES,
-        },
-        {
-            $: ':-webkit-autofill:hover',
-            ...AUTOFILL_STYLES,
+            css: 'display: none',
         },
         {
-            $: ':-webkit-autofill:focus',
-            ...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;
+`,
         },
         {
             $: '[disabled]',
-            '-webkit-opacity': '1',
+            css: `
+-webkit-opacity: 1;
+`,
         },
         {
             $: '::placeholder',
-            '-webkit-text-fill-color': 'var(--local-placeholder-color)',
-            color: 'var(--local-placeholder-color)',
-            filter: 'saturate(.33)',
+            css: `
+-webkit-text-fill-color: var(--local-placeholder-color);
+color: var(--local-placeholder-color);
+filter: saturate(.33);
+`,
         },
         {
             $: '::-webkit-search-cancel-button',
-            display: 'none',
-            '-webkit-appearance': 'none',
+            css: `
+display: none;
+-webkit-appearance: none;
+`,
         },
         {
             $: ':not([disabled])::placeholder',
-            '--local-placeholder-color': 'var(--placeholder-color, rgb(var(--dark-color-rgb) / .3))',
+            css: '--local-placeholder-color: var(--placeholder-color, rgb(var(--dark-color-rgb) / .3));\n',
         },
     ],
     button: [
         {
-            appearance: 'none',
-            'touch-action': 'manipulation',
-            '-webkit-tap-highlight-color': 'transparent',
-            'text-decoration': 'none',
+            css: `
+appearance: none;
+touch-action: manipulation;
+-webkit-tap-highlight-color: transparent;
+text-decoration: none;
+`,
         },
     ],
 };
@@ -72,13 +77,12 @@ export function resetStyle({ reset }) {
         return;
     const processed = parseStyle(reset);
     const { mods } = processed.groups[0] ?? { mods: [] };
-    const result = [];
-    for (const mod of mods) {
+    return mods.reduce((sum, mod) => {
         if (RESET_MAP[mod]) {
-            result.push(...RESET_MAP[mod]);
+            sum.push(...RESET_MAP[mod]);
         }
-    }
-    return result.length ? result : undefined;
+        return sum;
+    }, []);
 }
 resetStyle.__lookupStyles = ['reset'];
 

package/es/tasty/styles/scrollbar.js

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

package/es/tasty/tasty.js

@@ -1,34 +1,22 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-0f4773b
+ * @cube-dev/ui-kit v0.0.0-canary-458bf0e
  * Released under the MIT license.
  */
 
-import { createElement, forwardRef, useContext, useInsertionEffect, useMemo, useRef, } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement, forwardRef, useContext, useMemo, } from 'react';
 import { isValidElementType } from 'react-is';
-import { inject, injectGlobal } from './injector';
+import styledComponents, { createGlobalStyle } from 'styled-components';
 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 { renderStyles, renderStylesForGlobal } from './utils/renderStyles';
-/**
- * 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;
-}
+import { renderStyles } from './utils/renderStyles';
+import { pointsToZones } from './utils/responsive';
 // Implementation
 export function tasty(Component, options) {
     if (typeof Component === 'string') {
@@ -41,28 +29,17 @@ 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(',');
-        const disposeRef = useRef(null);
-        const cssText = useMemo(() => {
+        let css = useMemo(() => {
             if (!styles)
                 return '';
-            return renderStylesForGlobal(styles, breakpointsList);
+            return `\n{}${selector}{${renderStyles(styles, pointsToZones(breakpointsList))}}`;
         }, [breakpointsHash]);
-        // Inject styles at insertion phase; cleanup on change/unmount
-        useInsertionEffect(() => {
-            disposeRef.current?.();
-            if (!cssText)
-                return;
-            disposeRef.current = injectGlobal(selector, cssText);
-            return () => {
-                disposeRef.current?.();
-                disposeRef.current = null;
-            };
-        }, [cssText, selector]);
-        return null;
+        return _jsx(Element, { "$css": css });
     };
     _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${selector})`;
     return _StyleDeclarationComponent;
@@ -135,19 +112,16 @@ 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) => {
-            // Allocate a stable class for default styles
-            const defaultClassName = allocateClassName(JSON.stringify(defaultStyles || {}));
-            return renderStyles(defaultStyles || {}, breakpoints, defaultClassName);
-        });
+        const renderDefaultStyles = cacheWrapper((breakpoints) => renderStyles(defaultStyles || {}, pointsToZones(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, className: userClassName, ...otherProps } = allProps;
+            let { as, styles, variant: _omitVariant, breakpoints, mods, element, qa, qaVal, ...otherProps } = allProps;
             let propStyles = (styleProps
                 ? styleProps.concat(BASE_STYLES)
                 : BASE_STYLES).reduce((map, prop) => {
@@ -174,73 +148,26 @@ function tastyElement(tastyOptions) {
                 : mergeStyles(defaultStyles, styles, propStyles), [styleCacheKey]);
             let contextBreakpoints = useContext(BreakpointsContext);
             breakpoints = breakpoints ?? contextBreakpoints;
-            // 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 renderedStyles = useMemo(() => useDefaultStyles
+                ? renderDefaultStyles(breakpoints)
+                : renderStyles(allStyles, pointsToZones(breakpoints)), [allStyles, breakpoints?.join(',')]);
             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,
             };
-            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;
+            return createElement(Element, elementProps);
         });
     }
     _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.0.0-canary-0f4773b
+ * @cube-dev/ui-kit v0.0.0-canary-458bf0e
  * 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-0f4773b
+ * @cube-dev/ui-kit v0.0.0-canary-458bf0e
  * 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-0f4773b
+ * @cube-dev/ui-kit v0.0.0-canary-458bf0e
  * 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-0f4773b
+ * @cube-dev/ui-kit v0.0.0-canary-458bf0e
  * 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-0f4773b
+ * @cube-dev/ui-kit v0.0.0-canary-458bf0e
  * 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-0f4773b
+ * @cube-dev/ui-kit v0.0.0-canary-458bf0e
  * 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-0f4773b
+ * @cube-dev/ui-kit v0.0.0-canary-458bf0e
  * Released under the MIT license.
  */
 

package/es/tasty/utils/getModCombinations.js

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

package/es/tasty/utils/mergeStyles.js

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