@cube-dev/ui-kit 0.98.9 → 0.99.1

package/es/tasty/styles/color.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { parseColor } from '../utils/styles';
-import { convertColorChainToRgbChain } from './createStyle';
+import { parseColor } from '../utils/styles.js';
+import { convertColorChainToRgbChain } from './createStyle.js';
 export function colorStyle({ color }) {
     if (!color)
         return '';

package/es/tasty/styles/createStyle.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { toSnakeCase } from '../utils/string';
-import { getRgbValuesFromRgbaString, parseColor, parseStyle, strToRgb, } from '../utils/styles';
+import { toSnakeCase } from '../utils/string.js';
+import { getRgbValuesFromRgbaString, parseColor, parseStyle, strToRgb, } from '../utils/styles.js';
 const CACHE = {};
 /**
  * Convert color fallback chain to RGB fallback chain.

package/es/tasty/styles/dimension.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles';
+import { parseStyle } from '../utils/styles.js';
 const DEFAULT_MIN_SIZE = 'var(--gap)';
 const DEFAULT_MAX_SIZE = '100%';
 export function dimensionStyle(name) {

package/es/tasty/styles/display.js

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

package/es/tasty/styles/fade.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';
+import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles.js';
 const DIRECTION_MAP = {
     right: 'to left',
     left: 'to right',

package/es/tasty/styles/fill.js

@@ -1,36 +1,26 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles';
-import { convertColorChainToRgbChain } from './createStyle';
+import { parseStyle } from '../utils/styles.js';
 export function fillStyle({ fill }) {
     if (!fill)
         return '';
     const processed = parseStyle(fill);
     fill = processed.groups[0]?.colors[0] || fill;
-    const match = fill.match(/var\(--(.+?)-color/);
-    let name = '';
-    if (match) {
-        name = match[1];
-    }
-    const styles = [
-        {
-            'background-color': fill,
-        },
-    ];
-    if (name) {
-        styles.push({
-            $: '>*',
-            '--context-fill-color': fill,
-            '--context-fill-color-rgb': convertColorChainToRgbChain(fill),
-        });
-    }
-    return styles;
+    return { 'background-color': fill };
 }
 fillStyle.__lookupStyles = ['fill'];
+export function svgFillStyle({ svgFill }) {
+    if (!svgFill)
+        return '';
+    const processed = parseStyle(svgFill);
+    svgFill = processed.groups[0]?.colors[0] || svgFill;
+    return { fill: svgFill };
+}
+svgFillStyle.__lookupStyles = ['svgFill'];
 
         

package/es/tasty/styles/flow.js

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

package/es/tasty/styles/font.js

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

package/es/tasty/styles/fontStyle.js

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

package/es/tasty/styles/gap.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles';
+import { parseStyle } from '../utils/styles.js';
 export function gapStyle({ display = 'block', flow, gap, }) {
     if (typeof gap === 'number') {
         gap = `${gap}px`;

package/es/tasty/styles/groupRadius.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles';
+import { parseStyle } from '../utils/styles.js';
 const MAP = {
     row: ['* 0 0 *', '0 * * 0'],
     column: ['* * 0 0', '0 0 * *'],

package/es/tasty/styles/height.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { dimensionStyle } from './dimension';
+import { dimensionStyle } from './dimension.js';
 const dimension = dimensionStyle('height');
 export function heightStyle({ height }) {
     return dimension(height);

package/es/tasty/styles/index.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { predefine } from './predefined';
+import { predefine } from './predefined.js';
 const { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias } = predefine();
 export { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };
-export * from './createStyle';
+export * from './createStyle.js';
 
         

package/es/tasty/styles/inset.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';
+import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles.js';
 export function insetStyle({ inset }) {
     if (typeof inset === 'number') {
         inset = `${inset}px`;

package/es/tasty/styles/justify.js

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

package/es/tasty/styles/list.js

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

package/es/tasty/styles/margin.js

@@ -1,31 +1,26 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';
+import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles.js';
 /**
- * Parse a margin value and return processed values
+ * Parse a margin value and return the first processed value
  */
 function parseMarginValue(value) {
-    if (typeof value === 'number') {
-        return [`${value}px`];
-    }
+    if (typeof value === 'number')
+        return `${value}px`;
     if (!value)
-        return [];
+        return null;
     if (value === true)
         value = '1x';
-    const processed = parseStyle(value);
-    let { values } = processed.groups[0] ?? { values: [] };
-    if (!values.length) {
-        values = ['var(--gap)'];
-    }
-    return values;
+    const { values } = parseStyle(value).groups[0] ?? { values: [] };
+    return values[0] || 'var(--gap)';
 }
 /**
- * Parse directional margin value (like "1x top" or "2x left right")
+ * Parse margin value with optional directions (like "1x top" or "2x left right")
  */
 function parseDirectionalMargin(value) {
     if (typeof value === 'number') {
@@ -35,66 +30,91 @@ function parseDirectionalMargin(value) {
         return { values: [], directions: [] };
     if (value === true)
         value = '1x';
-    const processed = parseStyle(value);
-    let { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
-    if (!values.length) {
-        values = ['var(--gap)'];
-    }
-    const directions = filterMods(mods, DIRECTIONS);
-    return { values, directions };
+    const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
+    return {
+        values: values.length ? values : ['var(--gap)'],
+        directions: filterMods(mods, DIRECTIONS),
+    };
 }
 export function marginStyle({ margin, marginBlock, marginInline, marginTop, marginRight, marginBottom, marginLeft, }) {
-    const styles = {};
-    // Priority 1 (lowest): margin - apply to all directions if no other properties are specified
+    // If no margin is defined, return empty object
+    if (margin == null &&
+        marginBlock == null &&
+        marginInline == null &&
+        marginTop == null &&
+        marginRight == null &&
+        marginBottom == null &&
+        marginLeft == null) {
+        return {};
+    }
+    // Initialize all directions to 0
+    let [top, right, bottom, left] = ['0', '0', '0', '0'];
+    // Priority 1 (lowest): margin
     if (margin != null) {
-        // Parse directional margin (e.g., "1x top" or "2x left right")
         const { values, directions } = parseDirectionalMargin(margin);
-        if (directions.length === 0) {
-            // No directions specified, apply to all sides
-            styles['margin-top'] = values[0];
-            styles['margin-right'] = values[1] || values[0];
-            styles['margin-bottom'] = values[2] || values[0];
-            styles['margin-left'] = values[3] || values[1] || values[0];
-        }
-        else {
-            // Apply only to specified directions
-            directions.forEach((dir) => {
-                const index = DIRECTIONS.indexOf(dir);
-                styles[`margin-${dir}`] =
-                    values[index] || values[index % 2] || values[0];
-            });
+        if (values.length) {
+            if (directions.length === 0) {
+                top = values[0];
+                right = values[1] || values[0];
+                bottom = values[2] || values[0];
+                left = values[3] || values[1] || values[0];
+            }
+            else {
+                for (const dir of directions) {
+                    const idx = DIRECTIONS.indexOf(dir);
+                    const val = values[idx] || values[idx % 2] || values[0];
+                    if (dir === 'top')
+                        top = val;
+                    else if (dir === 'right')
+                        right = val;
+                    else if (dir === 'bottom')
+                        bottom = val;
+                    else if (dir === 'left')
+                        left = val;
+                }
+            }
         }
     }
-    // Priority 2 (medium): marginBlock - override top and bottom
+    // Priority 2 (medium): marginBlock/marginInline
     if (marginBlock != null) {
-        const values = parseMarginValue(marginBlock);
-        styles['margin-top'] = values[0];
-        styles['margin-bottom'] = values[1] || values[0];
+        const val = parseMarginValue(marginBlock);
+        if (val)
+            top = bottom = val;
     }
-    // Priority 2 (medium): marginInline - override left and right
     if (marginInline != null) {
-        const values = parseMarginValue(marginInline);
-        styles['margin-left'] = values[0];
-        styles['margin-right'] = values[1] || values[0];
+        const val = parseMarginValue(marginInline);
+        if (val)
+            left = right = val;
     }
-    // Priority 3 (highest): individual directions - override specific sides
+    // Priority 3 (highest): individual directions
     if (marginTop != null) {
-        const values = parseMarginValue(marginTop);
-        styles['margin-top'] = values[0];
+        const val = parseMarginValue(marginTop);
+        if (val)
+            top = val;
     }
     if (marginRight != null) {
-        const values = parseMarginValue(marginRight);
-        styles['margin-right'] = values[0];
+        const val = parseMarginValue(marginRight);
+        if (val)
+            right = val;
     }
     if (marginBottom != null) {
-        const values = parseMarginValue(marginBottom);
-        styles['margin-bottom'] = values[0];
+        const val = parseMarginValue(marginBottom);
+        if (val)
+            bottom = val;
     }
     if (marginLeft != null) {
-        const values = parseMarginValue(marginLeft);
-        styles['margin-left'] = values[0];
+        const val = parseMarginValue(marginLeft);
+        if (val)
+            left = val;
+    }
+    // Optimize output: 1 value if all same, 2 values if top==bottom && left==right
+    if (top === right && right === bottom && bottom === left) {
+        return { margin: top };
+    }
+    if (top === bottom && left === right) {
+        return { margin: `${top} ${left}` };
     }
-    return styles;
+    return { margin: `${top} ${right} ${bottom} ${left}` };
 }
 marginStyle.__lookupStyles = [
     'margin',

package/es/tasty/styles/outline.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { filterMods, parseStyle } from '../utils/styles';
+import { filterMods, parseStyle } from '../utils/styles.js';
 const BORDER_STYLES = [
     'none',
     'hidden',

package/es/tasty/styles/padding.js

@@ -1,31 +1,26 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';
+import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles.js';
 /**
- * Parse a padding value and return processed values
+ * Parse a padding value and return the first processed value
  */
 function parsePaddingValue(value) {
-    if (typeof value === 'number') {
-        return [`${value}px`];
-    }
+    if (typeof value === 'number')
+        return `${value}px`;
     if (!value)
-        return [];
+        return null;
     if (value === true)
         value = '1x';
-    const processed = parseStyle(value);
-    let { values } = processed.groups[0] ?? { values: [] };
-    if (!values.length) {
-        values = ['var(--gap)'];
-    }
-    return values;
+    const { values } = parseStyle(value).groups[0] ?? { values: [] };
+    return values[0] || 'var(--gap)';
 }
 /**
- * Parse directional padding value (like "1x top" or "2x left right")
+ * Parse padding value with optional directions (like "1x top" or "2x left right")
  */
 function parseDirectionalPadding(value) {
     if (typeof value === 'number') {
@@ -35,66 +30,91 @@ function parseDirectionalPadding(value) {
         return { values: [], directions: [] };
     if (value === true)
         value = '1x';
-    const processed = parseStyle(value);
-    let { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
-    if (!values.length) {
-        values = ['var(--gap)'];
-    }
-    const directions = filterMods(mods, DIRECTIONS);
-    return { values, directions };
+    const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
+    return {
+        values: values.length ? values : ['var(--gap)'],
+        directions: filterMods(mods, DIRECTIONS),
+    };
 }
 export function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft, }) {
-    const styles = {};
-    // Priority 1 (lowest): padding - apply to all directions if no other properties are specified
+    // If no padding is defined, return empty object
+    if (padding == null &&
+        paddingBlock == null &&
+        paddingInline == null &&
+        paddingTop == null &&
+        paddingRight == null &&
+        paddingBottom == null &&
+        paddingLeft == null) {
+        return {};
+    }
+    // Initialize all directions to 0
+    let [top, right, bottom, left] = ['0', '0', '0', '0'];
+    // Priority 1 (lowest): padding
     if (padding != null) {
-        // Parse directional padding (e.g., "1x top" or "2x left right")
         const { values, directions } = parseDirectionalPadding(padding);
-        if (directions.length === 0) {
-            // No directions specified, apply to all sides
-            styles['padding-top'] = values[0];
-            styles['padding-right'] = values[1] || values[0];
-            styles['padding-bottom'] = values[2] || values[0];
-            styles['padding-left'] = values[3] || values[1] || values[0];
-        }
-        else {
-            // Apply only to specified directions
-            directions.forEach((dir) => {
-                const index = DIRECTIONS.indexOf(dir);
-                styles[`padding-${dir}`] =
-                    values[index] || values[index % 2] || values[0];
-            });
+        if (values.length) {
+            if (directions.length === 0) {
+                top = values[0];
+                right = values[1] || values[0];
+                bottom = values[2] || values[0];
+                left = values[3] || values[1] || values[0];
+            }
+            else {
+                for (const dir of directions) {
+                    const idx = DIRECTIONS.indexOf(dir);
+                    const val = values[idx] || values[idx % 2] || values[0];
+                    if (dir === 'top')
+                        top = val;
+                    else if (dir === 'right')
+                        right = val;
+                    else if (dir === 'bottom')
+                        bottom = val;
+                    else if (dir === 'left')
+                        left = val;
+                }
+            }
         }
     }
-    // Priority 2 (medium): paddingBlock - override top and bottom
+    // Priority 2 (medium): paddingBlock/paddingInline
     if (paddingBlock != null) {
-        const values = parsePaddingValue(paddingBlock);
-        styles['padding-top'] = values[0];
-        styles['padding-bottom'] = values[1] || values[0];
+        const val = parsePaddingValue(paddingBlock);
+        if (val)
+            top = bottom = val;
     }
-    // Priority 2 (medium): paddingInline - override left and right
     if (paddingInline != null) {
-        const values = parsePaddingValue(paddingInline);
-        styles['padding-left'] = values[0];
-        styles['padding-right'] = values[1] || values[0];
+        const val = parsePaddingValue(paddingInline);
+        if (val)
+            left = right = val;
     }
-    // Priority 3 (highest): individual directions - override specific sides
+    // Priority 3 (highest): individual directions
     if (paddingTop != null) {
-        const values = parsePaddingValue(paddingTop);
-        styles['padding-top'] = values[0];
+        const val = parsePaddingValue(paddingTop);
+        if (val)
+            top = val;
     }
     if (paddingRight != null) {
-        const values = parsePaddingValue(paddingRight);
-        styles['padding-right'] = values[0];
+        const val = parsePaddingValue(paddingRight);
+        if (val)
+            right = val;
     }
     if (paddingBottom != null) {
-        const values = parsePaddingValue(paddingBottom);
-        styles['padding-bottom'] = values[0];
+        const val = parsePaddingValue(paddingBottom);
+        if (val)
+            bottom = val;
     }
     if (paddingLeft != null) {
-        const values = parsePaddingValue(paddingLeft);
-        styles['padding-left'] = values[0];
+        const val = parsePaddingValue(paddingLeft);
+        if (val)
+            left = val;
+    }
+    // Optimize output: 1 value if all same, 2 values if top==bottom && left==right
+    if (top === right && right === bottom && bottom === left) {
+        return { padding: top };
+    }
+    if (top === bottom && left === right) {
+        return { padding: `${top} ${left}` };
     }
-    return styles;
+    return { padding: `${top} ${right} ${bottom} ${left}` };
 }
 paddingStyle.__lookupStyles = [
     'padding',

package/es/tasty/styles/place.js

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