@cube-dev/ui-kit 0.99.3 → 0.100.0

package/es/tasty/styles/predefined.js

@@ -1,10 +1,11 @@
 /**
  * @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 { isDevEnv } from '../utils/isDevEnv.js';
 import { alignStyle } from './align.js';
 import { borderStyle } from './border.js';
 import { colorStyle } from './color.js';
@@ -13,10 +14,9 @@ import { displayStyle } from './display.js';
 import { fadeStyle } from './fade.js';
 import { fillStyle, svgFillStyle } from './fill.js';
 import { flowStyle } from './flow.js';
-import { fontStyle } from './font.js';
-import { fontStyleStyle } from './fontStyle.js';
+// Note: fontStyle (font.ts) and fontStyleStyle (fontStyle.ts) removed
+// Both font and fontStyle props are now handled by presetStyle
 import { gapStyle } from './gap.js';
-import { groupRadiusAttr } from './groupRadius.js';
 import { heightStyle } from './height.js';
 import { insetStyle } from './inset.js';
 import { justifyStyle } from './justify.js';
@@ -31,6 +31,7 @@ import { shadowStyle } from './shadow.js';
 import { styledScrollbarStyle } from './styledScrollbar.js';
 import { transitionStyle } from './transition.js';
 import { widthStyle } from './width.js';
+const devMode = isDevEnv();
 const numberConverter = (val) => {
     if (typeof val === 'number') {
         return `${val}px`;
@@ -50,6 +51,37 @@ const rowsConverter = (val) => {
     return;
 };
 export const STYLE_HANDLER_MAP = {};
+// Store initial handler state for reset functionality
+let initialHandlerMapSnapshot = null;
+/**
+ * Capture a snapshot of the current STYLE_HANDLER_MAP.
+ * Called after predefine() to preserve built-in handler state.
+ */
+function captureInitialHandlerState() {
+    initialHandlerMapSnapshot = {};
+    for (const key of Object.keys(STYLE_HANDLER_MAP)) {
+        // Shallow copy the array - handlers themselves are immutable
+        initialHandlerMapSnapshot[key] = [...STYLE_HANDLER_MAP[key]];
+    }
+}
+/**
+ * Reset STYLE_HANDLER_MAP to the initial built-in state.
+ * Called by resetConfig() to restore handlers after tests.
+ */
+export function resetHandlers() {
+    if (!initialHandlerMapSnapshot) {
+        // predefine() hasn't been called yet, nothing to reset
+        return;
+    }
+    // Clear current map
+    for (const key of Object.keys(STYLE_HANDLER_MAP)) {
+        delete STYLE_HANDLER_MAP[key];
+    }
+    // Restore initial state
+    for (const key of Object.keys(initialHandlerMapSnapshot)) {
+        STYLE_HANDLER_MAP[key] = [...initialHandlerMapSnapshot[key]];
+    }
+}
 export function defineCustomStyle(names, handler) {
     let handlerWithLookup;
     if (typeof names === 'function') {
@@ -81,34 +113,6 @@ export function defineStyleAlias(styleName, cssStyleName, converter) {
     STYLE_HANDLER_MAP[styleName].push(styleHandler);
 }
 export function predefine() {
-    // Manually define styles that are used in other custom styles.
-    // Otherwise, they won't be handled as expected.
-    defineStyleAlias('fontSize', 'font-size', numberConverter);
-    defineStyleAlias('lineHeight', 'line-height', numberConverter);
-    defineStyleAlias('fontWeight', 'font-weight', numberConverter);
-    defineStyleAlias('fontStyle');
-    defineStyleAlias('letterSpacing', 'letter-spacing', numberConverter);
-    defineStyleAlias('textTransform');
-    defineStyleAlias('fontFamily');
-    defineStyleAlias('overflow');
-    defineStyleAlias('paddingTop', 'padding-top', numberConverter);
-    defineStyleAlias('paddingRight', 'padding-right', numberConverter);
-    defineStyleAlias('paddingBottom', 'padding-bottom', numberConverter);
-    defineStyleAlias('paddingLeft', 'padding-left', numberConverter);
-    defineStyleAlias('marginTop', 'margin-top', numberConverter);
-    defineStyleAlias('marginRight', 'margin-right', numberConverter);
-    defineStyleAlias('marginBottom', 'margin-bottom', numberConverter);
-    defineStyleAlias('marginLeft', 'margin-left', numberConverter);
-    // Coordinates
-    defineStyleAlias('top', 'top', numberConverter);
-    defineStyleAlias('right', 'right', numberConverter);
-    defineStyleAlias('bottom', 'bottom', numberConverter);
-    defineStyleAlias('left', 'left', numberConverter);
-    // Dimensions
-    defineStyleAlias('minWidth', 'min-width', numberConverter);
-    defineStyleAlias('maxWidth', 'max-width', numberConverter);
-    defineStyleAlias('minHeight', 'min-height', numberConverter);
-    defineStyleAlias('maxHeight', 'max-height', numberConverter);
     // Style aliases
     defineStyleAlias('gridAreas', 'grid-template-areas');
     defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);
@@ -121,8 +125,7 @@ export function predefine() {
             .map((s, i) => (i ? columnsConverter : rowsConverter)(s))
             .join('/');
     });
-    // Other styles
-    defineStyleAlias('outlineOffset', 'outline-offset', numberConverter);
+    // Note: outlineOffset is now handled by outlineStyle
     [
         displayStyle,
         transitionStyle,
@@ -143,9 +146,6 @@ export function predefine() {
         justifyStyle,
         presetStyle,
         outlineStyle,
-        fontStyle,
-        fontStyleStyle,
-        groupRadiusAttr,
         // DEPRECATED: `styledScrollbar` is deprecated, use `scrollbar` instead
         styledScrollbarStyle,
         scrollbarStyle,
@@ -154,7 +154,215 @@ export function predefine() {
     ]
         // @ts-ignore
         .forEach((handler) => defineCustomStyle(handler));
+    // Capture initial state after all built-in handlers are registered
+    captureInitialHandlerState();
     return { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };
 }
+// ============================================================================
+// Handler Registration API (for configure())
+// ============================================================================
+/**
+ * Normalize a handler definition to a StyleHandler with __lookupStyles.
+ * - Function only: lookup styles inferred from key name
+ * - [string, fn]: single lookup style
+ * - [string[], fn]: multiple lookup styles
+ */
+export function normalizeHandlerDefinition(keyName, definition) {
+    let handler;
+    let lookupStyles;
+    if (typeof definition === 'function') {
+        // Function only - lookup styles inferred from key name
+        handler = definition;
+        lookupStyles = [keyName];
+    }
+    else if (Array.isArray(definition)) {
+        const [first, fn] = definition;
+        if (typeof fn !== 'function') {
+            throw new Error(`[Tasty] Invalid handler definition for "${keyName}". ` +
+                'Tuple must have a function as the second element: [string, function] or [string[], function].');
+        }
+        handler = fn;
+        if (typeof first === 'string') {
+            // [string, fn] - single lookup style
+            lookupStyles = [first];
+        }
+        else if (Array.isArray(first)) {
+            // [string[], fn] - multiple lookup styles
+            lookupStyles = first;
+        }
+        else {
+            throw new Error(`[Tasty] Invalid handler definition for "${keyName}". ` +
+                'First element must be a string or string array.');
+        }
+    }
+    else {
+        throw new Error(`[Tasty] Invalid handler definition for "${keyName}". ` +
+            'Expected function, [string, function], or [string[], function].');
+    }
+    // Validate handler in dev mode
+    validateHandler(keyName, handler, lookupStyles);
+    // Wrap the handler to avoid mutation issues when the same function
+    // is reused for multiple handler definitions. Each registration
+    // gets its own function identity with its own __lookupStyles.
+    const wrappedHandler = ((props) => handler(props));
+    wrappedHandler.__lookupStyles = lookupStyles;
+    return wrappedHandler;
+}
+/**
+ * Validate a handler definition in development mode.
+ */
+function validateHandler(name, handler, lookupStyles) {
+    if (!devMode)
+        return;
+    if (typeof handler !== 'function') {
+        console.warn(`[Tasty] Handler "${name}" is not a function. ` +
+            'Handlers must be functions that return CSSMap, CSSMap[], or void.');
+    }
+    if (!lookupStyles ||
+        !Array.isArray(lookupStyles) ||
+        lookupStyles.length === 0) {
+        console.warn(`[Tasty] Handler "${name}" has invalid lookupStyles. ` +
+            'Expected non-empty array of style names.');
+    }
+}
+/**
+ * Validate a handler result in development mode.
+ * Call this after invoking a handler to check the return value.
+ */
+export function validateHandlerResult(name, result) {
+    if (!devMode)
+        return;
+    if (result === undefined || result === null)
+        return; // void is valid
+    // Check for empty string (migration from old pattern)
+    if (result === '') {
+        console.warn(`[Tasty] Handler "${name}" returned empty string. ` +
+            'Return void/undefined instead for no output.');
+        return;
+    }
+    // Check result is object (CSSMap or CSSMap[])
+    if (typeof result !== 'object') {
+        console.warn(`[Tasty] Handler "${name}" returned invalid type: ${typeof result}. ` +
+            'Expected CSSMap, CSSMap[], or void.');
+    }
+}
+/**
+ * Register a custom handler, replacing any existing handlers for the same lookup styles.
+ * This is called by configure() to process user-defined handlers.
+ *
+ * When registering a handler for style X, any existing handler that processes X
+ * is removed from ALL its lookup styles to prevent double-processing.
+ * For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler
+ * is registered for just ['gap'], gapStyle is removed from display and flow too.
+ */
+export function registerHandler(handler) {
+    const lookupStyles = handler.__lookupStyles;
+    if (!lookupStyles || lookupStyles.length === 0) {
+        if (devMode) {
+            console.warn('[Tasty] Cannot register handler without __lookupStyles property.');
+        }
+        return;
+    }
+    // Find and remove existing handlers that would conflict
+    // A handler conflicts if it handles any of the same styles as the new handler
+    const handlersToRemove = new Set();
+    for (const styleName of lookupStyles) {
+        const existing = STYLE_HANDLER_MAP[styleName];
+        if (existing) {
+            for (const existingHandler of existing) {
+                handlersToRemove.add(existingHandler);
+            }
+        }
+    }
+    // Remove conflicting handlers from ALL their lookup styles
+    for (const oldHandler of handlersToRemove) {
+        const oldLookupStyles = oldHandler.__lookupStyles;
+        if (oldLookupStyles) {
+            for (const oldStyleName of oldLookupStyles) {
+                const handlers = STYLE_HANDLER_MAP[oldStyleName];
+                if (handlers) {
+                    const filtered = handlers.filter((h) => h !== oldHandler);
+                    if (filtered.length === 0) {
+                        delete STYLE_HANDLER_MAP[oldStyleName];
+                    }
+                    else {
+                        STYLE_HANDLER_MAP[oldStyleName] = filtered;
+                    }
+                }
+            }
+        }
+    }
+    // Register the new handler under its lookup styles
+    for (const styleName of lookupStyles) {
+        const existing = STYLE_HANDLER_MAP[styleName];
+        if (existing) {
+            existing.push(handler);
+        }
+        else {
+            STYLE_HANDLER_MAP[styleName] = [handler];
+        }
+    }
+}
+// ============================================================================
+// Wrapped Style Handlers Export
+// ============================================================================
+/**
+ * Create a wrapped handler that can be safely called by users.
+ * The wrapper preserves __lookupStyles for proper registration.
+ */
+function wrapHandler(handler) {
+    const fn = handler;
+    const wrapped = ((props) => fn(props));
+    wrapped.__lookupStyles = handler.__lookupStyles;
+    return wrapped;
+}
+/**
+ * Exported object containing wrapped predefined style handlers.
+ * Users can import and call these to extend or delegate to built-in behavior.
+ *
+ * Internal handlers use *Style suffix for searchability.
+ * External API uses short names for convenience.
+ *
+ * @example
+ * ```ts
+ * import { styleHandlers, configure } from '@cube-dev/ui-kit';
+ *
+ * configure({
+ *   handlers: {
+ *     fill: ({ fill }) => {
+ *       if (fill?.startsWith('gradient:')) {
+ *         return { background: fill.slice(9) };
+ *       }
+ *       return styleHandlers.fill({ fill });
+ *     },
+ *   },
+ * });
+ * ```
+ */
+export const styleHandlers = {
+    align: wrapHandler(alignStyle),
+    border: wrapHandler(borderStyle),
+    color: wrapHandler(colorStyle),
+    display: wrapHandler(displayStyle),
+    fade: wrapHandler(fadeStyle),
+    fill: wrapHandler(fillStyle),
+    svgFill: wrapHandler(svgFillStyle),
+    flow: wrapHandler(flowStyle),
+    gap: wrapHandler(gapStyle),
+    height: wrapHandler(heightStyle),
+    inset: wrapHandler(insetStyle),
+    justify: wrapHandler(justifyStyle),
+    margin: wrapHandler(marginStyle),
+    outline: wrapHandler(outlineStyle),
+    padding: wrapHandler(paddingStyle),
+    preset: wrapHandler(presetStyle),
+    radius: wrapHandler(radiusStyle),
+    reset: wrapHandler(resetStyle),
+    scrollbar: wrapHandler(scrollbarStyle),
+    shadow: wrapHandler(shadowStyle),
+    styledScrollbar: wrapHandler(styledScrollbarStyle),
+    transition: wrapHandler(transitionStyle),
+    width: wrapHandler(widthStyle),
+};
 
         

package/es/tasty/styles/preset.js

@@ -1,11 +1,24 @@
 /**
  * @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 { parseStyle } from '../utils/styles.js';
+/**
+ * Convert a value to CSS, handling numbers as pixels for numeric properties
+ */
+function toCSS(value, isNumeric) {
+    if (value == null)
+        return null;
+    if (typeof value === 'number') {
+        return isNumeric ? `${value}px` : String(value);
+    }
+    // Parse through style parser to handle custom units like 1x, 2r, etc.
+    const processed = parseStyle(String(value));
+    return processed.groups[0]?.values[0] || String(value);
+}
 function setCSSValue(styles, styleName, presetName, isPropOnly = false) {
     styles[`--${styleName}`] = (() => {
         if (presetName === 'inherit') {
@@ -26,55 +39,141 @@ function setCSSValue(styles, styleName, presetName, isPropOnly = false) {
         styles[styleName] = styles[`--${styleName}`];
     }
 }
-export function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacing, fontWeight, fontStyle, font, }) {
-    if (!preset)
-        return '';
-    if (preset === true)
-        preset = '';
-    const processed = parseStyle(preset);
-    let { mods } = processed.groups[0] ?? { mods: [] };
-    const isStrong = mods.includes('strong');
-    const isItalic = mods.includes('italic');
-    const isIcon = mods.includes('icon');
-    const isTight = mods.includes('tight');
-    mods = mods.filter((mod) => mod !== 'bold' && mod !== 'italic' && mod !== 'icon' && mod !== 'tight');
-    const name = mods[0] || 'default';
-    const styles = {};
-    if (!fontSize) {
-        setCSSValue(styles, 'font-size', name);
+/**
+ * Resolve font/fontFamily value to CSS font-family string.
+ *
+ * - `font="monospace"` → var(--monospace-font)
+ * - `font={true}` → var(--font)
+ * - `font="CustomFont"` → CustomFont, var(--font)
+ * - `fontFamily="Arial"` → Arial (direct, no fallback)
+ */
+function resolveFontFamily(font, fontFamily) {
+    // fontFamily takes precedence as a direct value
+    if (fontFamily) {
+        return { value: fontFamily, setVar: false };
     }
-    if (!lineHeight) {
-        setCSSValue(styles, 'line-height', name);
+    if (font == null || font === false) {
+        return null;
     }
-    if (!letterSpacing) {
-        setCSSValue(styles, 'letter-spacing', name);
+    if (font === 'monospace') {
+        return { value: 'var(--monospace-font)', setVar: true };
     }
-    if (!fontWeight) {
-        setCSSValue(styles, 'font-weight', name);
+    if (font === true) {
+        return { value: 'var(--font)', setVar: true };
     }
-    if (!fontStyle) {
-        setCSSValue(styles, 'font-style', name);
+    return { value: `${font}, var(--font)`, setVar: true };
+}
+/**
+ * Handles typography preset and individual font properties.
+ *
+ * When `preset` is defined, it sets up CSS custom properties for typography.
+ * Individual font props can be used with or without `preset`:
+ * - With `preset`: overrides the preset value for that property
+ * - Without `preset`: outputs the CSS directly
+ *
+ * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.
+ * fontWeight accepts numbers directly (e.g., 400, 700).
+ *
+ * font vs fontFamily:
+ * - `font` is the recommended prop with special handling (monospace, boolean, fallback)
+ * - `fontFamily` is a direct value without special handling
+ */
+export function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacing, fontWeight, fontStyle, fontFamily, font, }) {
+    const styles = {};
+    const hasPreset = preset != null && preset !== false;
+    // Handle preset if defined
+    if (hasPreset) {
+        let presetValue = preset === true ? '' : String(preset);
+        const processed = parseStyle(presetValue);
+        let { mods } = processed.groups[0] ?? { mods: [] };
+        const isStrong = mods.includes('strong');
+        const isItalic = mods.includes('italic');
+        const isIcon = mods.includes('icon');
+        const isTight = mods.includes('tight');
+        mods = mods.filter((mod) => mod !== 'bold' && mod !== 'italic' && mod !== 'icon' && mod !== 'tight');
+        const name = mods[0] || 'default';
+        // Set preset values for properties not explicitly overridden
+        if (fontSize == null) {
+            setCSSValue(styles, 'font-size', name);
+        }
+        if (lineHeight == null) {
+            setCSSValue(styles, 'line-height', name);
+        }
+        if (letterSpacing == null) {
+            setCSSValue(styles, 'letter-spacing', name);
+        }
+        if (fontWeight == null) {
+            setCSSValue(styles, 'font-weight', name);
+        }
+        if (fontStyle == null) {
+            setCSSValue(styles, 'font-style', name);
+        }
+        if (textTransform == null) {
+            setCSSValue(styles, 'text-transform', name);
+        }
+        if (fontFamily == null && font == null) {
+            setCSSValue(styles, 'font-family', name);
+        }
+        setCSSValue(styles, 'bold-font-weight', name, true);
+        setCSSValue(styles, 'icon-size', name, true);
+        if (isStrong) {
+            styles['font-weight'] = 'var(--bold-font-weight)';
+        }
+        if (isItalic) {
+            styles['font-style'] = 'italic';
+        }
+        if (isIcon) {
+            styles['font-size'] = 'var(--icon-size)';
+            styles['line-height'] = 'var(--icon-size)';
+        }
+        if (isTight) {
+            styles['line-height'] = 'var(--font-size)';
+        }
     }
-    if (!textTransform) {
-        setCSSValue(styles, 'text-transform', name);
+    // Handle individual font properties (work with or without preset)
+    const fontSizeVal = toCSS(fontSize, true);
+    if (fontSizeVal) {
+        styles['font-size'] = fontSizeVal;
     }
-    if (!font) {
-        setCSSValue(styles, 'font-family', name);
+    const lineHeightVal = toCSS(lineHeight, true);
+    if (lineHeightVal) {
+        styles['line-height'] = lineHeightVal;
     }
-    setCSSValue(styles, 'bold-font-weight', name, true);
-    setCSSValue(styles, 'icon-size', name, true);
-    if (isStrong) {
-        styles['font-weight'] = 'var(--bold-font-weight)';
+    const letterSpacingVal = toCSS(letterSpacing, true);
+    if (letterSpacingVal) {
+        styles['letter-spacing'] = letterSpacingVal;
     }
-    if (isItalic) {
-        styles['font-style'] = 'italic';
+    // fontWeight: numbers should NOT get 'px' suffix
+    const fontWeightVal = toCSS(fontWeight, false);
+    if (fontWeightVal) {
+        styles['font-weight'] = fontWeightVal;
     }
-    if (isIcon) {
-        styles['font-size'] = 'var(--icon-size)';
-        styles['line-height'] = 'var(--icon-size)';
+    // fontStyle: handle boolean (true → italic) and string values
+    if (fontStyle != null) {
+        if (fontStyle === true) {
+            styles['font-style'] = 'italic';
+        }
+        else if (fontStyle !== 'inherit') {
+            styles['font-style'] = fontStyle ? 'italic' : 'normal';
+        }
+        else {
+            styles['font-style'] = 'inherit';
+        }
+    }
+    if (textTransform) {
+        styles['text-transform'] = textTransform;
+    }
+    // Handle font/fontFamily (font has special handling, fontFamily is direct)
+    const fontResult = resolveFontFamily(font, fontFamily);
+    if (fontResult) {
+        styles['font-family'] = fontResult.value;
+        if (fontResult.setVar) {
+            styles['--font-family'] = fontResult.value;
+        }
     }
-    if (isTight) {
-        styles['line-height'] = 'var(--font-size)';
+    // Return undefined if no styles to apply
+    if (Object.keys(styles).length === 0) {
+        return;
     }
     return styles;
 }
@@ -86,6 +185,7 @@ presetStyle.__lookupStyles = [
     'textTransform',
     'fontWeight',
     'fontStyle',
+    'fontFamily',
     'font',
 ];
 

package/es/tasty/styles/radius.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.
  */
 
@@ -13,7 +13,7 @@ export function radiusStyle({ radius }) {
         radius = `${radius}px`;
     }
     if (!radius)
-        return '';
+        return;
     if (radius === true)
         radius = '1r';
     const processed = parseStyle(radius);

package/es/tasty/styles/reset.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/styles/scrollbar.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/styles/shadow.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.
  */
 
@@ -15,7 +15,7 @@ function toBoxShadow(shadow) {
 }
 export function shadowStyle({ shadow }) {
     if (!shadow)
-        return '';
+        return;
     if (shadow === true)
         shadow = 'var(--card-shadow)';
     return {

package/es/tasty/styles/styledScrollbar.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/styles/transition.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.
  */
 
@@ -13,6 +13,25 @@ const MAP = {
     scale: ['transform', 'scale'],
     placeSelf: ['transform', 'top', 'right', 'bottom', 'left'],
     fill: ['background-color'],
+    image: [
+        'background-image',
+        'background-position',
+        'background-size',
+        'background-repeat',
+        'background-attachment',
+        'background-origin',
+        'background-clip',
+    ],
+    background: [
+        'background-color',
+        'background-image',
+        'background-position',
+        'background-size',
+        'background-repeat',
+        'background-attachment',
+        'background-origin',
+        'background-clip',
+    ],
     border: ['border', 'box-shadow'],
     filter: ['filter', 'backdrop-filter'],
     radius: ['border-radius'],
@@ -40,7 +59,6 @@ const MAP = {
     height: ['max-height', 'min-height', 'height'],
     gap: ['gap', 'margin'],
     zIndex: ['z-index'],
-    image: ['background-image', 'background-position', 'background-size'],
 };
 export const DEFAULT_TIMING = 'var(--transition)';
 const DEFAULT_EASING = 'linear';

package/es/tasty/styles/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.
  */