@cube-dev/ui-kit 0.16.3 → 0.17.0

package/es/tasty/styles/padding.js

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

package/es/tasty/tasty.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.16.3
+ * @cube-dev/ui-kit v0.17.0
  * Released under the MIT license.
  */
 
@@ -14,9 +14,9 @@ import { modAttrs } from './utils/modAttrs';
 import { renderStyles } from './utils/renderStyles';
 import { pointsToZones } from './utils/responsive';
 import { BASE_STYLES } from './styles/list';
-import { cacheWrapper } from './utils/styles';
+import { cacheWrapper } from './utils/cache-wrapper';
 import { mergeStyles } from './utils/mergeStyles';
-import { getDisplayName } from './utils/get-display-name';
+import { getDisplayName } from './utils/getDisplayName';
 // Implementation
 function tasty(Component, options) {
     if (typeof Component === 'string') {
@@ -29,7 +29,7 @@ function tasty(Component, options) {
             let css = useMemo(() => styles
                 ? `\n{}${selector}{${renderStyles(styles, pointsToZones(breakpoints || contextBreakpoints))}}`
                 : '', [breakpoints.join(',')]);
-            return _jsx(Element, { css: css }, void 0);
+            return _jsx(Element, { css: css });
         };
         _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${Component})`;
         return _StyleDeclarationComponent;
@@ -51,62 +51,97 @@ function tasty(Component, options) {
                     return map;
                 }, {});
             }, propsWithStylesValues);
-            return (_jsx(Component, { ref: ref, ...defaultProps, ...restProps, ...mergedStylesMap, as: as ?? extendTag, element: element || extendElement }, void 0));
+            return (_jsx(Component, { ref: ref, ...defaultProps, ...restProps, ...mergedStylesMap, as: as ?? extendTag, element: element || extendElement }));
         });
         _WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(Component, defaultProps.qa ?? extendTag ?? 'Anonymous')})`;
         return _WrappedComponent;
     }
-    options = Component;
-    let { as: originalAs = 'div', element: defaultElement, styles: defaultStyles, styleProps, ...defaultProps } = options;
-    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) => {
-        return renderStyles(defaultStyles, pointsToZones(breakpoints));
-    });
-    let { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
-    let _TastyComponent = forwardRef((allProps, ref) => {
-        let { as, styles, breakpoints, mods, element, qa, qaVal, ...otherProps } = allProps;
-        let propStyles = (styleProps
-            ? styleProps.concat(BASE_STYLES)
-            : BASE_STYLES).reduce((map, prop) => {
-            if (prop in otherProps) {
-                map[prop] = otherProps[prop];
-                delete otherProps[prop];
-            }
+    const tastyOptions = Component;
+    let { as: originalAs = 'div', element: defaultElement, styles: defaultStyles, styleProps, variants, ...defaultProps } = tastyOptions;
+    let _TastyComponent;
+    if (variants) {
+        /**
+         * Create a tasty component for each variant.
+         * Then return a component that receives a `variant` and chooses the right component.
+         */
+        const variantComponents = Object.keys(variants).reduce((map, variant) => {
+            const variantStyles = variants?.[variant];
+            map[variant] = tasty({
+                as: originalAs,
+                styles: mergeStyles(defaultStyles, variantStyles),
+                styleProps,
+                ...defaultProps,
+            });
             return map;
         }, {});
-        if (Object.keys(propStyles).length === 0) {
-            propStyles = null;
-        }
-        if (!styles || (styles && Object.keys(styles).length === 0)) {
-            styles = undefined;
+        if (!variantComponents['default']) {
+            variantComponents['default'] = tasty({
+                as: originalAs,
+                styles: defaultStyles,
+                styleProps,
+                ...defaultProps,
+            });
         }
-        const propStylesCacheKey = JSON.stringify(propStyles);
-        const stylesCacheKey = useMemo(() => {
-            return JSON.stringify(styles);
-        }, [styles]);
-        const useDefaultStyles = !propStyles && !styles;
-        const styleCacheKey = useMemo(() => {
-            return `${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(() => {
-            return useDefaultStyles
-                ? renderDefaultStyles(breakpoints)
-                : renderStyles(allStyles, pointsToZones(breakpoints));
-        }, [allStyles, breakpoints]);
-        if (mods) {
-            Object.assign(otherProps, modAttrs(mods));
-        }
-        return (_jsx(Element, { as: as ?? originalAs, "data-element": element || defaultElement, "data-qa": qa || defaultQa, "data-qaval": qaVal || defaultQaVal, ...otherDefaultProps, ...otherProps, ref: ref, css: renderedStyles }, void 0));
-    });
+        // eslint-disable-next-line react/display-name
+        _TastyComponent = forwardRef((allProps, ref) => {
+            const { variant, ...restProps } = allProps;
+            const Component = (variantComponents[variant] ||
+                variantComponents['default']);
+            return _jsx(Component, { ...restProps, ref: ref });
+        });
+    }
+    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) => {
+            return 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, breakpoints, mods, element, qa, qaVal, ...otherProps } = allProps;
+            let propStyles = (styleProps
+                ? styleProps.concat(BASE_STYLES)
+                : BASE_STYLES).reduce((map, prop) => {
+                if (prop in otherProps) {
+                    map[prop] = otherProps[prop];
+                    delete otherProps[prop];
+                }
+                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(() => {
+                return JSON.stringify(styles);
+            }, [styles]);
+            const useDefaultStyles = !propStyles && !styles;
+            const styleCacheKey = useMemo(() => {
+                return `${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(() => {
+                return useDefaultStyles
+                    ? renderDefaultStyles(breakpoints)
+                    : renderStyles(allStyles, pointsToZones(breakpoints));
+            }, [allStyles, breakpoints]);
+            if (mods) {
+                Object.assign(otherProps, modAttrs(mods));
+            }
+            return (_jsx(Element, { as: as ?? originalAs, "data-element": element || defaultElement, "data-qa": qa || defaultQa, "data-qaval": qaVal || defaultQaVal, ...otherDefaultProps, ...otherProps, ref: ref, css: renderedStyles }));
+        });
+    }
     _TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
     return _TastyComponent;
 }

package/es/tasty/types.js

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

package/es/tasty/utils/cache-wrapper.js

@@ -0,0 +1,31 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.17.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Create a function that caches the result up to the limit.
+ */
+export function cacheWrapper(handler, limit = 1000) {
+    let cache = {};
+    let count = 0;
+    return ((firstArg, secondArg) => {
+        const key = typeof firstArg === 'string' && secondArg == null
+            ? firstArg
+            : JSON.stringify([firstArg, secondArg]);
+        if (!cache[key]) {
+            if (count > limit) {
+                cache = {};
+                count = 0;
+            }
+            count++;
+            cache[key] =
+                secondArg == null ? handler(firstArg) : handler(firstArg, secondArg);
+        }
+        return cache[key];
+    });
+}
+
+        

package/es/tasty/utils/case-converter.js

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.17.0
+ * Released under the MIT license.
+ */
+
+export function camelToKebab(str) {
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+        

package/es/tasty/utils/colors.js

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

package/es/tasty/utils/{get-display-name.js → getDisplayName.js}

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

package/es/tasty/utils/index.js

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

package/es/tasty/utils/modAttrs.js

@@ -1,19 +1,23 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.16.3
+ * @cube-dev/ui-kit v0.17.0
  * Released under the MIT license.
  */
 
-export function modAttrs(map) {
+import { camelToKebab } from './case-converter';
+import { cacheWrapper } from './cache-wrapper';
+function modAttrs(map) {
     return map
         ? Object.keys(map).reduce((attrs, key) => {
             if (map[key]) {
-                attrs[`data-is-${key}`] = '';
+                attrs[`data-is-${camelToKebab(key)}`] = '';
             }
             return attrs;
         }, {})
         : null;
 }
+const _modAttrs = cacheWrapper(modAttrs);
+export { _modAttrs as modAttrs };
 
         

package/es/tasty/utils/renderStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.16.3
+ * @cube-dev/ui-kit v0.17.0
  * Released under the MIT license.
  */
 
@@ -35,7 +35,7 @@ const CACHE_LIMIT = 1000;
  * @param {string} [suffix]
  * @return {string}
  */
-export function renderStyles(styles, responsive, suffix) {
+export function renderStyles(styles, responsive = [], suffix) {
     const zones = responsive;
     const responsiveStyles = Array.from(Array(zones.length)).map(() => '');
     const cacheKey = JSON.stringify({ s: styles, r: responsive, suffix });
@@ -54,7 +54,7 @@ export function renderStyles(styles, responsive, suffix) {
         if (selectorKeys.length) {
             selectorKeys.forEach((key) => {
                 const addSuffix = getSelector(key);
-                innerStyles += renderStyles(styles[key], responsive, addSuffix);
+                innerStyles += renderStyles(styles?.[key], responsive, addSuffix);
             });
         }
         keys.forEach((styleName) => {
@@ -70,7 +70,7 @@ export function renderStyles(styles, responsive, suffix) {
                 let isResponsive = false;
                 const lookupStyles = STYLE.__lookupStyles;
                 const filteredStyleMap = lookupStyles.reduce((map, name) => {
-                    map[name] = styles[name];
+                    map[name] = styles?.[name];
                     if (Array.isArray(map[name])) {
                         if (map[name].length === 0) {
                             delete map[name];

package/es/tasty/utils/responsive.js

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

package/es/tasty/utils/string.js

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

package/es/tasty/utils/styles.js

@@ -1,10 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.16.3
+ * @cube-dev/ui-kit v0.17.0
  * Released under the MIT license.
  */
 
+import { camelToKebab } from './case-converter';
+import { cacheWrapper } from './cache-wrapper';
 import { getModCombinations } from './index';
 const devMode = process.env.NODE_ENV !== 'production';
 const IS_DVH_SUPPORTED = typeof CSS !== 'undefined' && typeof CSS?.supports === 'function'
@@ -59,8 +61,12 @@ export function createRule(prop, value, selector) {
     }
     return `${prop}: ${value};\n`;
 }
+const MOD_NAME_CACHE = new Map();
 function getModSelector(modName) {
-    return modName.match(/^[a-z]/) ? `[data-is-${modName}]` : modName;
+    if (!MOD_NAME_CACHE.has(modName)) {
+        MOD_NAME_CACHE.set(modName, modName.match(/^[a-z]/) ? `[data-is-${camelToKebab(modName)}]` : modName);
+    }
+    return MOD_NAME_CACHE.get(modName);
 }
 /**
  *
@@ -520,7 +526,15 @@ export function applyStates(selector, states, suffix = '') {
         if (!state.value)
             return css;
         const modifiers = `${(state.mods || []).map(getModSelector).join('')}${(state.notMods || [])
-            .map((mod) => `:not(${getModSelector(mod)})`)
+            .map((mod) => {
+            let selector = getModSelector(mod);
+            if (selector.startsWith(':not(')) {
+                return selector.slice(5, -1);
+            }
+            else {
+                return `:not(${selector})`;
+            }
+        })
             .join('')}`;
         // TODO: replace `replace()` a REAL hotfix
         return `${css}${selector}${modifiers}${suffix}{\n${state.value.replace(/^&&/, '&')}}\n`;
@@ -611,7 +625,7 @@ export function styleMapToStyleMapStateList(styleMap, filterKeys) {
     });
     return styleStateList;
 }
-const STATES_REGEXP = /([&|!^])|([()])|([a-z0-6-]+)|(:[a-z0-6-]+)|(\.[a-z0-6-]+)|(\[[^\]]+])/gi;
+const STATES_REGEXP = /([&|!^])|([()])|([a-z][a-z0-9-]+)|(:[a-z][a-z0-9-]+\([:a-z0-9-]+\)|:[a-z][a-z0-9-]+)|(\.[a-z][a-z0-9-]+)|(\[[^\]]+])/gi;
 export const STATE_OPERATORS = {
     NOT: '!',
     AND: '&',
@@ -811,27 +825,5 @@ export function computeState(computeModel, valueMap) {
     }
     return !!func(a, b);
 }
-/**
- * Create a function that caches the result up to the limit.
- */
-export function cacheWrapper(handler, limit = 1000) {
-    let cache = {};
-    let count = 0;
-    return ((firstArg, secondArg) => {
-        const key = typeof firstArg === 'string' && secondArg == null
-            ? firstArg
-            : JSON.stringify([firstArg, secondArg]);
-        if (!cache[key]) {
-            if (count > limit) {
-                cache = {};
-                count = 0;
-            }
-            count++;
-            cache[key] =
-                secondArg == null ? handler(firstArg) : handler(firstArg, secondArg);
-        }
-        return cache[key];
-    });
-}
 
         

package/es/tasty/utils/warnings.js

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

package/es/tokens.js

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

package/es/type-checks.js

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

package/es/utils/ResizeSensor.js

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

package/es/utils/modules.js

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

package/es/utils/promise.js

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

package/es/utils/random.js

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