@cube-dev/ui-kit 0.99.3 → 0.100.0

package/es/tasty/styles/width.js

@@ -1,15 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
 import { dimensionStyle } from './dimension.js';
 const dimension = dimensionStyle('width');
-export function widthStyle({ width }) {
-    return dimension(width);
+export function widthStyle({ width, minWidth, maxWidth }) {
+    return dimension({ value: width, min: minWidth, max: maxWidth });
 }
-widthStyle.__lookupStyles = ['width'];
+widthStyle.__lookupStyles = ['width', 'minWidth', 'maxWidth'];
 
         

package/es/tasty/tasty.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
@@ -139,126 +139,107 @@ function tastyWrap(Component, options) {
 }
 function tastyElement(tastyOptions) {
     let { as: originalAs = 'div', element: defaultElement, styles: defaultStyles, styleProps, variants, tokens: defaultTokens, elements, ...defaultProps } = tastyOptions;
-    let _TastyComponent;
+    // Pre-compute merged styles for each variant (if variants are defined)
+    // This avoids creating separate component instances per variant
+    let variantStylesMap;
     if (variants) {
         const variantEntries = Object.entries(variants);
-        const variantComponents = variantEntries.reduce((map, [variant, variantStyles]) => {
-            map[variant] = tastyElement({
-                as: originalAs,
-                styles: mergeStyles(defaultStyles, variantStyles),
-                styleProps,
-                tokens: defaultTokens,
-                ...defaultProps,
-            });
+        variantStylesMap = variantEntries.reduce((map, [variant, variantStyles]) => {
+            map[variant] = mergeStyles(defaultStyles, variantStyles);
             return map;
         }, {});
-        if (!variantComponents['default']) {
-            variantComponents['default'] = tastyElement({
-                as: originalAs,
-                styles: defaultStyles,
-                styleProps,
-                tokens: defaultTokens,
-                ...defaultProps,
-            });
+        // Ensure 'default' variant always exists
+        if (!variantStylesMap['default']) {
+            variantStylesMap['default'] = defaultStyles;
         }
-        // eslint-disable-next-line react/display-name
-        _TastyComponent = forwardRef((allProps, ref) => {
-            const { variant, ...restProps } = allProps;
-            const Component = variantComponents[variant || 'default'] ??
-                variantComponents['default'];
-            const componentProps = restProps;
-            const elementProps = {
-                ...componentProps,
-                ref,
-            };
-            return createElement(Component, elementProps);
-        });
     }
-    else {
-        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;
-            // Optimize propStyles extraction - avoid creating empty objects
-            let propStyles = null;
-            const propsToCheck = styleProps
-                ? styleProps.concat(BASE_STYLES)
-                : BASE_STYLES;
-            for (const prop of propsToCheck) {
-                const key = prop;
-                if (!propStyles)
-                    propStyles = {};
-                if (key in otherProps) {
-                    propStyles[key] = otherProps[key];
-                    delete otherProps[key];
-                }
-            }
-            if (!styles ||
-                (styles && Object.keys(styles).length === 0)) {
-                styles = undefined;
+    let { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
+    const _TastyComponent = forwardRef((allProps, ref) => {
+        let { as, styles, variant, mods, element, qa, qaVal, className: userClassName, tokens, style, ...otherProps } = allProps;
+        // Optimize propStyles extraction - avoid creating empty objects
+        let propStyles = null;
+        const propsToCheck = styleProps
+            ? styleProps.concat(BASE_STYLES)
+            : BASE_STYLES;
+        for (const prop of propsToCheck) {
+            const key = prop;
+            if (!propStyles)
+                propStyles = {};
+            if (key in otherProps) {
+                propStyles[key] = otherProps[key];
+                delete otherProps[key];
             }
-            // Merge default styles with instance styles and prop styles
-            const allStyles = useMemo(() => {
-                const hasStyles = styles && Object.keys(styles).length > 0;
-                const hasPropStyles = propStyles && Object.keys(propStyles).length > 0;
-                if (!hasStyles && !hasPropStyles) {
-                    return defaultStyles;
-                }
-                return mergeStyles(defaultStyles, styles, propStyles);
-            }, [styles, propStyles]);
-            // Use the useStyles hook for style generation and injection
-            const { className: stylesClassName } = useStyles(allStyles);
-            // Merge default tokens with instance tokens (instance overrides defaults)
-            const tokensKey = stringifyTokens(tokens);
-            const mergedTokens = useMemo(() => {
-                if (!defaultTokens && !tokens)
-                    return undefined;
-                if (!defaultTokens)
-                    return tokens;
-                if (!tokens)
-                    return defaultTokens;
-                return { ...defaultTokens, ...tokens };
-            }, [tokensKey]);
-            // Process merged tokens into inline style properties
-            const processedTokenStyle = useMemo(() => {
-                return processTokens(mergedTokens);
-            }, [mergedTokens]);
-            // Merge processed tokens with explicit style prop (style has priority)
-            const mergedStyle = useMemo(() => {
-                if (!processedTokenStyle && !style)
-                    return undefined;
-                if (!processedTokenStyle)
-                    return style;
-                if (!style)
-                    return processedTokenStyle;
-                return { ...processedTokenStyle, ...style };
-            }, [processedTokenStyle, style]);
-            let modProps;
-            if (mods) {
-                const modsObject = mods;
-                modProps = modAttrs(modsObject);
+        }
+        if (!styles ||
+            (styles && Object.keys(styles).length === 0)) {
+            styles = undefined;
+        }
+        // Determine base styles: use variant styles if available, otherwise default styles
+        const baseStyles = variantStylesMap
+            ? variantStylesMap[variant || 'default'] ??
+                variantStylesMap['default']
+            : defaultStyles;
+        // Merge base styles with instance styles and prop styles
+        const allStyles = useMemo(() => {
+            const hasStyles = styles && Object.keys(styles).length > 0;
+            const hasPropStyles = propStyles && Object.keys(propStyles).length > 0;
+            if (!hasStyles && !hasPropStyles) {
+                return baseStyles;
             }
-            // Merge user className with generated className
-            const finalClassName = [userClassName || '', stylesClassName]
-                .filter(Boolean)
-                .join(' ');
-            const elementProps = {
-                'data-element': element || defaultElement,
-                'data-qa': qa || defaultQa,
-                'data-qaval': qaVal || defaultQaVal,
-                ...otherDefaultProps,
-                ...(modProps || {}),
-                ...otherProps,
-                className: finalClassName,
-                style: mergedStyle,
-                ref,
-            };
-            // Apply the helper to handle is* properties
-            handleIsProperties(elementProps);
-            const renderedElement = createElement(as ?? originalAs, elementProps);
-            return renderedElement;
-        });
-    }
+            return mergeStyles(baseStyles, styles, propStyles);
+        }, [baseStyles, styles, propStyles]);
+        // Use the useStyles hook for style generation and injection
+        const { className: stylesClassName } = useStyles(allStyles);
+        // Merge default tokens with instance tokens (instance overrides defaults)
+        const tokensKey = stringifyTokens(tokens);
+        const mergedTokens = useMemo(() => {
+            if (!defaultTokens && !tokens)
+                return undefined;
+            if (!defaultTokens)
+                return tokens;
+            if (!tokens)
+                return defaultTokens;
+            return { ...defaultTokens, ...tokens };
+        }, [tokensKey]);
+        // Process merged tokens into inline style properties
+        const processedTokenStyle = useMemo(() => {
+            return processTokens(mergedTokens);
+        }, [mergedTokens]);
+        // Merge processed tokens with explicit style prop (style has priority)
+        const mergedStyle = useMemo(() => {
+            if (!processedTokenStyle && !style)
+                return undefined;
+            if (!processedTokenStyle)
+                return style;
+            if (!style)
+                return processedTokenStyle;
+            return { ...processedTokenStyle, ...style };
+        }, [processedTokenStyle, style]);
+        let modProps;
+        if (mods) {
+            const modsObject = mods;
+            modProps = modAttrs(modsObject);
+        }
+        // Merge user className with generated className
+        const finalClassName = [userClassName || '', stylesClassName]
+            .filter(Boolean)
+            .join(' ');
+        const elementProps = {
+            'data-element': element || defaultElement,
+            'data-qa': qa || defaultQa,
+            'data-qaval': qaVal || defaultQaVal,
+            ...otherDefaultProps,
+            ...(modProps || {}),
+            ...otherProps,
+            className: finalClassName,
+            style: mergedStyle,
+            ref,
+        };
+        // Apply the helper to handle is* properties
+        handleIsProperties(elementProps);
+        const renderedElement = createElement(as ?? originalAs, elementProps);
+        return renderedElement;
+    });
     _TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
     // Attach sub-element components if elements are defined
     if (elements) {

package/es/tasty/types.js

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

package/es/tasty/utils/isDevEnv.js

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

package/es/tasty/utils/processTokens.js

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

package/es/tasty/utils/styles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
@@ -29,22 +29,16 @@ const SIMPLE_COLOR_PATTERNS = [
 let colorWarningCount = 0;
 const MAX_COLOR_WARNINGS = 10;
 export const CUSTOM_UNITS = {
-    r: 'var(--radius)',
-    cr: 'var(--card-radius)',
-    bw: 'var(--border-width)',
-    ow: 'var(--outline-width)',
-    x: 'var(--gap)',
+    r: '6px',
+    cr: '10px',
+    bw: '1px',
+    ow: '3px',
+    x: '8px',
     fs: 'var(--font-size)',
     lh: 'var(--line-height)',
-    rp: 'var(--rem-pixel)',
-    gp: 'var(--column-gap)',
     sf: function sf(num) {
         return `minmax(0, ${num}fr)`;
     },
-    // span unit for GridProvider
-    sp: function spanWidth(num) {
-        return `((${num} * var(--column-width)) + (${num - 1} * var(--column-gap)))`;
-    },
 };
 export const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
 const MOD_NAME_CACHE = new Map();
@@ -123,6 +117,51 @@ export function getGlobalParser() {
 export function getGlobalFuncs() {
     return __tastyFuncs;
 }
+// ============================================================================
+// Global Predefined Tokens
+// ============================================================================
+/**
+ * Storage for predefined tokens that are replaced during style parsing.
+ * Keys are token names (with $ or # prefix), values are pre-processed CSS values.
+ */
+let __globalPredefinedTokens = null;
+/**
+ * Set global predefined tokens.
+ * Called from configure() after processing token values.
+ * Merges with existing tokens (new tokens override existing ones with same key).
+ * Keys are normalized to lowercase (parser lowercases input before classification).
+ * @internal
+ */
+export function setGlobalPredefinedTokens(tokens) {
+    // Normalize keys to lowercase for case-insensitive matching
+    const normalizedTokens = {};
+    for (const [key, value] of Object.entries(tokens)) {
+        normalizedTokens[key.toLowerCase()] = value;
+    }
+    // Merge with existing tokens (consistent with how states, units, funcs are handled)
+    __globalPredefinedTokens = __globalPredefinedTokens
+        ? { ...__globalPredefinedTokens, ...normalizedTokens }
+        : normalizedTokens;
+    // Clear parser cache since token values affect parsing
+    __tastyParser.clearCache();
+}
+/**
+ * Get the current global predefined tokens.
+ * Returns null if no tokens are configured.
+ */
+export function getGlobalPredefinedTokens() {
+    return __globalPredefinedTokens;
+}
+/**
+ * Reset global predefined tokens.
+ * Used for testing.
+ * @internal
+ */
+export function resetGlobalPredefinedTokens() {
+    __globalPredefinedTokens = null;
+    // Clear parser cache since token availability affects parsing
+    __tastyParser.clearCache();
+}
 /**
  *
  * @param {String} value

package/es/tasty/utils/typography.js

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

package/es/tasty/utils/warnings.js

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

package/es/tasty/zero/babel.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
@@ -25,9 +25,8 @@
  */
 import { declare } from '@babel/helper-plugin-utils';
 import * as t from '@babel/types';
-import { setGlobalPredefinedStates } from '../states/index.js';
+import { configure } from '../config.js';
 import { mergeStyles } from '../utils/mergeStyles.js';
-import { CUSTOM_UNITS, getGlobalFuncs, getGlobalParser } from '../utils/styles.js';
 import { CSSWriter } from './css-writer.js';
 import { extractKeyframesFromStyles, extractStylesForSelector, extractStylesWithChunks, } from './extractor.js';
 export default declare((api, options) => {
@@ -35,25 +34,9 @@ export default declare((api, options) => {
     const outputPath = options.output || 'tasty.css';
     const config = options.config || {};
     const devMode = config.devMode ?? false;
-    // Apply global predefined states if configured
-    if (config.states) {
-        setGlobalPredefinedStates(config.states);
-    }
-    // Apply parser configuration (merge semantics - extend, not replace)
-    const parser = getGlobalParser();
-    if (config.units) {
-        // Merge with existing units
-        const currentUnits = parser.getUnits() ?? CUSTOM_UNITS;
-        parser.setUnits({ ...currentUnits, ...config.units });
-    }
-    if (config.funcs) {
-        // Merge with existing funcs
-        const currentFuncs = getGlobalFuncs();
-        const mergedFuncs = { ...currentFuncs, ...config.funcs };
-        parser.setFuncs(mergedFuncs);
-        // Also update the global registry so customFunc() continues to work
-        Object.assign(currentFuncs, config.funcs);
-    }
+    // Apply configuration using the shared configure() function
+    // This handles plugin merging, states, units, funcs, handlers, tokens, etc.
+    configure(config);
     const cssWriter = new CSSWriter(outputPath, { devMode });
     // Global registry for cross-file references (same build)
     const globalRegistry = {};

package/es/tasty/zero/css-writer.js

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

package/es/tasty/zero/extractor.js

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

package/es/tasty/zero/index.js

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

package/es/tasty/zero/next.js

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

package/es/tokens/base.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
@@ -51,6 +51,10 @@ export const BASE_TOKENS = {
     $transition: '80ms',
     /** Transition for disclosure animations */
     '$disclosure-transition': '120ms',
+    /** Transition for tab animations */
+    '$tab-transition': '120ms',
+    /** Transition for fade animations */
+    '$fade-transition': '200ms',
     // Scrollbar tokens
     '$scrollbar-width': '1.5x',
     '$scrollbar-outline-width': '1ow',

package/es/tokens/colors.js

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

package/es/tokens/index.js

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

package/es/tokens/layout.js

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

package/es/tokens/shadows.js

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

package/es/tokens/sizes.js

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

package/es/tokens/spacing.js

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